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配置文档