记录一下echarts 饼图默认情况下高亮显示某一部分,实现效果如下:
高亮显示的代码如下:
const instance = echarts.init(this.chartDom); // 初始化echarts
instance.clear();
instance.setOption(option, true); // option自己设置哟
//设置默认选中高亮部分
instance.dispatchAction({
type: 'highlight',
seriesIndex: 1,
dataIndex,
});
instance.on('mouseover', function (e) {
//当检测到鼠标悬停事件,取消默认选中高亮
instance.dispatchAction({
type: 'downplay',
seriesIndex: 1,
});
//高亮显示悬停的那块
instance.dispatchAction({
type: 'highlight',
seriesIndex: 1,
dataIndex: e.dataIndex
});
});
//检测鼠标移出后显示之前默认高亮的那块
instance.on('mouseout', function (e) {
instance.dispatchAction({
type: 'downplay',
seriesIndex: 1,
});
instance.dispatchAction({
type: 'highlight',
seriesIndex: 1,
dataIndex,
});
});