饼图中部内容自定义，点击图例修改中间内容
刀刀
0字
0分钟
2026/8/16
Echart 饼图中间内容自定义
Echart 效果
Echart 饼图中间内容允许自定义，效果：
Echart 实现
实现该功能，需要在饼图的 series 数组对象的 label 属性中设置一个 normal 属性，其中：
formatter设置要显示的文本，字符串的形式，格式如下：js'{xxx|}' + 变量1 + '} {yyy|}' + 变量2 + '次}'其中
xxx与yyy与他们后面的变量分别一一对应，后续通过它们给文本设置样式。rich原意是富文本，这里用于给自定义内容设置样式，格式如下：jsrich: { xxx: { fontSize: 14, color: 'red' }, yyy: { fontWeight: 600 } }
代码：
js
option = {
// ...
series: [
{
name: '结构物管理一张图',
type: 'pie',
radius: ['80%', '90%'],
center: ['20%', '50%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'right',
normal: {
show: true,
position: 'center',
color: 'red',
formatter: '{total|' + 1 + '次}' + '{title|告警}',
rich: {
total: {
fontSize: 18,
fontFamily: 'PingFang SC',
color: 'rgb(254, 201, 49)',
fontWeight: 400,
letterSpacing: 1.5,
lineHeight: 20,
},
title: {
fontFamily: 'PingFang SC',
fontSize: 14,
color: 'rgb(0, 255, 255)',
lineHeight: 30,
fontWeight: 400,
letterSpacing: 1.17,
},
},
},
},
emphasis: {
label: {
show: true,
fontSize: 20,
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: [
{
name: 'a',
point: 41.67,
value: 5,
},
{
name: 'b',
point: 22.67,
value: 3,
},
{
name: 'c',
point: 41.67,
value: 4,
},
],
},
],
}Echart 总结
在 formatter 里写内容，rich 里面写你需要的样式。
Echart 点击图例修改中间内容
Echart 需求展示
测试在复测项目时发现饼图点击图例后中间内容并没有发生相应的改变，测试想要实现下方效果：
查看 ECharts 官方文档，发现他有一个方法 legendselectchanged，文档Documentation - Apache EChartss 。该方法在点击切换图例的选中状态时会触发。
Echart 事件绑定
为渲染图例的 DOM 元素绑定事件，代码
vue
<template>
<div ref="diseaseChartRef" class="disease-chart"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
setup(props, { emit }) {
const myChart = ref(null)
const diseaseChartRef = ref(null)
const init = () => {
if (!myChart.value) return
myChart.value.setOption(props.option)
}
onMounted(() => {
myChart.value = echarts.init(diseaseChartRef.value)
myChart.value.on('legendselectchanged', function (e) {
emit('legendselectchanged', e)
})
init()
})
watch(
() => props.option,
() => {
init()
},
{ deep: true, immediate: true },
)
return {
diseaseChartRef,
}
},
}
</script>此时事件绑定完成
Echart 逻辑修改
查看其打印，打印结果如下：
拿到数据后就可以在自定义饼图中间内容的自定义函数内修改内容。代码：
js
const initFormatter = () => {
const obj = legendList.value.find((item) => item.chose)
const num = obj ? obj.value : 0
const name = obj ? obj.name : '高'
labelFormatter.value = '{total|' + num + '%}' + '\n' + '{title|' + name + '}'
}
const legendselectchangedFn = (e) => {
legendList.value = legendList.value.map((item) => {
return {
...item,
chose: e.selected[item.name],
}
})
initFormatter()
setOption.value.series[0].label.normal.formatter = labelFormatter.value
}逻辑：渲染第一项选中的数据，如有高、较高、中、较低、低五条数据，点击中和低后，第一项选中的数据是高，则中间内容继续渲染高。
Echart 总结
为组件绑定 legendselectchanged ，切换图例就能触发。
贡献者
duyidao
v_duyilin 刀刀