ECharts 饼图显示数字+百分比：代码示例与开发注意事项

在 ECharts 中，要让饼图显示数字和百分比，可以通过设置 `formatter` 函数来实现。以下是一个示例代码： ```javascript // 引入 ECharts import * as echarts from 'echarts'; // 初始化 echarts 实例 const myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 const option = { series: [ { name: '访问来源', type: 'pie', radius: '50%', data: [ { value: 1048, name: '搜索引擎' }, { value: 735, name: '直接访问' }, { value: 580, name: '邮件营销' }, { value: 484, name: '联盟广告' }, { value: 300, name: '视频广告' } ], label: { // 设置标签的显示格式 formatter: function (params) { // params.value 是具体数值，params.percent 是百分比 return params.value + ' (' + params.percent + '%)'; } } } ] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); ``` 代码注释解释： 1. 引入 ECharts 库，用于创建和操作图表。 2. 通过 `echarts.init` 方法初始化一个 ECharts 实例，绑定到一个 DOM 元素上。 3. 定义 `option` 对象，设置图表的配置项。 4. 在 `series` 中定义一个饼图，指定 `type` 为 `pie`。 5. 在 `label` 中设置 `formatter` 函数，用于格式化标签显示内容，将数值和百分比组合显示。 6. 最后使用 `setOption` 方法将配置应用到图表实例上。 我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 确保 ECharts 库正确引入，版本兼容。 2. 注意 `formatter` 函数中使用的 `params` 对象的属性，根据实际情况调整显示格式。 3. 如果需要动态更新数据，要正确调用 `setOption` 方法，避免覆盖原有配置。 ######[AI写代码神器 | 533点数解答 | 2026-01-08 20:49:36]