echarts饼图怎么显示value
时间: 2023-10-25 21:19:58 浏览: 49
要在 Echarts 饼图中显示 value 值,可以通过设置 `series` 中的 `label` 属性来实现。具体步骤如下:
1. 首先,确保已经引入了 Echarts 的库文件。
2. 创建一个 div 元素,用于显示饼图。
```html
<div id="chartContainer" style="width: 600px; height: 400px;"></div>
```
3. 在 JavaScript 中,使用 Echarts 的 API 来配置饼图选项并绘制饼图。
```javascript
// 初始化 Echarts 实例
var chart = echarts.init(document.getElementById('chartContainer'));
// 配置饼图选项
var option = {
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
],
label: {
show: true,
formatter: '{b} : {c}' // 显示 name 和 value
}
}
]
};
// 使用配置项绘制饼图
chart.setOption(option);
```
在上面的代码中,`formatter` 属性用于设置 label 的显示格式,`{b}` 表示 name,`{c}` 表示 value。通过设置 `{b} : {c}`,能够在饼图上显示每个扇区的 name 和 value 值。
最后,可以根据实际情况调整饼图的参数和样式,比如图例位置、饼图半径等。
相关推荐
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)