echarts曲线图循环创建多条曲线
时间: 2023-07-29 09:11:16 浏览: 195
要循环创建多条曲线,可以使用 echarts 提供的 `series` 配置项。具体来说,你需要在 `series` 中定义多个对象,每个对象对应一条曲线,然后使用循环语句生成这些对象即可。下面是一个示例代码:
```javascript
var myChart = echarts.init(document.getElementById('myChart'));
// 定义 x 轴数据
var xData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// 定义多条曲线的 y 轴数据
var yDataList = [
[3, 2, 5, 6, 8, 7, 9, 11, 12, 10],
[4, 6, 8, 7, 9, 12, 10, 11, 13, 14],
[1, 3, 5, 7, 9, 11, 13, 15, 17, 19]
];
// 定义多条曲线的颜色
var colorList = ['#c23531', '#2f4554', '#61a0a8'];
// 定义多条曲线的名称
var nameList = ['曲线1', '曲线2', '曲线3'];
// 定义 series 配置项
var series = [];
for (var i = 0; i < yDataList.length; i++) {
series.push({
name: nameList[i],
type: 'line',
data: yDataList[i],
smooth: true,
lineStyle: {
color: colorList[i]
}
});
}
// 定义图表配置项
var option = {
xAxis: {
type: 'category',
data: xData
},
yAxis: {
type: 'value'
},
series: series
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
在这个示例代码中,我们定义了一个 x 轴数据数组 `xData`,以及一个包含多个 y 轴数据数组的二维数组 `yDataList`。然后我们使用循环语句遍历 `yDataList`,为每个 y 轴数据数组生成一个对应的 `series` 对象,并将它们存储在 `series` 数组中。最后,我们将 `series` 数组作为 `option` 对象的一个属性传入 `setOption()` 方法,来生成图表。
阅读全文