使用 ECharts 的数据驱动方式
时间: 2023-11-23 16:20:27 浏览: 39
使用Charts 的数据驱动方式,可以将所有数据一次性传递给图表,然后使用 `dataset` 和 `series` 配置项来显示不同的柱状图。以下是一个简单的示例:
```javascript
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category'
},
yAxis: {
type: 'value'
},
dataset: {
// 数据
source: [
['星期一', 120, 132, 101, 134, 90, 230, 210],
['星期二', 220, 182, 191, 234, 290, 330, 310],
['星期三', 150, 232, 201, 154, 190, 330, 410],
['星期四', 320, 332, 301, 334, 390, 330, 320],
['星期五', 820, 932, 901, 934, 1290, 1330, 1320]
]
},
series: []
};
// 循环遍历数据,为每个柱状图添加配置项
for (var i = 0; i < option.dataset.source[0].length - 1; i++) {
option.series.push({
type: 'bar',
encode: {
// 指定数据来源
x: 0,
y: i + 1
},
// 颜色
itemStyle: {
color: 'rgb(' + (i * 30) + ', ' + (i * 50) + ', ' + (i * 80) + ')'
}
});
}
// 绘制图表
myChart.setOption(option);
```
在这个示例中,首先定义了初始的图表配置项 `option`,其中 `dataset` 用于指定所有的数据,`series` 用于存放要绘制的柱状图的配置项。
然后使用循环遍历的方式,为每个要绘制的柱状图添加配置项,并将其添加到 `option` 中的 `series` 数组中。这里使用了 `encode` 属性来指定每个柱状图的数据来源,这样可以将多个柱状图绘制在同一个图表中。
最后,调用 `myChart.setOption(option)` 方法绘制图表。
使用数据驱动方式,可以提高图表的性能,同时也可以方便地绘制多个柱状图。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)