基于Vue+Echart的动态图绘制

浪矢小同学2023-10-10 18:03

基于Vue+Echart的动态图绘制

需求分析

用户需要展示他的数据库是有哪个数据库转化的，需要展示数据库的轨迹图，前导库的关系图。

后端接口返回的格式

传入当前的数据库（节点）的id

接口返回

currentDb是当前数据库（节点）的信息 Object

newDbList当前数据库（节点）的后继数据库（节点）Array

oldDbList当前数据库（节点）的前导数据库（节点）Array

前端需要实现的效果

第一次展示当前数据库（节点）以及前导数据库（节点）和后继数据库（节点）

当鼠标悬浮在某个数据库（节点）的时候，再在此基础上渲染悬浮的数据库（节点)以及前导数据库（节点）和后继数据库（节点）

解决方法

关系图的setOption

如下

vue 复制代码 
 const chartOptions = {
        title: {
          text: '前导库关系图',
        },
//鼠标悬浮的时候展示的内容
        tooltip: {
          formatter: function (params) {
            return `名称: ${params.data.name}<br>
                      别名: ${params.data.info?.dbNickName || '无'}<br>
                      所在平台：${params.data.info?.datasourceSystemName || '无'}<br>
                      数据库类型：${params.data.info?.dbType || '无'}<br>
                      备注：${params.data.info?.remark || '无'}
  `;
          }
        },
        series: [
          {
            type: 'graph',
            layout: 'none',
            animation: false,
            roam: true,
            label: {
              show: true,
            },
            force: {
              gravity: 0,
              repulsion: 1000,
              edgeLength: 5
            },
            edgeSymbol: ['circle', 'arrow'], // 使用箭头作为边的符号
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 12,
            },
            data: this.nodes,
            links: this.links,
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0,
              // 添加箭头配置
              arrow: {
                type: 'arrow', // 箭头的类型
                size: 8, // 箭头的大小
                arrowOffset: 10, // 箭头偏移位置
              },
            },
            emphasis: {
              focus: 'adjacency',
              link: {
                show: true,
              },
              handleSize: 6,
            },
          },
        ],
      };

参考echart官网echarts.apache.org/zh/index.ht... 可以查看配置的相关解释，此处不过多解释

准备第一次渲染 需要的数据 函数

vue 复制代码 
 prepareData(data) {
      // 当前节点
      const currentNode = [
        {
          id: data.currentDb.id,
          name: data.currentDb.dbName,
          info: data.currentDb,
          x: 400,
          y: 100,
          symbol: 'rect', // 使用矩形作为节点的形状
          symbolSize: [40, 30], // 设置矩形节点的大小
          itemStyle: {
            color: '#e63f32'
          },
        }
      ]
      this.nodePosition(currentNode)
      this.currentId = data.currentDb.id;
      // 根据父组件传递的数据创建节点
      if (data.newDbList) {
        const gridSize = 60; // 网格大小
        const newNodes = data.newDbList.map((item, index) => {
          // let indexNew=index+1;
          const yOffset = data.newDbList.length === 1 ? 0 : (index % 2 === 0 ? 20 : -20) * (index + 1);
          return {
            id: item.id,
            info: item,
            name: item.dbName,
            x: 400 + gridSize,
            y: 100 + yOffset,
            symbol: 'rect', // 使用矩形作为节点的形状
            symbolSize: [40, 30], // 设置矩形节点的大小
            itemStyle: {
              color: '#41a5ee'
            },
          }
        })
        this.nodePosition(newNodes)
        const newLinks = data.newDbList.map((link) => (
          {
            source: data.currentDb.id.toString(),
            target: link.id.toString(),
            lineStyle: {
              normal: {
                curveness: 0.2, // 调整曲线的弯曲度
              },
            },
          }
        ))
        this.links = [
          ...this.links,
          ...newLinks

        ]
      }
      if (data.oldDbList) {
        const gridSize = 60; // 网格大小
        const oldNodes = data.oldDbList.map((item, index) => {
          // let indexNew=index+1;
          const yOffset = data.oldDbList.length === 1 ? 0 : (index % 2 === 0 ? 20 : -20) * (index + 1);
          return {
            id: item.id,
            info: item,
            name: item.dbName,
            x: 400 - gridSize,
            y: 100 + yOffset,
            symbol: 'rect', // 使用矩形作为节点的形状
            symbolSize: [40, 30], // 设置矩形节点的大小
            itemStyle: {
              color: '#41a5ee'
            },
          };
        })
        this.nodePosition(oldNodes)
        const oldLinks = data.oldDbList.map((link) => (
          {
            source: link.id.toString(),
            target: data.currentDb.id.toString(),
            lineStyle: {
              normal: {
                curveness: 0.2, // 调整曲线的弯曲度
              },
            },
          }
        ))
        this.links = [
          ...this.links,
          ...oldLinks
        ]
      }
    },

注：此处使用曲线的原因是因为曲线可以大大降低 两个节点的连线通过第三个节点的问题 ，造成展示错误（没有做link连线的判定）

结算新节点的位置 函数

输入参数nodes是存储节点的数组

vue 复制代码 
 // 计算节点位置并添加节点
    nodePosition(nodes) {
      nodes.forEach(node => {
        const originalPositionKey = `${node.x}_${node.y}`;
        let positionKey = originalPositionKey;

        while (this.nodePositions.has(positionKey)) {
          const randomValue = Math.floor(Math.random() * 81) - 40;
          node.x += randomValue;
          node.y += randomValue;
          positionKey = `${node.x}_${node.y}`;
        }

        this.nodePositions.add(positionKey);
        this.nodes.push(node);
      });
    },

具体逻辑：先判断当前节点位置是否已经存在，如果存在，则利用随机数在存在的位置上偏移一定的值 ，再存储。

节点位置存储方式x_y

vbnet 复制代码 
nodePositions: new Set(), // 使用 Set 来存储节点位置信息

处理新节点信息的函数

vue 复制代码 
  changeData(data) {
      console.log('data.currentDb', data.currentDb)
      // 当前节点的x，y值
      const currentX = data.currentDb.x;
      const currentY = data.currentDb.y;
      if (data.newDbList) {
        const newNodes=[]
        // 使用Set来创建一个唯一节点ID的集合
        const existingNodeIds = new Set(this.nodes.map(node => node.id));
        const gridSize = 60; // 网格大小

        data.newDbList.map((item, index) => {
          const yOffset = data.newDbList.length === 1 ? 0 : (index % 2 === 0 ? 20 : -20) * (index + 1);
          const newNode = {
            id: item.id,
            info: item,
            name: item.dbName,
            x: currentX + gridSize,
            y: currentY + yOffset,
            symbol: 'rect', // 使用矩形作为节点的形状
            symbolSize: [40, 30], // 设置矩形节点的大小
            itemStyle: {
              color: '#41a5ee'
            }
          }
          if (!existingNodeIds.has(item.id)) {
            newNodes.push(newNode)
          } else {

          }
          this.nodePosition(newNodes)
        })

        const newLinks = data.newDbList.map((link) => (
          {
            source: data.currentDb.id.toString(),
            target: link.id.toString(),
            lineStyle: {
              normal: {
                curveness: 0.2, // 调整曲线的弯曲度
              },
            },
          }
        ))
        this.links = [
          ...this.links,
          ...newLinks

        ]
      }
      if (data.oldDbList) {
        const oldNodes=[]
        // 使用Set来创建一个唯一节点ID的集合
        const existingNodeIds = new Set(this.nodes.map(node => node.id));
        console.log('existingNodeIds', existingNodeIds)
        const gridSize = 60; // 网格大小
        data.oldDbList.map((item, index) => {
          const yOffset = data.oldDbList.length === 1 ? 0 : (index % 2 === 0 ? 20 : -20);
          const newNode = {
            id: item.id,
            info: item,
            name: item.dbName,
            x: currentX - gridSize,
            y: currentY + yOffset,
            symbol: 'rect', // 使用矩形作为节点的形状
            symbolSize: [40, 30], // 设置矩形节点的大小
            itemStyle: {
              color: '#41a5ee'
            },
          }
          if (!existingNodeIds.has(item.id)) {
            // 如果新节点的ID不存在于现有节点中，添加新节点
            oldNodes.push(newNode);
          } else {

          }
          this.nodePosition(oldNodes)
        })


        const oldLinks = data.oldDbList.map((link) => (
          {
            source: link.id.toString(),
            target: data.currentDb.id.toString(),
            lineStyle: {
              normal: {
                curveness: 0.2, // 调整曲线的弯曲度
              },
            },
          }
        ))
        this.links = [
          ...this.links,
          ...oldLinks
        ]
      }
    },

与prepareData函数内容差不多 ，作者此处还未做代码整合

悬浮在节点上方时的处理函数

vue 复制代码 
 updateNode() {
      this.myChart.on('mouseover', (params) => {
        if (params.dataType === 'node') {
          const currentData = params.data;
          // 先隐藏所有节点的 label
          this.nodes.forEach(node => {
            if (node.label) {
              node.label.show = false;
            }
          });
          // 显示当前节点的 label
          if (currentData.label) {
            currentData.label.show = true;
          }
          databaseRelation(currentData.id).then(res => {
            if (res.code === 200) {
              const data = {
                ...res.data,
                currentDb: params.data,
              }
              this.changeData(data)
              this.drawChart();
            } else {
              this.$message(res.msg)
            }
          })
          console.log('params', params.data)
        }
      });
    }

databaseRelation是作者项目的后端请求，请根据自己实际情况调整

主要是通过改变setOption里面的data来改变当前的图

完整代码

vue 复制代码 
<template>
  <div>
    <div id="chart-container" style="height: 400px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { databaseRelation } from '@/api/qysj/app/rawData/Database'

export default {
  props: {
    data: Object,
  },
  data() {
    return {
      myChart: null,
      nodes: [

      ],
      links: [

      ],
      nodePositions: new Set(), // 使用 Set 来存储节点位置信息
      // 当前节点id
      currentId: null
    };
  },
  mounted() {
    console.log('当前的节点', this.data.currentDb)
    console.log('第一次的节点', this.data)
    const chartContainer = this.$el.querySelector('#chart-container');
    this.myChart = echarts.init(chartContainer);
    this.myChart.clear();
    this.prepareData(this.data); // 准备节点和链接数据
    this.drawChart();
    this.updateNode()
  },
  methods: {
    // 准备节点和链接数据
    prepareData(data) {
      // 当前节点
      const currentNode = [
        {
          id: data.currentDb.id,
          name: data.currentDb.dbName,
          info: data.currentDb,
          x: 400,
          y: 100,
          symbol: 'rect', // 使用矩形作为节点的形状
          symbolSize: [40, 30], // 设置矩形节点的大小
          itemStyle: {
            color: '#e63f32'
          },
        }
      ]
      this.nodePosition(currentNode)
      this.currentId = data.currentDb.id;
      // 根据父组件传递的数据创建节点
      if (data.newDbList) {
        const gridSize = 60; // 网格大小
        const newNodes = data.newDbList.map((item, index) => {
          // let indexNew=index+1;
          const yOffset = data.newDbList.length === 1 ? 0 : (index % 2 === 0 ? 20 : -20) * (index + 1);
          return {
            id: item.id,
            info: item,
            name: item.dbName,
            x: 400 + gridSize,
            y: 100 + yOffset,
            symbol: 'rect', // 使用矩形作为节点的形状
            symbolSize: [40, 30], // 设置矩形节点的大小
            itemStyle: {
              color: '#41a5ee'
            },
          }
        })
        this.nodePosition(newNodes)
        const newLinks = data.newDbList.map((link) => (
          {
            source: data.currentDb.id.toString(),
            target: link.id.toString(),
            lineStyle: {
              normal: {
                curveness: 0.2, // 调整曲线的弯曲度
              },
            },
          }
        ))
        this.links = [
          ...this.links,
          ...newLinks

        ]
      }
      if (data.oldDbList) {
        const gridSize = 60; // 网格大小
        const oldNodes = data.oldDbList.map((item, index) => {
          // let indexNew=index+1;
          const yOffset = data.oldDbList.length === 1 ? 0 : (index % 2 === 0 ? 20 : -20) * (index + 1);
          return {
            id: item.id,
            info: item,
            name: item.dbName,
            x: 400 - gridSize,
            y: 100 + yOffset,
            symbol: 'rect', // 使用矩形作为节点的形状
            symbolSize: [40, 30], // 设置矩形节点的大小
            itemStyle: {
              color: '#41a5ee'
            },
          };
        })
        this.nodePosition(oldNodes)
        const oldLinks = data.oldDbList.map((link) => (
          {
            source: link.id.toString(),
            target: data.currentDb.id.toString(),
            lineStyle: {
              normal: {
                curveness: 0.2, // 调整曲线的弯曲度
              },
            },
          }
        ))
        this.links = [
          ...this.links,
          ...oldLinks
        ]
      }
    },
    changeData(data) {
      console.log('data.currentDb', data.currentDb)
      // 当前节点的x，y值
      const currentX = data.currentDb.x;
      const currentY = data.currentDb.y;
      if (data.newDbList) {
        const newNodes=[]
        // 使用Set来创建一个唯一节点ID的集合
        const existingNodeIds = new Set(this.nodes.map(node => node.id));
        const gridSize = 60; // 网格大小

        data.newDbList.map((item, index) => {
          const yOffset = data.newDbList.length === 1 ? 0 : (index % 2 === 0 ? 20 : -20) * (index + 1);
          const newNode = {
            id: item.id,
            info: item,
            name: item.dbName,
            x: currentX + gridSize,
            y: currentY + yOffset,
            symbol: 'rect', // 使用矩形作为节点的形状
            symbolSize: [40, 30], // 设置矩形节点的大小
            itemStyle: {
              color: '#41a5ee'
            }
          }
          if (!existingNodeIds.has(item.id)) {
            newNodes.push(newNode)
          } else {

          }
          this.nodePosition(newNodes)
        })

        const newLinks = data.newDbList.map((link) => (
          {
            source: data.currentDb.id.toString(),
            target: link.id.toString(),
            lineStyle: {
              normal: {
                curveness: 0.2, // 调整曲线的弯曲度
              },
            },
          }
        ))
        this.links = [
          ...this.links,
          ...newLinks

        ]
      }
      if (data.oldDbList) {
        const oldNodes=[]
        // 使用Set来创建一个唯一节点ID的集合
        const existingNodeIds = new Set(this.nodes.map(node => node.id));
        console.log('existingNodeIds', existingNodeIds)
        const gridSize = 60; // 网格大小
        data.oldDbList.map((item, index) => {
          const yOffset = data.oldDbList.length === 1 ? 0 : (index % 2 === 0 ? 20 : -20);
          const newNode = {
            id: item.id,
            info: item,
            name: item.dbName,
            x: currentX - gridSize,
            y: currentY + yOffset,
            symbol: 'rect', // 使用矩形作为节点的形状
            symbolSize: [40, 30], // 设置矩形节点的大小
            itemStyle: {
              color: '#41a5ee'
            },
          }
          if (!existingNodeIds.has(item.id)) {
            // 如果新节点的ID不存在于现有节点中，添加新节点
            oldNodes.push(newNode);
          } else {

          }
          this.nodePosition(oldNodes)
        })


        const oldLinks = data.oldDbList.map((link) => (
          {
            source: link.id.toString(),
            target: data.currentDb.id.toString(),
            lineStyle: {
              normal: {
                curveness: 0.2, // 调整曲线的弯曲度
              },
            },
          }
        ))
        this.links = [
          ...this.links,
          ...oldLinks
        ]
      }
    },
    // 计算节点位置并添加节点
    nodePosition(nodes) {
      nodes.forEach(node => {
        const originalPositionKey = `${node.x}_${node.y}`;
        let positionKey = originalPositionKey;

        while (this.nodePositions.has(positionKey)) {
          const randomValue = Math.floor(Math.random() * 81) - 40;
          node.x += randomValue;
          node.y += randomValue;
          positionKey = `${node.x}_${node.y}`;
        }

        this.nodePositions.add(positionKey);
        this.nodes.push(node);
      });
    },

    drawChart() {
      console.log('this.nodes', this.nodes)
      console.log('this.links', this.links)
      const chartOptions = {
        title: {
          text: '前导库关系图',
        },
        tooltip: {
          formatter: function (params) {
            return `名称: ${params.data.name}<br>
                      别名: ${params.data.info?.dbNickName || '无'}<br>
                      所在平台：${params.data.info?.datasourceSystemName || '无'}<br>
                      数据库类型：${params.data.info?.dbType || '无'}<br>
                      备注：${params.data.info?.remark || '无'}
  `;
          }
        },
        series: [
          {
            type: 'graph',
            layout: 'none',
            //   layout: 'force',
            animation: false,
            // data: [this.createTreeData()], // 树状布局需要提供一个树形结构的数据
            roam: true,
            label: {
              show: true,
            },
            force: {
              // initLayout: 'circular'
              gravity: 0,
              repulsion: 1000,
              edgeLength: 5
            },
            edgeSymbol: ['circle', 'arrow'], // 使用箭头作为边的符号
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 12,
            },
            data: this.nodes,
            links: this.links,
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0,
              // 添加箭头配置
              arrow: {
                type: 'arrow', // 箭头的类型
                size: 8, // 箭头的大小
                arrowOffset: 10, // 箭头偏移位置
              },
            },
            emphasis: {
              focus: 'adjacency',
              link: {
                show: true,
              },
              handleSize: 6,
            },
          },
        ],
      };
      this.myChart.setOption(chartOptions);
    },
    updateNode() {
      this.myChart.on('mouseover', (params) => {
        if (params.dataType === 'node') {
          const currentData = params.data;
          // 先隐藏所有节点的 label
          this.nodes.forEach(node => {
            if (node.label) {
              node.label.show = false;
            }
          });
          // 显示当前节点的 label
          if (currentData.label) {
            currentData.label.show = true;
          }
          databaseRelation(currentData.id).then(res => {
            if (res.code === 200) {
              const data = {
                ...res.data,
                currentDb: params.data,
              }
              console.log('data', data)

              this.changeData(data)
              this.drawChart();
              // this.myChart.setOption(chartOptions);
            } else {
              this.$message(res.msg)
            }
          })
          console.log('params', params.data)
        }
      });
    }
  },
};
</script>

本文由博客一文多发平台 OpenWrite 发布！

相关推荐
请叫我飞哥@6 小时前
HTML5 CSS 与样式详解
前端·css·html5
小马哥编程8 小时前
原型链（Prototype Chain）入门
css·vue.js·chrome·node.js·原型模式·chrome devtools
娃哈哈哈哈呀12 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
sunshine64114 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
lv程序媛16 小时前
css让按钮放在最右侧
前端·css
温轻舟17 小时前
前端开发 之 12个鼠标交互特效上【附完整源码】
开发语言·前端·javascript·css·html·交互·温轻舟
linda_060719 小时前
定位方式：css
前端·css
安冬的码畜日常20 小时前
【CSS in Depth 2 精译_086】14.3：CSS 剪切路径（clip-path）的用法
前端·css·css3·html5·clip-path·css剪辑·css剪切路径
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07组基轨迹建模 GBTM的介绍与实现（Stata 或 R）08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10RAG 实践- Ollama+RagFlow 部署本地知识库