echarts折线图 多个折线代码示例
时间: 2023-10-27 14:50:57 浏览: 33
以下是一个使用 ECharts 绘制多个折线图的示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 示例</title>
<!-- 引入 ECharts.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
</head>
<body>
<!-- 用于展示折线图的容器 -->
<div id="myChart" style="width: 600px; height: 400px;"></div>
<script>
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('myChart'));
// 指定图表的配置项和数据
var option = {
legend: {
data: ['折线1', '折线2']
},
xAxis: {
type: 'category',
data: ['一月', '二月', '三月', '四月', '五月', '六月']
},
yAxis: {
type: 'value'
},
series: [{
name: '折线1',
type: 'line',
data: [10, 20, 30, 40, 50, 60]
}, {
name: '折线2',
type: 'line',
data: [20, 30, 40, 50, 60, 70]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
该示例中,我们创建了一个 ECharts 实例,指定了图表的容器,在页面中展示了两条折线,并给它们分别命名为“折线1”和“折线2”;同时设置了 x 轴为类别型,y 轴为数值型,每个类别对应一对数据点。您可以根据需要修改数据,添加或删除折线,调整图表的布局等。