echarts饼图中间显示百分比
时间: 2023-10-31 21:57:44 浏览: 269
要在 ECharts 饼图中间显示百分比,您可以使用 ECharts 的富文本标签(rich)来实现。下面是一个示例代码:
```javascript
option = {
series: [
{
type: 'pie',
radius: ['50%', '70%'],
label: {
show: true,
formatter: '{b|{b}}\n{hr|}\n{d|{d}%}',
rich: {
b: {
fontSize: 16,
lineHeight: 24
},
hr: {
borderColor: '#aaa',
width: '100%',
borderWidth: 0.5,
height: 0
},
d: {
fontSize: 14,
lineHeight: 24,
color: '#999'
}
}
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}
]
};
```
在上面的代码中,我们在 label 配置中添加了 formatter 属性来指定标签的格式。`{b|{b}}` 表示显示饼图的名称,`{hr|}` 表示添加一个水平线,`{d|{d}%}` 表示显示百分比。通过 rich 属性中的样式设置,可以对每个部分进行自定义。
您可以根据您的需求修改上述示例代码中的数据和样式,以适应您的实际情况。
阅读全文