echarts 饼图设置默认高亮/显示值，鼠标滑过切换数据显示不会覆盖之前显示，鼠标离开显示最初默认高亮/显示值

image.png

image.png

option配置项(测试用)

let option = {
        legend: {
            icon: 'circle',
            left: 'center',
            top: 'bottom',
            padding: [0, 0, 30, 0],
            selectedMode:false,
            data: ['局外其他单位', '局外政府单位', '局内部门']
        },
        color: ['#87E7FF', '#87CBFF', '#879DFF'],
        series: [
            {
                name: '数据按部门类型分布情况',
                type: 'pie',
                radius: ['50%', '70%'],
                center:['50%','40%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,  // 设置为false，否则会重复
                    position: 'center',
                    formatter:'{n1|{d}%}' +'\n' +'{n2|{b}}',  // 设置默认显示值
                    rich:{
                        n1:{
                            fontSize:30,
                            fontWeight:'bold',
                            color:'#1d3756',
                            padding:[5,0]
                        },
                        n2:{
                            fontSize:16,
                            color:'#1d3756'
                        }
                    }
                },
                emphasis: {
                    label: {
                        show: true,  // 显示
                        fontSize: '25',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 335, name: '局外其他单位' },
                    { value: 310, name: '局外政府单位' },
                    { value: 234, name: '局内部门' }
                ]
            }
        ]
    };

设置高亮

        //获取当前series中data长度，后面遍历取消高亮
        let dataCount = this.options.series[0].data.length;
        // 设置默认展示，seriesIndex：系列名，dataIndex：当前索引
        this.echartsDom.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: 0,
        });
        // 鼠标进入高亮当前，取消其他高亮
        this.echartsDom.on("mouseover", (e) => {
          this.echartsDom.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: e.dataIndex,
          });
          // 根据当前option中data的length，遍历取消其他高亮
          for(let i =0;i {
          this.echartsDom.dispatchAction({
              type: "highlight",
              seriesIndex: 0,
              dataIndex: 0,
            });
          if (e.dataIndex !== 0) {
            this.echartsDom.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
              dataIndex: e.dataIndex,
            });
          } else {
            this.echartsDom.dispatchAction({
              type: "highlight",
              seriesIndex: 0,
              dataIndex: 0,
            });
          }
        });

注意点：在legend中设置selectedMode:false，否则会有问题，当鼠标选中/取消legend，设置默认值会不显示