修改Echarts中关系图节点的hover颜色

 完整代码：

<template>
  <div class="ov-container">
    <div ref="myEcharts" id="myEcharts"></div>
  </div>
</template>

<script>
import * as myCharts from "echarts";

export default {
  name: "index",
  mounted() {
    this.initEcharts();
  },
  methods: {
    formatterHover(params) {
      console.log("params", params);
    },
    initEcharts() {
      let myChart = myCharts.init(document.getElementById("myEcharts"));
      let option = {
        title: {
          text: "Graph 简单示例"
        },
        tooltip: {//弹窗
          enterable: true,//鼠标是否可进入提示框浮层中
          formatter: this.formatterHover//修改鼠标悬停显示的内容
        },
        backgroundColor: new myCharts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0, color: "#060A15"  // 0%出的颜色
          }, {
            // 50% 处的颜色
            offset: 0.3, color: "#192953"
          },
          {
            // 100% 处的颜色
            offset: 1, color: "#060A15"
          }], false),

        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",

        series: [
          {
            type: "graph",
            layout: "force",   //因为节点的位置已经有了就不用在这里使用布局了
            focusNodeAdjacency: false,
            // legendHoverLink: true,
            roam: true,   //添加缩放和移动
            edgeSymbolSize: [4, 8],
            edgeSymbol: ["circle", "none"], // 边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头
            cursor: "pointer",
            force: {
              repulsion: [1000, 2000], //节点之间的斥力因子,支持设置成数组表达斥力的范围
              edgeLength: [600, 100],
              layoutAnimation: true,
              friction: 0.1 //节点的移动速度。取值范围 0 到 1。
              // edgeLength: [70, 90], //两个节点之间的距离，这个距离也会受 repulsion影响
            },
            label: {
              show: true, // 图形上的文本标签， 可用于说明图形的一些数据信息， 比如值， 名称等
              fontSize: 14,
              color: "#fff", //如果设置为 'inherit'，则为视觉映射得到的颜色，如系列色。
              width: 100
              // overflow: "break", //文字超出宽度是否截断或者换行。配置width时有效
            },
            itemStyle: {
              emphasis: {
                scale: true,
                focus: "adjacency"
              }
            },
            labelLayout: {
              moveOverlap: "shiftX", //在标签重叠的时候是否挪动标签位置以防止重叠。
              draggable: true //标签是否可以允许用户通过拖拽二次调整位置。
            },

            draggable: true,  //这里设置为false，不然拖拽鼠标和节点有偏移
            categories: [
              {
                name: "bgColorA",
                itemStyle: {
                  normal: {
                    color: "#4472C4"
                  }
                }
              }, {
                name: "bgHover",
                itemStyle: {
                  normal: {
                    color: "#cccccc"
                  }
                }
              }
            ],
            symbolSize: 100,
            // symbolSize: function (value, params) {  //改变节点大小
            //   var SizeList = _this.sizeArr;
            //   return setCircleRadius(SizeList[params.dataIndex])
            // },
            lineStyle: {
              color: "#4472C4",
              width: 5,
              opacity: 1,
              curveness: 0 //关系线的曲度，支持从 0 到 1 的值，值越大曲度越大。
            },
            data: [
              {
                "id": "1-4",
                "name": "角色",
                "category": "bgColorA",
                "draggable": true
              }, {
                "id": "1-1",
                "name": "Lias",
                "category": "bgColorA",  // 设置背景色 从categories数组中
                "draggable": true
              }
            ],
            links: [
              {
                source: "1-4",
                target: "1-1"
              }
            ]
          }
        ]
      };
      myChart.setOption(option);
      myChart.on("mouseover", (params) => {
        if (params.componentType === "series") {
          if (params.seriesType === "graph") {
            if (params.dataType === "edge") {
              // 点击到了 graph 的 edge（边）上。
            } else {  // hover到圆上
              let dataIndex = params.dataIndex;
              // 根据当前hover的节点的dataIndex，找到data[dataIndex], 并修改颜色
              option.series[0].data[dataIndex].category = "bgHover";
              myChart.setOption(option);
            }
          }
        }
      });

      // 鼠标离开事件
      myChart.on("mouseout", function(param) {
        let dataIndex2 = param.dataIndex;
        option.series[0].data[dataIndex2].category = "bgColorA";
        myChart.setOption(option);
      });

    }
  }
};
</script>

<style scoped lang="scss">
.ov-container {
  width: 80%;
  height: 500px;
  border: 1px solid #cccccc;

  #myEcharts {
    width: 100%;
    height: 100%;
  }
}

</style>