echarts动态创建多条曲线图
时间: 2023-06-28 13:03:56 浏览: 71
可以使用echarts的setOption方法动态创建多条曲线图。下面是一个简单的示例代码:
```javascript
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 定义数据
var data1 = [10, 20, 30, 40, 50];
var data2 = [20, 30, 40, 50, 60];
var data3 = [30, 40, 50, 60, 70];
// 定义图表配置项
var option = {
legend: {
data: ['曲线1', '曲线2', '曲线3']
},
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value'
},
series: []
};
// 添加曲线数据
option.series.push({
name: '曲线1',
type: 'line',
data: data1
});
option.series.push({
name: '曲线2',
type: 'line',
data: data2
});
option.series.push({
name: '曲线3',
type: 'line',
data: data3
});
// 设置图表配置项
myChart.setOption(option);
```
以上代码会创建一个包含三条曲线的图表,每条曲线都有自己的名称和数据。如果需要动态添加或删除曲线,只需要修改`option.series`数组即可。
阅读全文