可以通过以下步骤实现:
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<div id="chartContainer" style="width: 800px; height: 400px;"></div>
var chart = echarts.init(document.getElementById('chartContainer'));
var option = {
title: {
text: '多个折线图示例'
},
legend: {
data: ['折线图1', '折线图2', '折线图3']
},
xAxis: {
type: 'category',
data: ['数据1', '数据2', '数据3', '数据4', '数据5']
},
yAxis: {
type: 'value'
},
series: [
{
name: '折线图1',
type: 'line',
data: [10, 20, 30, 40, 50]
},
{
name: '折线图2',
type: 'line',
data: [20, 30, 40, 50, 60]
},
{
name: '折线图3',
type: 'line',
data: [30, 40, 50, 60, 70]
}
]
};
chart.setOption(option);
完成以上步骤后,就可以在指定的标签中显示多个折线图了。可以根据实际需求修改配置项,例如调整图表样式、添加更多的折线图等。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云