VUE-echart-关系图（自定义头像）

//图表
initEchart() {
let myChart = echarts.init(document.getElementById(“echartGraph”))
this.chartLink = [
{ value: “同事”, source: “1”, target: “2” },
{ value: “同事”, source: “1”, target: “3” },
{ value: “同事”, source: “1”, target: “4” },
{ value: “同学”, source: “1”, target: “5” },
{ value: “同学”, source: “1”, target: “6” },
{ value: “同学”, source: “1”, target: “7” },
{ value: “爸爸”, source: “1”, target: “8” },
]
this.chartData = [
{
name: “张1”,
symbolSize: 76,
id: “1”,
},
{
name: “张2”,
id: “2”,
},
{
name: “张3”,
id: “3”,
},
{
name: “张4”,
id: “4”,
},
{
name: “张5”,
id: “5”,
},
{
name: “张6”,
id: “6”,
},
{
name: “张7”,
id: “7”,
},
{
name: “张6”,
id: “8”,
},
]

  let option = {
    tooltip: {
      show: false,
    },
    series: [
      {
        edgeLabel: {
          normal: {
            formatter: "{c}",
            show: true,
          },
        },
        edgeSymbol: "circle",
        force: {
          repulsion: 2000,
        },
        layout: "force",
        roam: true,
        itemStyle: {
          normal: {
            color: "#6495ED",
          },
          //鼠标放上去有阴影效果
          emphasis: {
            shadowColor: "#3721db",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 40,
          },
        },
        label: {
          normal: {
            show: true,
            position: "bottom",
          },
        },
        //头像
        // symbol: `image://${imgSrc}`,
        symbol: function (value, param) {
          if (param.data.name == 1) {
            return `image://${manSrc}`
          } else {
            return `image://${womanSrc}`
          }
        },
        symbolSize: 86,
        type: "graph",
        links: this.chartLink,
        data: this.chartData,
      },
    ],
  }
myChart.setOption(option)
  myChart.on("click", function (params) {
    console.log(params.data) //获取点击的头像的数据信息
  })
},

没有关系版本

  let option = {
        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            roam: true,
            draggable: true,
            type: "graph",
            layout: "force",
            animation: false,
            itemStyle: {
              normal: {
                color: "#262626",
              },
            },
            label: {
              normal: {
                show: true,
                position: "bottom",
              },
            },
            symbol: function (value, param) {
              if (param.data.sex == "1") {
                return `image://man.png`
              } else if (param.data.sex == "2") {
                return `image://woman.png`
              } else {
                return `image://unknown.png`
              }
            },
            symbolSize: 38,
            data: this.chartNode,
            force: {
              repulsion: 600,
            },
            edges: this.chartLink,
          },
        ],
      }