首页echarts在饼图上显示文字

echarts在饼图上显示文字

时间: 2025-06-28 14:15:17 浏览: 9

### 显示 ECharts 饼图上的文字标签为了在 ECharts 饼图上显示文字标签，可以通过设置 `label` 和 `formatter` 属性来控制标签的内容和样式。具体来说，在配置项中的 `series` 下定义 `label` 对象，并利用 `formatter` 函数来自定义标签文本。以下是具体的配置方法： #### 基本配置示例 ```javascript var pieoption = { series: [{ type: 'pie', label: { // 设置标签属性 show: true, // 是否显示标签 position: 'inside', // 标签位置 inside/outside formatter: '{b}: {@value} ({d}% )' // 自定义标签格式化器 }, data:[ { value:335, name:'直接访问' }, { value:310, name:'邮件营销' } ] }] }; ``` 上述代码片段展示了如何启用并自定义饼图内的标签显示[^1]。其中 `{b}` 表示系列名称；`{@value}` 是数值本身；而 `{d}` 则代表占比百分比。对于更复杂的场景，比如调整字体大小或颜色等外观特性，则可以在 `label` 中进一步添加更多参数: #### 进阶配置实例 ```javascript var pieoption = { series: [{ type: 'pie', label: { show: true, fontSize: 16, // 字体大小 color: '#ffffff', // 文字颜色 fontWeight: 'bold', // 加粗 alignTo: 'edge', // 对齐方式 distanceToLabelLine: 10// 距离连线的距离 }, itemStyle:{ borderColor:'#fff' }, data:[...] }] }; ``` 此部分说明了除了基本的文字内容外，还可以对标签的视觉表现做出细致调节，以满足不同应用场景下的需求[^2]。

阅读全文