image.png
image.png
option配置项(测试用)
let option = {
legend: {
icon: 'circle',
left: 'center',
top: 'bottom',
padding: [0, 0, 30, 0],
selectedMode:false,
data: ['局外其他单位', '局外政府单位', '局内部门']
},
color: ['#87E7FF', '#87CBFF', '#879DFF'],
series: [
{
name: '数据按部门类型分布情况',
type: 'pie',
radius: ['50%', '70%'],
center:['50%','40%'],
avoidLabelOverlap: false,
label: {
show: false, // 设置为false，否则会重复
position: 'center',
formatter:'{n1|{d}%}' +'\n' +'{n2|{b}}', // 设置默认显示值
rich:{
n1:{
fontSize:30,
fontWeight:'bold',
color:'#1d3756',
padding:[5,0]
},
n2:{
fontSize:16,
color:'#1d3756'
}
}
},
emphasis: {
label: {
show: true, // 显示
fontSize: '25',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 335, name: '局外其他单位' },
{ value: 310, name: '局外政府单位' },
{ value: 234, name: '局内部门' }
]
}
]
};
设置高亮
//获取当前series中data长度，后面遍历取消高亮
let dataCount = this.options.series[0].data.length;
// 设置默认展示，seriesIndex：系列名，dataIndex：当前索引
this.echartsDom.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: 0,
});
// 鼠标进入高亮当前，取消其他高亮
this.echartsDom.on("mouseover", (e) => {
this.echartsDom.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
// 根据当前option中data的length，遍历取消其他高亮
for(let i =0;i<dataCount;i++){
if(i != e.dataIndex){
this.echartsDom.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: i,
});
}
}
});
//鼠标移出后显示之前默认高亮的那块，其他取消高亮
this.echartsDom.on("mouseout", (e) => {
this.echartsDom.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: 0,
});
if (e.dataIndex !== 0) {
this.echartsDom.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
} else {
this.echartsDom.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: 0,
});
}
});
