echarts 饼图百分比数据
时间: 2025-05-05 07:16:57 浏览: 31
### 如何在 ECharts 饼图中显示百分比
为了在 ECharts 的饼图中显示百分比,`series` 中的 `label` 和 `formatter` 属性发挥了重要作用。通过自定义标签格式器函数,可以灵活地控制每个扇区上显示的具体内容,包括数值所占比例的形式[^1]。
下面是一个具体的实例来说明如何实现这一需求:
```javascript
option = {
series: [
{
type: 'pie',
radius: '50%', // 设置饼图半径大小
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
label: {
formatter: '{b} : {c} ({d}%)' // 自定义标签格式,其中{b}代表名称,{c}表示具体值,{d}%则为该部分占总体的比例%
}
}
]
};
```
此代码片段展示了怎样利用 `{b}`、`{c}` 及 `{d}%` 来分别获取项目名、实际数量以及对应的百分比率,并将其呈现在图表之上[^2]。
#### 关键点解释
- **type**: 定义图表类型,在这里指定为 `'pie'` 表明这是一个饼状图。
- **radius**: 控制饼图的整体尺寸,默认情况下可设为相对容器宽度的高度百分比字符串形式。
- **data**: 描述各个分组的数据集,每条记录由 `value`(值) 和 `name`(分类名称) 组成。
- **label.formatter**: 使用模板语法构建个性化提示信息;特别注意的是 `{d}%` 这一部分会自动计算并返回相应区域相对于整个圆盘面积的占比作为文字输出的一部分。
阅读全文
相关推荐


















