ECharts 环形图与饼图进阶：自定义中间文字、数据块标签与图例布局
1. ECharts环形图与饼图的核心定制场景
数据可视化是现代应用开发中不可或缺的一环，而ECharts作为国内最流行的可视化库之一，其环形图和饼图在展示比例数据时尤为常用。但很多开发者在使用时往往止步于基础配置，忽略了ECharts提供的丰富定制能力。在实际项目中，我经常遇到需要调整中间文字样式、优化数据标签显示、重新设计图例布局等需求。这些看似细节的调整，往往能显著提升图表的专业度和用户体验。
环形图和饼图虽然结构相似，但适用场景有所不同。环形图因为中间留白，特别适合展示核心指标；而传统饼图则更适合强调各部分占比关系。无论哪种形式，都包含三个关键定制点：中间文字（title）、数据块标签（series.label）和图例（legend）。接下来我会结合具体案例，分享如何通过代码实现这些高级定制效果。
2. 环形图中间文字的深度定制
2.1 基础文字配置
中间文字是环形图的"画龙点睛"之笔，通过title配置项实现。一个常见的误区是只设置text而忽略subtext，实际上主副文本的组合能传达更多信息。比如在展示任务完成率时，可以用text显示"完成状态"，用subtext显示具体百分比：
title: { text: "正常兼职", subtext: "65%", textStyle: { fontSize: 12, color: "rgba(0,0,0,0.65)" }, subtextStyle: { fontSize: 20, color: "#000000", fontWeight: "bold" } }2.2 动态内容与精确定位
静态文字往往不能满足需求，我们可以结合数据动态计算内容。比如根据数据数组自动计算百分比：
const total = data.reduce((sum, item) => sum + item.value, 0); const option = { title: { subtext: `${((data[0].value / total) * 100).toFixed(0)}%` } }定位方面，x和y属性支持百分比和像素值两种形式。我建议先用百分比大致定位，再用像素值微调。比如想让文字完全居中：
title: { textAlign: "center", x: "center", y: "center" }3. 数据块标签的进阶设置
3.1 标签位置与格式化
series.label控制着每个数据块的标签显示。position属性支持'in'（内部）、'out'（外部）、'center'（中心）等值。在环形图中，我推荐使用'in'保持视觉整洁：
series: [{ label: { position: 'inner', formatter: '{b}: {d}%' } }]formatter支持字符串模板和回调函数两种形式。当需要复杂格式化时，回调函数更灵活：
formatter: function(params) { return `${params.name}\n${params.value}人\n占比${params.percent}%`; }3.2 视觉样式优化
标签的textStyle支持完整的CSS样式设置。在深色背景下要特别注意文字可读性：
label: { color: '#fff', textShadowColor: 'rgba(0,0,0,0.5)', textShadowBlur: 2 }对于密集的小数据块，可以设置minAngle过滤显示：
series: [{ minAngle: 5 // 小于5度的数据不显示标签 }]4. 图例布局的高级技巧
4.1 多维度布局控制
legend.orient控制整体方向（'horizontal'或'vertical'），而left/right/top/bottom控制具体位置。在移动端，我常使用响应式定位：
legend: { orient: window.innerWidth > 768 ? 'vertical' : 'horizontal', right: window.innerWidth > 768 ? '10%' : 'center', bottom: window.innerWidth > 768 ? undefined : '10%' }4.2 交互与样式增强
通过legend.selected可以控制初始选中状态：
legend: { selected: { '数据1': true, '数据2': false // 初始不显示 } }图标样式可以通过icon自定义，支持'circle'、'rect'、'path://'等多种形式：
legend: { icon: 'path://M0,0 L20,0 L10,20 Z', // 自定义三角形 itemWidth: 12, itemHeight: 12 }5. 饼图的特殊定制技巧
5.1 边框与间隔效果
通过itemStyle.border可以添加优雅的边框分隔：
series: [{ itemStyle: { borderWidth: 2, borderColor: '#fff' } }]要实现环形间隔效果，可以设置borderRadius：
itemStyle: { borderRadius: 10, borderWidth: 2 }5.2 多层次饼图
ECharts支持嵌套的多层饼图，通过多个series实现：
series: [ { radius: ['0%', '30%'], data: [...] }, { radius: ['40%', '70%'], data: [...] } ]6. 响应式设计与性能优化
6.1 自适应容器变化
通过监听resize事件实现图表自适应：
window.addEventListener('resize', function() { myChart.resize(); });在Vue等框架中，可以在组件生命周期中处理：
mounted() { window.addEventListener('resize', this.handleResize); }, beforeDestroy() { window.removeEventListener('resize', this.handleResize); }6.2 大数据量优化
当数据量超过100项时，建议：
- 设置animation: false关闭动画
- 使用series.avoidLabelOverlap防止标签重叠
- 考虑使用roseType南丁格尔图分散数据
series: [{ roseType: 'radius', avoidLabelOverlap: true, animation: false }]7. 常见问题与解决方案
在实际项目中，我遇到过几个典型问题。首先是图例过多导致的溢出，可以通过分页解决：
legend: { type: 'scroll', pageIconColor: '#2f4554', pageTextStyle: { color: '#333' } }其次是移动端点击区域太小的问题，可以扩大点击范围：
series: [{ selectedMode: 'single', selectedOffset: 10 }]最后是数据更新时的平滑过渡，使用setOption的notMerge参数：
myChart.setOption(newOption, { notMerge: true, lazyUpdate: true });