echarts用dataset画饼图
时间: 2023-10-24 07:04:52 浏览: 55
以下是使用ECharts的dataset功能绘制饼图的示例代码:
HTML代码:
```html
<div id="pieChart" style="width: 600px; height: 400px;"></div>
```
JavaScript代码:
```javascript
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('pieChart'));
// 定义数据
var data = [
{name: 'Chrome', value: 56.33},
{name: 'Firefox', value: 13.12},
{name: 'Safari', value: 10.57},
{name: 'IE', value: 9.46},
{name: 'Edge', value: 3.68},
{name: 'Others', value: 6.84}
];
// 使用dataset设置数据
myChart.setOption({
dataset: {
source: data
},
series: [{
type: 'pie',
radius: '50%',
label: {
formatter: '{b}: {c} ({d}%)'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
},
encode: {
itemName: 'name',
value: 'value'
}
}]
});
```
在这里,我们首先定义了一个包含饼图数据的数组data。然后,我们使用ECharts的dataset功能将数据传递给图表。在series选项中,我们指定了饼图的类型为“pie”,设置了饼图的半径和标签格式,并使用encode选项将数据的name和value字段映射到图表的itemName和value属性中。最后,我们调用setOption方法将设置应用于图表。