最近需要实现一个功能,实现包络功能,即折线图填充两条线之间颜色。一开始想的是使用 areaStyle ,一条线上色,一条线不上色。不过这样效果不佳。 最终方案为以下:
let maxline = []
let minline = []
for (let i = 0; i < this.timedata.time.length; i++) {
const time = this.timedata.time[i]
let values = [this.timedata.data[i]]
if (layerData && layerData.length > 0) {
layerData.forEach((layer) => {
layer.time.findIndex((t) => t === time) !== -1 && values.push(layer.data[i])
})
}
maxline.push([time, Math.max(...values)])
minline.push([time, Math.min(...values)])
}
let line = []
line = maxline.concat(minline.reverse()) // 重点
this.option.series.unshift({
name: '包络线',
type: 'line',
showSymbol: false,
data: line,
xAxisIndex: 0,
yAxisIndex: 0,
//smooth: true,
// lineStyle: { color: 'rgba(255,255,255,0.2)' },
itemStyle: {
color: '#DB925B',
},
areaStyle: {
color: '#DB925B',
opacity: 0.4,
},
})