echarts遍历区域折线图，单线和多线

在这里插入图片描述

// 单线折线图drawonelineCharts(){var echarts = require("echarts");var lineCharts = document.getElementsByClassName('lineChart'); // 对应地使用ByClassNamethis.linecolor=['#01FFD4','#1C70DD','#01FFD4','#1C70DD','#01FFD4','#1C70DD']for(var i = 0;i < lineCharts.length;i++ ){ // 通过for循环，在相同class的dom内绘制元素var myChart = echarts.init(lineCharts[i]);myChart.setOption({color:this.linecolor[i],// color:'#01FFD4',tooltip: {trigger: 'axis',axisPointer: {animation: false}},legend: {},grid: [{left: 40,right: 40,}, {left: 40,right: 40,}],xAxis: [{type: 'category',boundaryGap: false,axisLine: {onZero: true},data:this.linelist[i].xaxis,}, {gridIndex: 1}],yAxis: [{type: 'value',}, {gridIndex: 1}],series: [{name: this.linelist[i].chartTitle,type: 'line',smooth: true,symbol: 'circle',symbolSize: 9,showSymbol: false,markArea: {silent: true,label: {normal: {position: ['10%', '50%']}},data:[this.linelist[i].stackList]},data:this.linelist[i].yaxis}]},true)}},

在这里插入图片描述

// 双线折线图drawtwolineCharts(){var echarts = require("echarts");var lineCharts = document.getElementsByClassName('lineChart'); // 对应地使用ByClassNamethis.linecolor=['#01FFD4','#1C70DD','#01FFD4','#1C70DD','#01FFD4','#1C70DD']for(var i = 0;i < lineCharts.length;i++ ){ // 通过for循环，在相同class的dom内绘制元素var myChart = echarts.init(lineCharts[i]);myChart.setOption({color:this.linecolor[i],// color:'#01FFD4',tooltip: {trigger: 'axis',axisPointer: {animation: false}},legend: {},grid: [{left: 40,right: 40,}, {left: 40,right: 40,}],xAxis: [{type: 'category',boundaryGap: false,axisLine: {onZero: true},data:this.linelist[i].xaxis,}, {gridIndex: 1}],yAxis: [{type: 'value',}, {gridIndex: 1}],series: this.linelist[i].yaxis},true)}},

折线图样式

//  中和岗位折线图getneutralizeline(){neutralizeline(this.time).then((response) => {let linecolor=['#01FFD4','#1C70DD']for (let i = 0; i < response.data.length; i++) {let _this=thisresponse.data[i].yaxis.forEach((item,index) => {_this.$set(item, 'type', 'line')_this.$set(item, 'smooth', true)_this.$set(item, 'itemStyle', {color:linecolor[index]})})}this.linelist=response.datathis.$nextTick(()=> {this.drawtwolineCharts()})})},

折线图数据

{"msg": "操作成功","code": 200,"data": [{"chartTitle": "中和PH值","legend": null,"unit": null,"xaxis": ["08:00","09:00","10:00","02:00","03:00","04:00","05:00","06:00","07:00"],"yaxis": [{"name": "中和PH值","data": ["1","2","34","3","14.5","15.2","27","16.6","17.3"],"markArea": {"data": [[{"yAxis": 11},{"yAxis": 18}]]}}]},{"chartTitle": "中和糖度(12-14BX)","legend": null,"unit": null,"xaxis": ["08:00","09:00","10:00","23:00","00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00"],"yaxis": [{"name": "中和糖度(12-14BX)","data": ["11.7","12.4","13.1","13.8","14.5","5.4","34","11","21","12.4"],"markArea": {"data": [[{"yAxis": 12},{"yAxis": 16}]]}}]},{"chartTitle": "杀菌温度(A)","legend": null,"unit": null,"xaxis": ["08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","04:00","05:00","06:00","07:00"],"yaxis": [{"name": "杀菌温度(A)","data": ["15.9","16.6","17.3","34.4","4.7","5.4","6.1","23.3","40"],"markArea": {"data": [[{"yAxis": 5},{"yAxis": 8}]]}},{"name": "杀菌温度(B)","data": ["6.1","9","14","7","16","23","4.23","15.6","23.5","43.2","45.3","43.2","3.5"],"markArea": {"data": [[{"yAxis": 5},{"yAxis": 7}]]}}]},{"chartTitle": "均值压力(A)","legend": null,"unit": null,"xaxis": ["03:00","04:00","05:00","06:00","07:00"],"yaxis": [{"name": "均值压力(A)","data": ["13.8","35","15.2","23","8.9","24"],"markArea": {"data": [[{"yAxis": 11},{"yAxis": 15}]]}},{"name": "均值压力(B)","data": ["18","23","13.1","23","14.5","15.2","25","16.6","30"],"markArea": {"data": [[{"yAxis": 4},{"yAxis": 8}]]}}]},{"chartTitle": "高压压力(A)","legend": null,"unit": null,"xaxis": ["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00"],"yaxis": [{"name": "高压压力(A)","data": ["11.7","12.4","22","32","14.5","15.2","12","34","46","24"],"markArea": {"data": [[{"yAxis": 19},{"yAxis": 25}]]}},{"name": "高压压力(B)","data": ["13.8","14.5","15.2","17","34","17.3","29","16.6","17.3"],"markArea": {"data": [[{"yAxis": 19},{"yAxis": 23}]]}}]}]
}

{"msg": "操作成功","code": 200,"data": [{"chartTitle": "辅料6","legend": null,"unit": null,"stackList": [{"yAxis": 5},{"yAxis": 12}],"xaxis": ["08:00","09:40","12:00","15:00","18:00","21:00","23:00","02:00","05:40","07:00"],"yaxis": ["7","10","13","16","19","22","25","28","34","3"]},{"chartTitle": "辅料5","legend": null,"unit": null,"stackList": [{"yAxis": 5},{"yAxis": 19}],"xaxis": ["08:00","09:40","12:00","15:00","18:00","21:00","23:00","02:00","05:40","07:00"],"yaxis": ["7","10","13","16","19","22","25","28","34","3"]}]
}