echarts创建多个折线图
时间: 2023-09-30 11:04:56 浏览: 76
echarts制作折线图
4星 · 用户满意度95%
要创建多个折线图,您可以使用 ECharts 的多个系列(series)来实现。每个系列代表一个折线图。
以下是一个使用 ECharts 创建多个折线图的示例代码:
```javascript
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('chart'));
// 定义数据
var data1 = [/* 数据1 */];
var data2 = [/* 数据2 */];
var data3 = [/* 数据3 */];
// 配置选项
var option = {
// 图表标题
title: {
text: '多折线图示例'
},
// 图表提示框
tooltip: {
trigger: 'axis'
},
// 图例
legend: {
data: ['折线1', '折线2', '折线3']
},
// x 轴
xAxis: {
type: 'category',
data: ['数据点1', '数据点2', '数据点3', '数据点4', '数据点5']
},
// y 轴
yAxis: {
type: 'value'
},
// 系列(折线图)
series: [
{
name: '折线1',
type: 'line', data: data1
},
{
name: '折线2',
type: 'line',
data: data2
},
{
name: '折线3',
type: 'line',
data: data3
}
]
};
// 使用配置项显示图表
myChart.setOption(option);
```
在上面的代码中,我们创建了一个 ECharts 实例并指定了一个具有唯一 ID 的 DOM 元素来容纳图表。然后,我们定义了三组数据(data1,data2,data3),每组数据代表一个折线图的数据。最后,我们配置了选项(title,tooltip,legend,xAxis,yAxis 和 series)来定义图表的样式和数据。通过调用 `setOption` 方法,我们将配置项应用到图表上并显示出来。
请确保在使用之前引入了 ECharts 库的脚本文件。希望这个示例能帮助到您!
阅读全文