Echarts折线图之区域面积图

今天写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",
	}，
]
上面的代码会实现上图的样式，但是你会发现，图中的最大值已经发生了变化，和你传入的值不一样，图中的最大值变成了最小值加最大值，所以你需要做一个处理，给最大值赋值之前，用获取的最大值减去最小值付给最大值。
```javascript
	let 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代码中最大值使用data3
	series:[
	{
		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然后把他俩相加，给你的最大值赋值。