echarts饼图百分比设置
时间: 2024-08-16 08:03:30 浏览: 142
ECharts是一款流行的JavaScript数据可视化库,创建饼图(pie chart)时,可以方便地设置每个扇区的百分比。要在ECharts饼图中显示百分比,你需要在配置项中设置`series.data`数组里的每个元素,包含两个部分:数值(表示大小)和名称(通常会显示百分比)。这是一个基本的例子:
```javascript
var option = {
series: [{
name: '各类占比',
type: 'pie', // 饼图类型
data: [
{ value: 335, name: 'A(33.5%)' },
{ value: 310, name: 'B(31.0%)' },
{ value: 234, name: 'C(23.4%)' },
{ value: 125, name: 'D(12.5%)' }
],
radius: ['40%', '70%'], // 设置饼图内外半径的比例
label: {
normal: {
formatter: function (params) {
return params.name + ' (' + (params.percent.toFixed(1)) + '%)';
} // 格式化百分比显示
}
}
}]
};
```
在这个例子中,`formatter`函数用于自定义标签内容,它将百分比直接显示在名称旁边。你可以根据需要调整百分比的格式。
阅读全文