echarts-饼状图默认选中高亮

1.首页需要设置legend

legend: {
          data: ["积极", "负面"],
          selectedMode: false,
          show: false
        }

let index = 0;
      var myCharts = this.$echarts.init(document.getElementById(this.id));
      var option = {
        title: {
          text: this.title,
          left: "center",
          bottom: "0%",
          textStyle: {
            color: "#fff"
          }
        },
        legend: {
          data: ["积极", "负面"],
          selectedMode: false,
          show: false
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} 
{b}: {c} ({d}%)"
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["50%", "80%"],
            center: ["50%", "40%"],
            avoidLabelOverlap: false,
            // selectedMode: "single",
            label: {
              normal: {
                show: false,
                position: "center",
                formatter: "{d}%",
                textStyle: {
                  color: "#fff"
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "16",
                  fontWeight: "bold"
                }
              }
            },
            itemStyle: {
              normal: {
                // color: "#c23531",
                color: params => {
                  //自定义颜色
                  var colorList = ["#60bce0", "#274170"];
                  return colorList[params.dataIndex];
                },
                borderWidth: 1,
                borderColor: "#fff"
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.pieData
          }
        ]
      };
      myCharts.setOption(option);
      myCharts.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0
      }); //设置默认选中高亮部分
      myCharts.on("mouseover", function(e) {
        if (e.dataIndex != index) {
          myCharts.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: index
          });
        }
      });
      myCharts.on("mouseout", function(e) {
        index = e.dataIndex;
        myCharts.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: e.dataIndex
        });
      });

View Code

 

转载于:https://www.cnblogs.com/huangmin1992/p/10760794.html