echarts饼图显示数值
时间: 2023-07-28 07:09:40 浏览: 186
要在 Echarts 饼图中显示数值,可以通过设置 `series` 中的 `label` 属性来实现。具体步骤如下:
1. 在 Echarts 中引入饼图相关的库文件。
```html
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
```
2. 创建一个具有指定宽度和高度的 DOM 容器。
```html
<div id="chart" style="width: 600px; height: 400px;"></div>
```
3. 使用 JavaScript 代码初始化饼图,并设置 `series` 中的 `label` 属性。
```javascript
// 初始化饼图
var chart = echarts.init(document.getElementById('chart'));
// 配置数据
var data = [
{ name: '类别1', value: 100 },
{ name: '类别2', value: 200 },
{ name: '类别3', value: 300 }
];
// 设置饼图配置项
var option = {
series: [
{
type: 'pie',
radius: '55%',
data: data,
label: {
show: true,
formatter: '{b}: {c}' // 显示名称和值
}
}
]
};
// 渲染饼图
chart.setOption(option);
```
在上述代码中,`data` 数组包含了饼图的数据,每个对象包含了类别的名称和对应的值。`label` 的 `formatter` 属性定义了数值的显示格式,`{b}` 表示类别名称,`{c}` 表示对应的值。
最后,使用 `chart.setOption(option)` 方法将配置项应用到饼图中,即可显示数值。
阅读全文