vue+echarts实现力导向图节点(自定义样式)

效果预览

橘黄色节点为主节点自定样式，其余都是子节点

实现步骤：

附主要逻辑代码

组装节点数据

import userself from '../../../../static/img/user-self.png'
import userother from '../../../../static/img/user-other.png'

      var nodes = Object.values(this.nodesMap)
        .map(function(item) {
          var origin = item.origin
          var category = _this.owner.key == origin.key ? 0 : 1
          return {
            isNode: true,
            name: origin.userName + origin.tel,
            value: origin,
            showValue: origin.userName + ': ' + origin.tel,
            symbol:
              _this.owner.key === origin.userName + origin.tel
                ? 'image://' + userself
                : 'image://' + userother,
            symbolSize: 50,
            draggable: true,
            category: category
          }
        })
        .filter(function(item) {
          return ~linkKeys.indexOf(item.name)
        })
      this.current_chart_data = nodes
      this.current_chart_links = links
      this.draw_relation()

其中两张图片为自定义样式

绘制图片设置属性

let option = {
        tooltip: {
          show: false
        },
        //标题配置
        legend: {
          x: 'right',
          padding: [0, 100, 0, 0]
        },
        animation: false,
        series: [
          {
            data: this.current_chart_data,
            links: this.current_chart_links,
            categories: [
              {
                name: '发送',
                itemStyle: {
                  normal: {
                    color: '#658cff'
                  }
                }
              },
              {
                name: '收取',
                itemStyle: {
                  normal: {
                    color: '#fe732b'
                  }
                }
              }
            ],
            type: 'graph',
            layout: 'force',
            //控制节点样式，使用回调函数显示不同的样式
            symbol: (value, param) => value,
            //禁止用鼠标滚轮缩小放大效果
            roam: true,
            //设置边两边的箭头
            edgeSymbol: ['circle', 'arrow'],
            //设置边两边的的箭头大小
            edgeSymbolSize: [0, 8],
            // 连接线上的文字
            focusNodeAdjacency: true, //划过只显示对应关系
            edgeLabel: {
              normal: {
                show: true,
                //控制线条上面字的大小
                textStyle: {
                  fontSize: 10
                },
                formatter: '{c}'
              }
            },
            categories: [
              {
                name: '发送',
                itemStyle: {
                  normal: {
                    color: '#658cff'
                  }
                }
              },
              {
                name: '收取',
                itemStyle: {
                  normal: {
                    color: '#fe732b'
                  }
                }
              }
            ],
            lineStyle: {
              normal: {
                opacity: 0.9,
                width: 1,
                curveness: 0.08
              }
            },
            // 圆圈内的文字
            label: {
              normal: {
                show: true,
                //控制名字显示在外面
                position: 'bottom'
              }
            },
            force: {
              //控制关系图大小
              repulsion: 500,
              //控制关系图连线长度
              edgeLength: 300
            }
          }
        ]
      }

备注：

其中symbol节点数据使用了回调函数也是通过此回调函数实现自定义节点样式，原则上可以实现每一个节点样式都不一样。
传送门：

https://echarts.apache.org/zh/option.html#xAxis.axisLine.symbol

因为需求有可能是双向的所以设置连线有一点曲度，可以展示每一个方向的数据