基于Vue+Echart的动态图绘制

基于Vue+Echart的动态图绘制

需求分析

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

后端接口返回的格式

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

接口返回

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

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

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

前端需要实现的效果

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

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

解决方法

关系图的setOption

如下

 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官网https://echarts.apache.org/zh/index.html 可以查看配置的相关解释，此处不过多解释

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

 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) => (
          {