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配置文档 <https://echarts.baidu.com/api.html#action>

热门工具换一换