今天写echarts发现有个比较坑的地方，我使用了areaStyle 这个属性，把折线图设置成了如图的样式
但是客户想要的是如下图在这个样式
这里要敲重点了，想实现这个样式必须使用series-》line-》stack这个属性，这个属性会叠加数据，代码块如下
series:[{type:"line",data:data1,（最小值）areaStyle:{coloe:#000（这个颜色放你的背景色）}，stack:"confidence-band",}，{type:"line",data:data2,（最大值）areaStyle:{coloe:#000（这个颜色放你想要的区域颜色）}，stack:"confidence-band",}，]上面的代码会实现上图的样式，但是你会发现，图中的最大值已经发生了变化，和你传入的值不一样，图中的最大值变成了最小值加最大值，所以你需要做一个处理，给最大值赋值之前，用获取的最大值减去最小值付给最大值。```javascriptlet data3 = []for(let i = 0 ; i<data1.length; i++){data3.push(data2[i]-data1[i])}
如果你发现这俩个他们无法相减，那就因为变量类型的问题，你可以强制转换成number
let data3 = []for(let i = 0 ; i<data1.length; i++){data3.push(Number(data2[i])-Number(data1[i]))}然后在eachart代码中最大值使用data3series:[{type:"line",data:data1,（最小值）areaStyle:{coloe:#000（这个颜色放你的背景色）}，stack:"confidence-band",}，{type:"line",data:data3,（处理过的最大值）areaStyle:{coloe:#000（这个颜色放你想要的区域颜色）}，stack:"confidence-band",}，]这俩个数据先后顺序不要放反了，第一个是最小值，第二个是最大值，不然你的图像会变样。
解决了这个问题后，又会出现新的问题，鼠标滑过折线图会有提示信息，你发现你的最大值变成了data3了，在这里你需要在formatter里面写一个function来改变他。简单来说就是获取到function（param）中的data1和data3然后把他俩相加，给你的最大值赋值。
如果觉得《Echarts折线图之区域面积图》对你有帮助，请点赞、收藏，并留下你的观点哦！
