echarts 对比折线图
时间: 2023-09-30 12:11:39 浏览: 52
您可以使用ECharts来创建对比折线图。对比折线图可以用来展示不同时间段的数据对比情况。在ECharts中,您可以通过设置不同系列的数据来实现这个功能。以下是一个简单的示例代码,展示了未来一周气温的变化情况:
```javascript
option = {
title: {
text: '未来一周气温变化',
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['最高气温','最低气温']
},
toolbox: {
show: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name:'最高气温',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10],
},
{
name:'最低气温',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],
}
]
};
```
您可以根据自己的需求修改xAxis的data值和series的name和data值来展示不同时间段的数据对比。此外,您还可以通过设置其他的option属性来调整图表的样式和交互效果。希望这个示例能帮助到您。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [Echarts折线图不同X轴的对比功能,不同段不同颜色显示](https://blog.csdn.net/seveth_/article/details/47253777)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [ECharts--数据对比折线图](https://blog.csdn.net/weixin_43668013/article/details/102669591)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]