echarts饼图鼠标移入高亮设置
通过鼠标移入配合dispatchAction设置itemStyle.color的颜色
// 饼图
let echart = echarts.init(document.getElementById(this.echartId.source));
echart.setOption({
series: [
{
type: 'pie',
data: [
{ value: 335, name: '教师', itemStyle: { color: '#204570' } },
{ value: 234, name: '学生', itemStyle: { color: '#204570' } },
{ value: 1548, name: '职工', itemStyle: { color: '#204570' } }
],
radius: ['30%', '50%'],
center: ['50%', '25%']
},
{
type: 'pie',
data: [
{ value: 335, name: '线上', itemStyle: { color: '#204570' } },
{ value: 234, name: '线下', itemStyle: { color: '#204570' } }
],
radius: ['30%', '50%'],
center: ['50%', '75%']
}
]
});
echart.dispatchAction({
type: 'highlight',
seriesIndex: 1,
dataIndex: 1
});
echart.on('mouseover', function(e) {
console.log(e);
echart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex:1
});
});
echart.on("mouseout", function(e) {
echart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex:1
});
});

浙公网安备 33010602011771号