多个echarts折线图
时间: 2025-06-11 17:12:29 浏览: 19
### 如何在 ECharts 中实现多个折线图
要在 ECharts 中实现多个折线图,可以通过配置 `series` 属性来完成。每个折线图对应于 `series` 数组中的一个对象。通过调整不同的数据集和样式属性,可以轻松创建多条折线并展示它们之间的关系。
以下是详细的说明和示例代码:
#### 多个折线图的基础配置
为了绘制多个折线图,在 `series` 配置项中定义多个对象即可。每个对象代表一条折线的数据及其样式[^1]。每条折线需要指定其名称 (`name`) 和对应的数值数组 (`data`)。此外,还可以自定义颜色、线条宽度和其他视觉效果。
```javascript
// 初始化图表实例
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
// 图表选项
var option = {
title: { text: '多折线图示例' }, // 设置标题
tooltip: {}, // 提示框组件
legend: { data:['销量', '利润'] }, // 图例显示
xAxis: { type: 'category', data: ['一月','二月','三月','四月','五月','六月'] }, // X轴类别
yAxis: { type: 'value' }, // Y轴数值
series: [
{
name: '销量',
type: 'line', // 折线类型
data: [120, 200, 150, 80, 70, 110], // 销量数据
smooth: true, // 平滑曲线
lineStyle: { color: '#FF4D4F' } // 自定义线条颜色
},
{
name: '利润',
type: 'line',
data: [60, 90, 120, 30, 100, 80],
smooth: true,
lineStyle: { color: '#2F54EB' }
}
]
};
myChart.setOption(option); // 应用配置项
```
上述代码展示了如何在同一张图表上绘制两条折线——分别表示“销量”和“利润”。这两条折线具有各自的颜色和数据集合,并且启用了平滑模式以使图形更加美观。
#### 文件结构与引入方式
如果是在本地项目中使用 ECharts,则需确保已正确引入 ECharts 的 JavaScript 文件。通常情况下,可以在 HTML 文件头部通过 `<script>` 标签加载该文件。例如,假设我们将 `echarts.min.js` 放置于资源目录下的 `rawfile/` 路径中[^2],则可按如下方法操作:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts 多折线图</title>
<!-- 引入 ECharts -->
<script src="./resources/rawfile/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div> <!-- 容器 -->
<script>
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option = {...}; // 上述完整的option配置
myChart.setOption(option);
</script>
</body>
</html>
```
此部分描述了如何构建基本的 HTML 页面并将 ECharts 正确嵌入其中。
---
###
阅读全文
相关推荐
















