echarts折线图多个折线
时间: 2025-06-11 07:21:26 浏览: 21
### 如何在 ECharts 中绘制带有多个系列或多条折线的折线图
要在 ECharts 中创建一个多系列或多条折线的折线图,可以通过定义 `series` 数组来实现。每个系列代表一条折线,并且可以单独配置其属性。以下是详细的说明:
#### 配置项详解
1. **数据源准备**
数据通常是一个二维数组或者对象列表的形式,其中每一列对应于不同的维度或类别。
2. **X 轴 (category)**
X 轴通常是分类轴,用于表示时间或其他离散变量。通过设置 `xAxis.type = 'category'` 来指定它为分类轴[^1]。
3. **Y 轴 (value)**
Y 轴一般用来展示数值型的数据,默认情况下会自动计算范围。如果需要自定义刻度,则可通过 `yAxis.min`, `yAxis.max` 等选项调整[^2]。
4. **Series 定义**
每个 series 对象描述了一种图表类型及其对应的参数。对于多条折线的情况,需提供至少两个以上的 series 元素。
#### 示例代码
下面给出一段完整的 JavaScript 实现代码,演示如何在一个画布上渲染两条独立但相互关联的折线图。
```javascript
// 初始化echart实例
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
// 设置option
var option;
option = {
title: {
text: '多条折线图示例'
},
tooltip: {
trigger: 'axis' // 工具提示框组件触发条件设为坐标轴触发
},
legend: { // 图例组件,控制每条曲线是否可见
data:['销量A', '销量B']
},
xAxis: { // 类目轴
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: { // 值域轴
type: 'value'
},
series: [
{
name:'销量A',
type:'line',
stack: 'Total', // 叠加名称, 如果不需要叠加则删除此字段
data:[120, 132, 101, 134, 90, 230, 210],
emphasis: { focus: 'series'} // 当前序列高亮效果
},
{
name:'销量B',
type:'line',
stack: 'Total', // 同样属于 Total 组合
data:[220, 182, 191, 234, 290, 330, 310],
emphasis: { focus: 'series'}
}
]
};
myChart.setOption(option);
```
上述脚本展示了基本结构,包括标题、工具提示、图例以及最重要的部分——`series` 的定义。这里设置了两套销售量作为不同天数的表现形式。
#### 特殊功能支持
- 若要让鼠标悬停时仅突出当前选中的那条折线信息,可利用 `emphasis.focus='self'` 或者更复杂的交互逻辑处理。
- 多 Y 轴场景下,可以在第二个 y 轴的基础上增加额外的一组 axis 和相应的 serie 映射关系。
阅读全文
相关推荐

















