当前位置：首页 > news >正文

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

news 2024/10/31 17:23:19

首先设置一个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