echarts中饼图如何传入数据
时间: 2023-11-11 18:04:56 浏览: 99
ECharts 饼图
5星 · 资源好评率100%
要在 Echarts 中创建一个饼图并传入数据,你需要先创建一个用于渲染图表的 DOM 容器,然后引入 Echarts 库,并初始化一个 Echarts 实例。接着,你需要通过设置饼图的 `series` 属性来传入数据。
以下是一个简单的示例代码,演示了如何传入数据到饼图中:
```javascript
// 初始化 Echarts 实例
var myChart = echarts.init(document.getElementById('main'));
// 配置饼图的参数
var option = {
title: {
text: '饼图示例'
},
series: [{
name: '数据名称',
type: 'pie',
data: [
{value: 335, name: '数据1'},
{value: 310, name: '数据2'},
{value: 234, name: '数据3'},
{value: 135, name: '数据4'},
{value: 1548, name: '数据5'}
]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
在上面的示例中,我们创建了一个 `series` 数组来存储我们的数据。每个数据点都是一个包含 `value` 和 `name` 属性的对象,分别代表数据点的数值和名称。在饼图中,每个数据点将表示为一个切片,其大小由 `value` 属性决定,其标签由 `name` 属性决定。
当你运行上面的代码时,你将在页面上看到一个简单的饼图,其中包含了我们传递的数据。
阅读全文