1. 从“空心”到“有魂”为什么要在饼图中间加文字如果你用过ECharts画饼图大概率会注意到一个现象默认生成的饼图中间是空心的。这个设计本身没问题它清晰地展示了各个扇区的占比关系。但在很多实际的业务场景里一个孤零零的饼图摆在那里总让人觉得少了点什么。比如你做了一个年度销售额的占比分析图老板或同事第一眼看到时可能会下意识地问“所以总的销售额是多少”或者你展示的是一个项目进度的完成情况看图的人可能想知道“整体完成度是百分之多少”。这时候如果饼图的中心区域能直接、醒目地展示出这个核心的总览信息整个图表的“信息密度”和“可读性”就会瞬间提升一个档次。这个中心区域的文字就像是给饼图这个“躯壳”注入了“灵魂”让它从一个单纯的视觉分割工具变成了一个自带总结和强调功能的综合性数据展示单元。它解决了“看图需要二次计算或联想”的痛点让关键结论一目了然。在ECharts中实现这个效果主要依赖于两个核心配置项series.label和series.title。很多人刚开始接触时会混淆我刚开始也踩过坑其实它们分工明确用对了地方效果立竿见影。2. 核心武器库label与title的定位与选择在ECharts的饼图type: ‘pie’系列配置中与中心文字相关的配置主要藏在series对象里。你需要搞清楚两个“邻居”label和title。它们虽然都能放文字但职责和位置天差地别。series.label 这是“标签”它的主战场是在饼图的每个扇区上或旁边。你可以用series.label.formatter来定制每个扇区上显示的内容比如显示名称、数值、百分比。但它无法直接、方便地将一段文字固定在饼图的正中心。如果你强行通过调整label的位置position: ‘center’想把所有扇区的标签都堆到中间那会是一场灾难——所有标签会重叠在一起完全无法阅读。所以label不是我们实现中心文字的正确工具。series.title 这才是我们今天的“主角”。在ECharts的饼图上下文中title有一个特殊的用法它可以被配置为显示在饼图中心的一个标题块。注意这个series.title和图表最外层的title图表主标题是两回事。series.title是专属于这个饼图系列的一个“内部标题”组件它正是为了解决“在饼图中心区域显示文字”这个需求而设计的。简单来说选择非常明确要实现饼图中间的文字你必须使用series.title这个配置项。理解了这一点你就成功避开了第一个大坑。接下来我们就深入series.title的配置细节。3. 实战配置一步步打造你的中心标题让我们从一个最基础的饼图开始然后一步步添加中心文字。假设我们有一个展示编程语言使用占比的饼图数据。首先是基础的HTML结构和ECharts初始化!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleECharts饼图中心文字示例/title script srchttps://cdn.jsdelivr.net/npm/echarts5.5.1/dist/echarts.min.js/script style #chart-container { width: 600px; height: 400px; } /style /head body div idchart-container/div script // 初始化图表实例 const chartDom document.getElementById(chart-container); const myChart echarts.init(chartDom); // 准备配置项 const option { // 这里先留空我们一步步填充 }; // 使用配置项 myChart.setOption(option); /script /body /html现在我们来构建核心的option。第一步先定义饼图系列和数据暂时不加中心文字。const option { tooltip: { trigger: ‘item‘, formatter: ‘{a} br/{b}: {c} ({d}%)‘ }, legend: { orient: ‘vertical‘, left: ‘left‘ }, series: [ { name: ‘编程语言使用占比‘, type: ‘pie‘, radius: [‘40%‘, ‘70%‘], // 内外半径构成环形 data: [ { value: 1048, name: ‘JavaScript‘ }, { value: 735, name: ‘Python‘ }, { value: 580, name: ‘Java‘ }, { value: 484, name: ‘C‘ }, { value: 300, name: ‘Go‘ } ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: ‘rgba(0, 0, 0, 0.5)‘ } } } ] };运行这段代码你会得到一个标准的环形饼图。接下来就是注入“灵魂”的时刻——添加series.title。3.1 添加基础中心标题我们在series数组的饼图对象中加入title配置series: [ { name: ‘编程语言使用占比‘, type: ‘pie‘, radius: [‘40%‘, ‘70%‘], data: [ ... ], // 数据同上省略 // 核心配置中心标题 title: { text: ‘总样本数‘, subtext: ‘3147‘, left: ‘center‘, top: ‘center‘, textStyle: { fontSize: 18, fontWeight: ‘bold‘ }, subtextStyle: { fontSize: 24, color: ‘#5470c6‘, fontWeight: ‘bolder‘ } } } ]关键配置解析text: 主标题文字比如这里写的“总样本数”。subtext: 副标题文字通常用来放更重要的数据比如这里的总数值“3147”。left: ‘center‘, top: ‘center‘: 这两个属性将标题块定位在容器的中心。在饼图系列中这个“容器”就是饼图所占据的区域因此它会完美地居中于饼图的空心部分。textStyle和subtextStyle: 分别用于定义主标题和副标题的文本样式如字体大小、颜色、粗细等。现在刷新页面你应该能看到在饼图的环形中间清晰地显示着“总样本数”和“3147”这两行文字。图表的信息表达立刻完整了。3.2 动态计算并显示总值上面的例子中subtext: ‘3147‘是一个硬编码的值。在实际项目中数据往往是动态的我们需要自动计算所有value的总和。这需要用到formatter函数它非常强大可以返回一个字符串也支持富文本格式。修改title配置如下title: { text: ‘数据总量‘, // 使用formatter动态计算总和 subtext: ‘{total|‘ option.series[0].data.reduce((sum, item) sum item.value, 0) ‘}‘, left: ‘center‘, top: ‘center‘, textStyle: { fontSize: 16, color: ‘#666‘ }, subtextStyle: { // 注意当subtext使用formatter或富文本时这里的部分样式可能被覆盖 fontSize: 28, color: ‘#000‘ }, // 使用富文本样式提供更精细的控制 textStyle: { rich: { total: { fontSize: 28, fontWeight: ‘bolder‘, color: ‘#5470c6‘ } } } }这里我用了两种方式在subtext字符串中直接计算通过reduce函数求和。这种方式简单直接。使用富文本rich配置在subtext的字符串里用{total|...}的语法标记了一段文本然后在textStyle.rich中定义名为total的样式。这样做的好处是你可以对同一行文字内的不同部分应用完全不同的样式控制力极强。更常见的做法是将数据总和的计算提取到变量中使逻辑更清晰const seriesData [ { value: 1048, name: ‘JavaScript‘ }, { value: 735, name: ‘Python‘ }, { value: 580, name: ‘Java‘ }, { value: 484, name: ‘C‘ }, { value: 300, name: ‘Go‘ } ]; const totalValue seriesData.reduce((sum, item) sum item.value, 0); const option { series: [{ data: seriesData, title: { text: ‘数据总量‘, subtext: {val|${totalValue}}, left: ‘center‘, top: ‘center‘, textStyle: { fontSize: 16, color: ‘#666‘ }, textStyle: { rich: { val: { fontSize: 32, fontWeight: ‘bolder‘, color: ‘#ee6666‘ } } } } }] };3.3 进阶样式与位置微调默认的居中位置可能因为饼图半径、内外环间距等因素在视觉上不是绝对完美。series.title提供了丰富的定位和样式选项供我们微调。1. 位置偏移 (offsetCenter):left: ‘center‘和top: ‘center‘是基于饼图区域的原点(0,0)居中。offsetCenter可以在此基础上进行像素或百分比的微调。它是一个数组[水平偏移 垂直偏移]。title: { text: ‘核心指标‘, subtext: ‘86.5%‘, left: ‘center‘, top: ‘center‘, // 主标题向上移动10像素副标题向下移动15像素 offsetCenter: [0, ‘-10%‘], // 这个属性对text和subtext同时生效不这里有坑 textStyle: { fontSize: 14 }, subtextStyle: { fontSize: 22 } }注意这里有一个非常重要的细节根据ECharts官方文档和我的实测offsetCenter属性是作用于整个title文本块的而不是分别控制text和subtext。如果你想让主标题和副标题有垂直方向上的错落感正确的方法不是用offsetCenter而是使用itemGap属性或者使用富文本(rich)将两行文字合并成一个subtext来精确控制。2. 文本块间距 (itemGap):这个属性控制text主标题和subtext副标题两行文字之间的垂直间距。title: { text: ‘完成率‘, subtext: ‘86.5%‘, left: ‘center‘, top: ‘center‘, itemGap: 5, // 两行文字的间距默认是10 textStyle: { fontSize: 14, color: ‘#999‘ }, subtextStyle: { fontSize: 28, fontWeight: ‘bold‘, color: ‘#91cc75‘ } }3. 使用富文本(rich)实现复杂布局:当你需要更复杂的样式比如同一行里有不同颜色、大小的文字或者想添加图标通过Unicode或图片路径富文本是你的最佳选择。我们可以只用subtext利用rich来构建整个中心内容。title: { // text 可以留空或用于非常次要的提示 subtext: {title|项目进度}\n{value|${progress}%}\n{icon|✓}, left: ‘center‘, top: ‘center‘, textStyle: { rich: { title: { fontSize: 16, color: ‘#666‘, lineHeight: 26 }, value: { fontSize: 36, fontWeight: ‘bolder‘, color: ‘#73c0de‘, lineHeight: 40 }, icon: { fontSize: 20, color: ‘#91cc75‘, // 也可以使用图片 // backgroundColor: { // image: ‘./icon.png‘ // } } } } }在这个例子里我们通过\n换行和rich定义实现了三行居中文字每行都有独立的样式甚至最后一行可以是一个对勾图标。这种方式提供了最大的灵活性。4. 避坑指南与高级技巧在实际项目中仅仅把文字放上去还不够你可能会遇到一些让人头疼的问题。下面分享几个我踩过的坑和对应的解决方案。4.1 文字重叠与溢出自适应与响应式的关键饼图的环形区域radius大小是固定的但中心文字的内容长度可能变化。比如总值从“999”变成“10000”数字多了一位可能会超出环形区域的视觉边界或者当图表容器本身响应式缩小时文字会挤在一起。解决方案1动态计算字体大小一个比较实用的技巧是根据数值的位数或图表容器的大小动态调整subtext的字体大小。这可以在setOption前通过计算完成。function calculateFontSize(value, baseSize 24, minSize 14) { const digitCount String(Math.floor(value)).length; // 每增加2位数字体缩小一定比例 let size baseSize; if (digitCount 4) { size baseSize * Math.pow(0.85, digitCount - 4); } return Math.max(size, minSize); // 确保不小于最小字号 } const totalValue 31478; const dynamicFontSize calculateFontSize(totalValue); option.series[0].title { subtext: {val|${totalValue}}, textStyle: { rich: { val: { fontSize: dynamicFontSize, fontWeight: ‘bolder‘, color: ‘#5470c6‘ } } } };解决方案2利用ECharts的响应式APIECharts本身提供了resize事件和on方法监听容器大小变化。我们可以在回调函数中重新计算并更新title的样式。myChart.setOption(option); // 监听窗口大小变化ECharts实例会自动resize但字体不会自动变 window.addEventListener(‘resize‘, function() { myChart.resize(); // 先让图表自适应 // 获取当前容器的宽度 const containerWidth chartDom.offsetWidth; let fontSize 24; if (containerWidth 400) { fontSize 16; } else if (containerWidth 600) { fontSize 20; } // 动态更新配置 myChart.setOption({ series: [{ title: { subtextStyle: { fontSize: fontSize } } }] }); });4.2 与饼图扇区标签(label)的冲突当你同时设置了扇区标签series.label和中心标题series.title时如果饼图半径较小或者标签内容较长标签可能会侵入中心区域与标题发生重叠。解决方案调整饼图半径(radius)和标签位置(label.position)增大环形内径将radius的第一个值内半径调大例如从‘40%‘改为‘50%‘或‘55%‘为中心文字腾出更多空间。调整标签位置将label.position设置为‘outside‘标签在扇区外部或者使用‘inside‘但配合label.distanceToLabelLine等属性精细调整标签与扇区的距离。精简标签内容使用label.formatter缩短标签文本例如只显示百分比或缩写名称。series: [{ radius: [‘55%‘, ‘70%‘], // 增大内径给中心文字更多空间 label: { position: ‘outside‘, // 标签移到外部 formatter: ‘{b}: {d}%‘ // 只显示名称和百分比更简洁 }, title: { // ... 中心标题配置 } }]4.3 在Vue/React等框架中的动态更新在现代前端框架中数据是响应式的。当饼图的数据源发生变化时中心文字的总值也需要同步更新。核心思路将计算总值的逻辑封装成响应式函数或计算属性并在更新图表配置时调用。以Vue 3 Composition API为例template div refchartRef stylewidth: 600px; height: 400px;/div /template script setup import { ref, onMounted, onUnmounted, watch } from ‘vue‘; import * as echarts from ‘echarts‘; const chartRef ref(null); let myChart null; const chartData ref([ { value: 1048, name: ‘JavaScript‘ }, { value: 735, name: ‘Python‘ }, // ... 其他数据 ]); // 计算属性数据总和 const totalValue computed(() { return chartData.value.reduce((sum, item) sum item.value, 0); }); // 构建图表配置的函数 const getChartOption () { return { series: [{ type: ‘pie‘, data: chartData.value, radius: [‘40%‘, ‘70%‘], title: { text: ‘总计‘, subtext: {val|${totalValue.value}}, left: ‘center‘, top: ‘center‘, textStyle: { rich: { val: { fontSize: 28, fontWeight: ‘bolder‘, color: ‘#ee6666‘ } } } } }] }; }; onMounted(() { myChart echarts.init(chartRef.value); myChart.setOption(getChartOption()); }); // 监听数据变化更新图表 watch([chartData, totalValue], () { if (myChart) { // 使用setOption更新注意要设置notMerge为false或使用特定系列更新 myChart.setOption({ series: [{ data: chartData.value, title: { subtext: {val|${totalValue.value}} // 更新中心文字 } }] }); } }); onUnmounted(() { if (myChart) { myChart.dispose(); } }); /script在React中的思路类似使用useEffect依赖数据变化来更新图表配置。4.4 实现“点击图例中心总数联动变化”这是一个更交互性的需求。当用户点击图例隐藏/显示某个扇区时饼图的总数应该实时更新为当前可见扇区的总和。ECharts的图例点击事件会触发legendselectchanged。我们需要监听这个事件在回调函数中根据当前被选中的图例项过滤出可见的数据重新计算总和并更新中心标题。myChart.setOption(option); // 监听图例选择变化事件 myChart.on(‘legendselectchanged‘, function (params) { // params.selected 是一个对象key是图例名称value是true/false表示选中状态 const selected params.selected; // 获取原始数据 const allData option.series[0].data; // 计算当前可见数据的总和 let currentTotal 0; allData.forEach(item { if (selected[item.name] ! false) { // 未被取消选中的项包括undefined即初始状态 currentTotal item.value; } }); // 更新图表配置中的中心标题 myChart.setOption({ series: [{ title: { subtext: 当前总计\n{val|${currentTotal}}, textStyle: { rich: { val: { fontSize: 28, color: ‘#5470c6‘ } } } } }] }); });这个功能极大地增强了图表的交互性和数据感知能力让用户直观地看到局部数据对整体的影响。5. 超越基础创意化中心区域的应用掌握了基础的中心文字添加后我们可以玩出更多花样让饼图不仅仅是饼图。1. 中心区域放置迷你图表或图标虽然series.title主要支持文本和富文本可包含图片背景但我们可以利用这个特性在中心区域放置一个小的图标比如一个趋势箭头、一个状态指示灯来辅助表达数据的含义。title: { subtext: {icon|▲}{value|${growthRate}%}, left: ‘center‘, top: ‘center‘, textStyle: { rich: { icon: { fontSize: 20, color: growthRate 0 ? ‘#91cc75‘ : ‘#ee6666‘, // 根据增长率显示红绿 padding: [0, 5, 0, 0] // 图标右边距 }, value: { fontSize: 32, fontWeight: ‘bolder‘ } } } }2. 多层饼图与中心标题的配合在多层饼图radius为数组如[‘20%‘, ‘45%‘, ‘70%‘]中中心区域是共用的。你可以在这里放置一个全局性的标题概括整个多层饼图的主题例如“用户行为分析总览”。这能有效统一多层数据的视觉焦点。3. 结合graphic元素实现更复杂的装饰如果title的富文本也无法满足你的设计需求比如需要更复杂的图形组合你可以考虑使用ECharts的graphic组件。graphic可以让你在画布的任何位置绘制原生图形、图片、文本等。你可以用graphic在饼图中心绘制一个自定义的组合元素然后通过left: ‘center‘,top: ‘center‘来定位。这种方式更自由但配置也更复杂属于进阶用法。option.graphic { type: ‘group‘, left: ‘center‘, top: ‘center‘, children: [ { type: ‘circle‘, shape: { r: 30 }, style: { fill: ‘#f0f0f0‘, stroke: ‘#ccc‘ } }, { type: ‘text‘, style: { text: ‘核心指标‘, fontSize: 14, fill: ‘#666‘ }, left: ‘center‘, top: ‘-20%‘ }, { type: ‘text‘, style: { text: ‘86.5%‘, fontSize: 28, fontWeight: ‘bold‘, fill: ‘#5470c6‘ }, left: ‘center‘, top: ‘center‘ } ] };我个人在实际项目中90%的需求用series.title的富文本功能就足够了。它是在易用性和灵活性之间最好的平衡点。只有当你有非常特殊的、非标准的UI需求时才需要考虑动用graphic这个大杀器。记住在数据可视化中清晰和准确永远比炫技更重要。中心文字的目的是为了更高效地传达信息而不是制造视觉负担。
