背景
开发中有个需求:当天的数据和其他日期做对比,实现两条折线。
难点:两个不同日期的时间如何在同一个x轴上显示
实现效果图在这里插入图片描述
代码实现(只写核心代码和实现思路)
实现思路:写两个x轴,一个是对比日期的x轴线,一条是当天的时间x轴线。注意:两条的x轴时间要对应上,不然图形会很怪。
核心代码:(使用 xAxisIndex 对应不同的轴)
// 双条x轴
xAxis: [
{
type: 'time',
axisLine: {
show: false,
onZero: false
},
axisTick: {
show: true
},
axisLabel: {
show: true,
formatter: '{HH}:{mm}'
},
boundaryGap: false,
splitNumber: 9,
axisPointer: {
snap: false
},
min: Math.min(...this.nowTime),
max: Math.max(...this.nowTime)
},
{
type: 'time',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
axisPointer: {
snap: false
},
boundaryGap: false,
splitNumber: 9,
min: Math.min(...this.selectTime),
max: Math.max(...this.selectTime),
onZero: false
}
],
// 两条x轴对应的数据
series: [
{
name: '当前运行负荷',
type: 'line',
smooth: false,
data: this.nowData,
xAxisIndex: 0
},
{
name: '对比日负荷曲线',
type: 'line',
smooth: false,
data: this.selectData,
xAxisIndex: 1
}
]