【vue2+echarts】关系图谱的使用（节点点击事件、根节点使用图片）

前言

需要实现一种类似思维导图、拓扑图的功能
主要的需求是：数据中心分布、共三层数据（不同的样式）、数据可以点击跳转、节点使用虚线连接

方案选型

1. jsmind–pass:思维导图，样式比较简单，属于比较标准的思维导图。
   可参考的文章在vue中使用jsmind组织架构或思维导图，初级的使用。
2. d3v6（vue+d3v6的一个实践Blog）–pass:

由于 d3data 更加灵活，需要编写较多的自定义代码，所以对于数据可视化需求比较特殊和复杂的场景来说，d3data 更适用。——from chatgpt

3. relation-group:专门的关系图谱库。
   上面的链接是demo,github链接
   不足：1、不能设置线条为虚线？
   优点：1、实现比较简单。有可视化的配置选项。
   例子：关系图谱relation-graph 使用心得:一个比较完整的思维导图的案例。
4. echarts功能更全，主要是可以直接设置线型为虚线
   最简单的关系图demo&实现
   基础的封装vue-echart组件：非常详细&有完整代码，100分！有vue2和vue3的案例。

节点点击事件

echarts关系图节点点击事件
重点就是获取图表，进行监听。

    this.myChart = echarts.init(document.getElementById('main'));
    this.myChart.on('click', function (param) {
    
    
      if (param.dataType == 'node') {
    
    
          console.log('点击了节点',param)
      } else {
    
    
          console.log('点击了边',param)
      }
    });

echarts力导向图区分鼠标点击事件与拖拽事件（angularjs） 这个是区分了点击和拖拽事件，用来扩展，目前没使用到。

根节点使用图片

methods: {
    
    
  setOption: function () {
    
    
    let option = {
    
    
      // ...
      series: [
        {
    
    
          type: "graph",
          // ...
          categories: this.categories,
          data: this.echartsData?.data.map((node) => {
    
    
            if (node.category === 0) {
    
    
              return {
    
    
                ...node,
                // 设置根节点的图片属性
                symbol: `image://${
      
      node.book_cover}`,
                symbolSize: [100, 100], // 设置图片大小为 100x100
                label: {
    
    
                  show: false, // 不显示标签
                },
              };
            } else {
    
    
              return node;
            }
          }),
          // ...
        },
      ],
    };
    // ...
    return option;
  },

参考：vue项目中如何使用echarts引入png图片或者图标(二者均为symbol标识) 这个项目中的效果挺好的。比较详细讲了image://的用法