- 技术背景：vue2、echarts
- 效果：默认展示第一条数据，legend 事件禁用，也就是说鼠标悬浮在 legend 不会触发任何效果，只能悬浮在图表上才会触发事件
-
默认展示
-
鼠标切换
-
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
// 设置配置项
this.setOptions(this.chartData)
// 默认展示第一条数据
this.chart.dispatchAction({ type: 'highlight', dataIndex: 0 });
this.chart.on('mouseover', (e) => {
if (e.dataIndex !== 0) {
// 当鼠标移入其他饼区，移除默认数据，展示对应饼区的数据
this.chart.dispatchAction({ type: 'downplay', dataIndex: 0 });
}
});
this.chart.on('mouseout', e => {
// 鼠标移出后，再设置默认数据
this.chart.dispatchAction({ type: 'highlight', dataIndex: 0 });
})
},
setOptions(data) {
this.chart.setOption({
// 提示框
tooltip: {
trigger: 'item',
formatter: function (e) {
return `${e.marker} ${e.name}：${e.value}%`
},
},
legend: {
orient: 'vertical', // 水平或垂直展示 legend
data: data.data.map(v => v.name),
right: "10px",
top: "center",
itemGap: 15, // legend 的间隔
align: "left", //这个是可以左右调整的
x: "right", //可设定图例在左、右、居中
icon: "circle",
padding: [20, 40, 20, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
textStyle: {
color: '#ffffff',
fontWeight: 400,
fontSize: 12,
},
selectedMode: false, // 关闭legend 图例选则
formatter: e => e,
},
series: [
{
type: 'pie',
radius: ['50%', '70%'], // 内圈、外圈
center: ["25%", "50%"], // 设置饼图左右位置（水平、垂直）
avoidLabelOverlap: false, // 是否启动标注压盖自动优化
label: {
show: false,
position: 'center',
},
labelLine: {
show: false
},
data: data.data,
emphasis: {
label: {
color: "#fff",
show: true,
fontSize: 14,
fontWeight: 400,
formatter: function (e) {
return `{n|${e.name}}\n\n{v|${e.value}}%`
},
rich: {
n: { fontSize: 12 },
v: { fontSize: 30 }
}
},
},
}
]
})
}
