echarts中饼图：（pie）中设置默认选中高亮，

默认高亮效果 

 

下面是echarts的代码，话不多说直接上代码

这里是option的配置代码

let option = {
        grid: {
            top: '24',
            left: '3%',
            right: '0',
            bottom: '24',
        },
        tooltip: {
            show: true,
            trigger: 'item'
        },
        valueFormatter: value => value + '%',
        legend: {
            icon: 'circle',
            // top: 'center',
            bottom: 10,
            // left: 16,
            // orient: 'vertical',
            itemWidth: 12,
            itemHeight: 12,
            textStyle: {
                color: modetype.value == 2 ? 'white' : '#000000',
            }
        },
        series: [
            {
                type: 'pie',
                radius: ['60%', '90%'],
                avoidLabelOverlap: false,
                left: '0%',
                bottom: "20%",
                itemStyle: {},
                label: {
                    show: false,
                    color: modetype.value == 2 ? 'white' : '#000000',
                    position: 'center',
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 20,
                        fontWeight: 'bold',
                    }
                },
                labelLine: {
                    show: true
                },
                data: state.alloca_obj
            }
        ]
    }

 下面是初始化的代码

 let charstTrend = echarts.init(document.getElementById(`myalloca`));
    state.allocaOption && charstTrend.setOption(state.allocaOption)
    //监听窗口变化
    window.addEventListener("resize", debounce(() => {
        charstTrend.resize();
    }, 0))
    //state.maxindex是要高亮的data数据的索引，这个根据自己条件选出来
    //设置默认选中高亮部分
    charstTrend.dispatchAction({type: 'highlight',dataIndex: state.maxindex});
    // 鼠标移入
    charstTrend.on('mouseover',function(e){
        if(e.dataIndex != state.maxindex){
            // 取消默认高亮显示，恢复选中状态
            charstTrend.dispatchAction({type: 'downplay', dataIndex: state.maxindex  });
        }
    });
    // 鼠标移出
    charstTrend.on('mouseout',function(e){
        // 恢复默认高亮
        charstTrend.dispatchAction({type: 'highlight',dataIndex: state.maxindex});
    });

 

以上就是需要的代码了，希望能帮到你！！！早点下班

参考链接：ECHARTS 饼图 / 圆环图默认选中一项数据 || 饼图圆环图移入时数据显示value在中心 适用大屏_echarts饼图显示value-CSDN博客