echart绘制关系图、拓扑图

今天有个画流程图的需求，在echarts官网上看到了一个简单关系图的案例， 链接如下：
https://echarts.apache.org/examples/zh/editor.html?c=graph-simple
这个是个简单的例子，节点是根据坐标来的，在现实的开发中不太容易实现，毕竟找坐标是很麻烦的，根据改进可以用force布局，实现了功能，贴下代码：

    initCharts(chartList, linkList) {
      let self = this
      let myChart = this.echarts.init(this.$refs.echarts)
      console.log(this.$refs.chart) // 绘制图表
      let option = {
        title: {
           text: 'echarts-title',
         },

        tooltip: {
          show: true,
          backgroundColor: '#FFF',
          borderColor: '#C3CBD6',
          borderWidth: 1,
          axisPointer: { lineStyle: { color: '#C3CBD6' } },
          padding: [0, 10],
          /*设置x轴左右固定，上下跟随。*/
          position: function (point, params, dom, rect, size) {
            return [0, point[1]]
          },
          formatter: function (params, ticket, callback) {
            return (
              '<span style="color: #657180; display:inline-block; margin-left: 8px; word-wrap: break-word;word-break:break-all;">' +
              params.data.telegram +
              '</span>'
            )
          },
        },

        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            // layout: 'none',
            layout: 'force', //图的布局，类型为力导图，'circular' 采用环形布局，见示例 Les Miserables
            legendHoverLink: true, //是否启用图例 hover(悬停) 时的联动高亮。
            hoverAnimation: true, //是否开启鼠标悬停节点的显示动画
            coordinateSystem: null, //坐标系可选
            xAxisIndex: 0, //x轴坐标 有多种坐标系轴坐标选项
            yAxisIndex: 0, //y轴坐标
            force: {
              //力引导图基本配置
              //initLayout: ,//力引导的初始化布局，默认使用xy轴的标点
              repulsion: 100, //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
              gravity: 0.02, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
              edgeLength: 160, //边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
              layoutAnimation: false,
              //因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
            },
            symbolSize: 50,
            roam: true,
            label: {
              show: true,
            },
            //             id: 0,
            // category: 0,
            // lineStyle: {
            //                   normal : {
            //         color : '#31354B',
            //         width : '1',
            //         type : 'solid', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
            //         curveness : 0, //线条的曲线程度，从0到1
            //         opacity : 1
            //         // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
            //     },
            //     emphasis : {//高亮状态

            //     }
            // },
            color: ['#66b1ff'],
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 20,
            },

            data: chartList, // 这是动态生成的数据 保证数据里面有id  后面指向用  name 节点内容  有这两个字段即可
            links: linkList,
            // links: [
            //                            {
            //     source: 7,
            //     target: 8,
            //     name: 'EREIGNIS',
            //                     label: {
            //       show: true,
            //       // formatter: '<span style="color: #657180; font-size: 11px">EREGNIS</span>'
            //       formatter: function (params) {
            //         //标签内容
            //         return params.data.name
            //       },
            //     },
            //   },
            //                            {
            //     source: 7,
            //     target: 9,
            //     name: 'BS_UMBUC',
            //   },
            //   // {
            //   //   source: 2,
            //   //   target: 4,
            //   //   name: 'file3 ---> file5',
            //   //   label: {
            //   //     show: true,
            //   //     formatter: function (params) {
            //   //       //标签内容
            //   //       return 'hhhhh嘿嘿嘿~~~~~~'
            //   //     },
            //   //   },
            //   //   lineStyle: {
            //   //     curveness: 0.2,
            //   //     normal: {
            //   //       color: '#66b1ff',
            //   //       width: '2',
            //   //       type: 'dotted', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
            //   //       curveness: 0, //线条的曲线程度，从0到1
            //   //       opacity: 1,
            //   //       // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
            //   //     },
            //   //   },
            //   // },
            //   // {
            //   //   label: {
            //   //     show: true,
            //   //     formatter: function (params) {
            //   //       //标签内容
            //   //       return '自定义内容和宽度'
            //   //     },
            //   //   },
            //   //   lineStyle: {
            //   //     width: 5,
            //   //     curveness: 0.2,
            //   //   },
            //   //   source: 2,
            //   //   target: 0,
            //   //   name: 'file3 ---> file1',
            //   // },
            //   {
            //     source: 8,
            //     target: 1,
            //     name: 'IPUMUB_R',
            //   },
            // ],
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0,
            },
          },
        ],
      }
      myChart.setOption(option)
      myChart.on('click', function (params) {
        if (params.data.name) {
          self.logShow = true
          setTimeout(() => {
            self.logLoading = true
          }, 60)
          //这里是给节点加的点击事件   这边加延时是因为这个echarts是渲染在弹框里 不然会显示不出来
        }
      })
    },

上面的代码还算清晰 至于vue怎么引入echart 可看我前几篇有记录 网上也很多
links的指向根据也不一定就根据id 根据name也是可以的 不过如果根据name 那name不能有重复 否则会报错 这个时候就得根据唯一id了 判断指向

不过项目需求是流程图 这个关系图还是不准确的 而且每次都是随机生成 所以还是用d3画流程图比较合适 查看下一篇 画流程图 嘿嘿嘿~~~~~~~~
今天疫情真是阔怕 增了6个 瑟瑟发抖 没事儿的小伙伴二可别来辽宁 吓人-_-…
喝点热水压压惊 希望明早上 不要增加了 还希望王者不要需要比自己还菜的队友 脑壳痛
我要上分！！！！！！！！