echarts 饼图使用dataset
时间: 2023-08-27 08:07:23 浏览: 220
Echarts饼图之数据展示
5星 · 资源好评率100%
ECharts饼图可以使用dataset来设置数据。dataset可以使我们传给ECharts的数据字段名不局限于value,name。举个例子,以下代码是使用dataset来设置饼图的数据:
```javascript
dataset: {
source: [
['Search Engine', 1048],
['Direct', 735],
['Email', 580]
],
dimensions: ['name', 'value']
},
series: [
{
type: 'pie',
encode: {
itemName: 'name',
value: 'value'
}
}
]
```
在上述代码中,source是一个二维数组形式的数据,每个数组中包含了饼图的每个数据项的名称和数值。dimensions则是定义了数据项的字段名,分别为name和value。series中的type是设置图表类型为饼图,encode中的itemName定义了数据项的名称字段,value定义了数据项的数值字段。
这样设置后,ECharts就会根据dataset中的数据绘制出对应的饼图。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [使用echarts实现立体-柱状图](https://download.csdn.net/download/weixin_41620505/86247612)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [ECharts--dataset的使用](https://blog.csdn.net/qq_45163099/article/details/124552537)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
阅读全文