echarts中饼图展示信息让其值及百分比都展示
时间: 2023-10-17 17:12:54 浏览: 70
Echarts饼图之数据展示
5星 · 资源好评率100%
您可以在ECharts的饼图配置中,设置tooltip的formatter属性来实现展示信息和百分比。具体方法如下:
```javascript
option = {
// 饼图的系列配置
series: [{
type: 'pie',
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
// 饼图的提示框配置
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)'
}
}]
};
```
在上面的示例中,tooltip的formatter属性设置为"{b}: {c} ({d}%) ",意思是将数据项的名称{name}、值{value}和百分比{percent}展示出来,用冒号分隔。其中,{b}表示数据项的名称,{c}表示数据项的值,{d}表示数据项的百分比(需要乘以100)。这样就可以实现饼图的值和百分比同时展示了。
阅读全文