需求： 希望在折线图均价分析中，添加一个由最小值和最大值包裹起来的颜色区域
实现效果图：
实现思路：
1，用series配置项中属性stack对数据进行累加，即将最大值分为：最小值+（最大值-最小值）
数据配置中，最大值取的是：（最大值-最小值）
2，对最大值的折线绘制面积图，由于采用累加属性，故面积图只覆盖最小值以上部分
注意：因为用了累加属性，所以不能直接用最大值，而是要将最大值处理后再用（即减去最小值）
3，由于最大值做了处理，tooltips中显示数据需要再次处理，将减去部分重新加回。
上代码：
一，series处配置
//chart图配置
series: [
{
name: '均价',
type: 'line',
lineStyle: {//定制主线颜色
color:'rgb(120, 120,245) '
},
smooth: true,
symbol: 'none',
data: dayBeforeData.value,
},
{
name: '最低价',
data: minPowers.value,
smooth: true,
symbol: 'none',
type: 'line',
lineStyle: {//定制辅线颜色，尽量同色系弱化
color:'rgba(120, 120,245, 0.06) '
},
stack: 'lb',
areaStyle: {
color: '#fff',
origin: 'start',
shadowColor: '#F3F3F3',
opacity: 0.1,
shadowOffsetX: 1,
},
},
{
name: '最高价',
data: maxPowers.value,
smooth: true,
symbol: 'none',
type: 'line',
lineStyle: {//定制辅线颜色，尽量同色系弱化
color:'rgba(120, 120,245, 0.06)'
},
//数据累加
stack: 'lb',
areaStyle: {
color: 'rgb(120, 120,245)',
origin: 'start',
opacity: 0.2,
},
},
]
二，tooitips中配置
通过formatter配置项，对tooltips中的显示做定制化配置：
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
formatter: function (params, ticket, callback) {
let str = '';
str += `<div>${params[0].name}</div>`;
for (let i = 0; i < params.length; i += 1) {
if (params[i].seriesName == '最高价') {
str += ` <span>${params[i].seriesName}</span> : <span>${
params[i].data ? Math.round((params[i].data+ params[i-1].data)* 1000) / 1000 : '0'
}</span></br>`;
}}else{
str += `${params[i].marker} <span>${params[i].seriesName}</span> : <span>${
params[i].data ? Math.round(params[i].data * 1000) / 1000 : '0'
} </span></br>`;
}
}
return str;
},
},
以上，完成需求，记录思路，如果不当，欢迎指正~~
