前端实现echarts折线图堆叠（多条折线）

首先设置一个div来放这个折线图， v-if="forDialogVisible"是为了保证可以加载出Echarts图

<div  v-if="forDialogVisible">
  <div id="my_bar_chart" style="width: 100%;height: 300px;" 
 ></div>
</div>

折线图配置

echartsOption : ({
 tooltip: {
   trigger: 'axis'
 },
 legend: {
   data: []
 },
 grid: {
   left: '3%',
   right: '4%',
   bottom: '3%',
   containLabel: true
 },
 toolbox: {
   feature: {
     saveAsImage: {}
   }
 },
 xAxis: {
   type: 'category',
   boundaryGap: false,
   data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
 },
 yAxis: {
   type: 'value'
 },
 series: [
	// 初始化系列数组
	{ name:'p',type: 'line', data: []}, 
	{name:'upper',type: 'line', data: []}, 
	{ name:'lower',type: 'line', data: []} 
 ]
}),

接口的值回显到折线图上

let myChart= echarts.init(document.getElementById("my_bar_chart")) 
this.echartsOption.xAxis.data = res.data.time
console.log(res.data.p)

this.echartsOption.series[0].data = res.data.p
this.echartsOption.series[1].data = res.data.upper
this.echartsOption.series[2].data = res.data.lower