echart数组多个折线图
时间: 2025-06-28 08:17:25 浏览: 13
### 实现多个折线图的数组
在 ECharts 中,可以通过配置 `series` 数组来绘制多个折线图。每一个系列(即每一条折线)都是 `series` 数组的一个对象成员,该对象包含了这条折线的相关设置,比如名称 (`name`)、类型 (`type`) 和数据 (`data`)。
以下是具体实现方法:
#### 配置项说明
- **name**: 折线的名字,会在提示框和图例中显示。
- **type**: 图表类型,对于折线图而言应设为 `"line"`[^1]。
- **data**: 数据序列,是一个数值类型的数组,代表了各个时间点的数据值。
#### 示例代码
下面给出一段完整的 HTML+JavaScript 代码示例,展示如何利用 ECharts 库创建一个包含两条折线的图表:
```html
<!DOCTYPE html>
<html style="height: 100%">
<head>
<!-- 引入 echarts.js 文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="main" style="height: 100%"></div>
<script type="text/javascript">
// 初始化 chart 对象并指定容器 ID
var myChart = echarts.init(document.getElementById('main'));
option = {
title: {
text: '多条折线图'
},
tooltip : {
trigger: 'axis' // 坐标轴触发 Tooltip 显示策略
},
legend: { // 图例组件
data:['销量','利润'] // 图例内容
},
xAxis: { // X 轴定义
type: 'category',
boundaryGap: false,
data: ["周一","周二","周三","周四","周五","周六","周日"]
},
yAxis: { // Y 轴定义
type: 'value'
},
series : [
{
name:'销量', // 第一条折线名
type:'line', // 类型为 line 表明这是折线图
data:[120, 132, 101, 134, 90, 230, 210], // 销量对应的时间序列数据
markPoint: { // 可选:标记特殊点
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
},
{
name:'利润', // 第二条折线名
type:'line', // 类型同样为 line
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6], // 利润对应的时间序列数据
markLine: { // 可选:添加辅助线
data : [
{type : 'average', name: '平均值'}
]
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
```
此段代码展示了两个不同的指标——“销量”与“利润”,它们分别由两组不同的数据构成,并在同一张图表上以不同颜色区分呈现出来。此外还加入了简单的交互功能如鼠标悬停时的信息提示以及一些视觉增强效果,例如标注最高最低点或计算均值等操作。
阅读全文
相关推荐



















