echarts 折线图用数组对象
时间: 2023-08-15 19:16:57 浏览: 61
可以使用数组对象来绘制 ECharts 折线图。具体实现方法如下:
首先,定义一个包含多个对象的数组,每个对象分别表示一条折线的数据。例如:
```javascript
var data = [
{
name: '折线1',
type: 'line',
data: [10, 20, 30, 40, 50]
},
{
name: '折线2',
type: 'line',
data: [20, 30, 40, 50, 60]
}
];
```
其中,每个对象包含三个属性:`name` 表示折线的名称,`type` 表示折线的类型,这里为线性折线;`data` 表示折线的数据,这里使用一个包含多个数字的数组表示。
接下来,定义 ECharts 实例,并设置折线图的配置项。例如:
```javascript
var myChart = echarts.init(document.getElementById('myChart'));
var option = {
title: {
text: '折线图示例'
},
tooltip: {},
legend: {
data: ['折线1', '折线2']
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五']
},
yAxis: {},
series: data
};
myChart.setOption(option);
```
其中,`series` 属性的值为前面定义的包含多个对象的数组,这里直接将其作为配置项的属性值即可。
最后,将 ECharts 实例的配置项应用到图表中,即可生成包含多个折线的折线图。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)