Echarts中饼图默认高亮显示方法

Echarts中饼图默认高亮显示方法

想要饼图有默认选中的高亮效果，但是Echarts属性中的selected只能突出一块，不是想要的那种hover显示的那种放大高亮的效果，所以采用了以下的方法解决。

代码

html代码：

<div id="echarts_demo" style="width: 100%; height:100%;margin-left: 5%;"></div>

js代码

var abnormalFile = document.getElementById("echarts_demo");
var myChart = echarts.init(abnormalFile);
window.onresize = myChart.resize;
window.onresize = myChart.resize;

option = {
    backgroundColor: '#fff',
    tooltip: {
        trigger: 'item',
        formatter: "{a}：{b} {d}% ({c})"
    },
    legend: {
        icon: "circle",
        x: "center",
        y: "5%",
        data: [
            "异常信息",
            "弱口令",
            "蠕虫",
            "病毒",
        ],
        textStyle: {
            color: "#000"
        }
    },
    series: [{
        name: '',
        type: 'pie',
        zlevel: 0,
        silent: true,
        center: ['50%', '55%'],
        radius: ['0', '75%'],
        label: {
            normal: {
                show: false,
            }
        },
        data: [{
            value: 1000,
            name: '弱口令',
            itemStyle: {
                color: '#fbfcfd'
            }
        }, ]
    }, {
        color: ['#2623e5', '#5e77ff', '#879aff', '#f1f3ff'],
        name: '攻击类型',
        type: 'pie',
        zlevel: 99,
        // selectedMode: 'single',
        center: ['50%', '55%'],
        radius: [0, '65%'],
        hoverOffset: 45,
        label: {
            normal: {
                show: false,
            }
        },
        labelLine: {
            normal: {
                show: false
            }
        },
        data: [{
                value: 901,
                name: '异常信息'
            },
            {
                value: 249,
                name: '弱口令'
            },
            {
                value: 261,
                name: '蠕虫'
            },
            {
                value: 457,
                name: '病毒'
            }
        ]
    }, ]
};

myChart.setOption(option);
//设置默认选中高亮部分
myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 1,
    dataIndex: 1
});
myChart.on('mouseover', function(e) {
//当检测到鼠标悬停事件，取消默认选中高亮
    myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 1,
        dataIndex: 0
    });
//高亮显示悬停的那块
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 1,
        dataIndex: e.dataIndex
    });
});
//检测鼠标移出后显示之前默认高亮的那块
myChart.on('mouseout', function(e) {
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 1,
        dataIndex: 0
    });
});

结果

默认显示效果：
移入其他块悬停效果：

具体文档可查看echarts官网API配置文档

点击这里转入echarts官网API配置文档