Vue echarts 设置初始化默认高亮

1.要注意的重点是需要在option的series中设置一个额外的图数据：标红代码就是用来高亮的series。

const option2 = {
  series: [
    {
      type: "pie",
      radius: "65%",
    },
    {
      type: "pie",
      radius: "65%",
      label: {},
      data: [
        { value: 1048, name: "网易", },
        { value: 735, name: "财经网" },
        { value: 580, name: "人民日报" },
        { value: 484, name: "搜狐" },
        { value: 300, name: "新浪" },
      ],
    },
  ],
};

2.Chart组件中代码：

<div ref="chart" />

import * as echarts from "echarts";

this.chart = echarts.init(this.$refs.chart);
this.chart.setOption(this.option);
　　　　// 设置默认选中高亮部分
      this.chartEl.dispatchAction({
        type: "highlight",
        seriesIndex: 1,
        dataIndex: 0,
      });
      this.chartEl.on("mouseover", (e) => {
        // 当检测到鼠标悬停事件，取消默认选中高亮
        if (e.dataIndex !== 0) {
          this.chartEl.dispatchAction({
            type: "downplay",
            seriesIndex: 1,
            dataIndex: 0,
          });
        }
      });
      // 检测鼠标移出后显示之前默认高亮的那块
      this.chartEl.on("mouseout", (e) => {
        this.chartEl.dispatchAction({
          type: "downplay",
          seriesIndex: 1,
          dataIndex: e.dataIndex,
        });
        this.chartEl.dispatchAction({
          type: "highlight",
          seriesIndex: 1,
          dataIndex: 0,
        });
      });

 

 

记录进步！！