From ce72349d01db8a33b4741129a304fa5c395267d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AD=99=E8=90=8C?= <525441437@qq.com> Date: Wed, 18 Oct 2023 15:35:30 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8A=98=E7=BA=BF=E5=9B=BE=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/js/charts.js | 653 +++++++++++++--------------------------- 1 file changed, 209 insertions(+), 444 deletions(-) diff --git a/src/assets/js/charts.js b/src/assets/js/charts.js index 9440c68..8fb1a92 100644 --- a/src/assets/js/charts.js +++ b/src/assets/js/charts.js @@ -1,39 +1,197 @@ import * as echarts from "echarts"; -export function realTimeLine(id,data) { +export function realTimeLine(id, data) { var chartDom = document.getElementById(id); var myChart = echarts.init(chartDom); - var Xdata=[] - var data1=[]//目标水肥PH - var data2=[]//目标水肥EC - var data3=[]//平均值水肥PH - var data4=[]//平均值水肥EC - var data5=[]//1#水肥PH - var data6=[]//2#水肥PH - var data7=[]//1#水肥EC - var data8=[]//2#水肥EC - var data9=[]//1#空气温度 - var data10=[]//1#管道压力 - data.forEach((el,index)=>{ + var Xdata = [] + var colorList1 = ['rgba(0, 187, 136, 1)', 'rgba(252, 125, 106, 1)', 'rgba(252, 223, 39, 1)', 'rgba(68, 214, 232, 1)', + 'rgba(69, 224, 155, 1)', 'rgba(82, 188, 255, 1)', 'rgba(214, 162, 255, 1)', 'rgba(255, 192, 111, 1)', 'rgba(255, 156, 154, 1)', 'rgba(255, 156, 154, 1)'] + var colorList = [new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(0, 187, 136, 0.50)", + }, + { + offset: 0.8, + color: "rgba(0, 187, 136, 0)", + }, + ], + false + ), + new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(252, 125, 106, 0.50)", + }, + { + offset: 0.8, + color: "rgba(252, 125, 106, 0)", + }, + ], + false + ), new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(252, 223, 39, 0.50)", + }, + { + offset: 0.8, + color: "rgba(252, 223, 39, 0)", + }, + ], + false + ), new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(68, 214, 232, 0.50)", + }, + { + offset: 0.8, + color: "rgba(68, 214, 232, 0)", + }, + ], + false + ), new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(69, 224, 155, 0.50)", + }, + { + offset: 0.8, + color: "rgba(69, 224, 155, 0)", + }, + ], + false + ), new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(82, 188, 255, 0.50)", + }, + { + offset: 0.8, + color: "rgba(82, 188, 255, 0)", + }, + ], + false + ), new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(214, 162, 255, 0.50)", + }, + { + offset: 0.8, + color: "rgba(214, 162, 255, 0)", + }, + ], + false + ), new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(255, 192, 111, 0.50)", + }, + { + offset: 0.8, + color: "rgba(255, 192, 111, 0)", + }, + ], + false + ), new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(255, 156, 154, 0.50)", + }, + { + offset: 0.8, + color: "rgba(255, 156, 154, 0)", + }, + ], + false + ), new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(255, 156, 154, 0.50)", + }, + { + offset: 0.8, + color: "rgba(255, 156, 154, 0)", + }, + ], + false + ), + + ] + var list = [] + var dataList = [] + data.forEach((el, index) => { Xdata.push(el.time) - data1.push(el.value['目标水肥PH']?el.value['目标水肥PH']:0) - data2.push(el.value['目标水肥EC']?el.value['目标水肥EC']:0) - data3.push(el.value['1#平均水肥EC']?el.value['1#平均水肥EC']:0) - data4.push(el.value['1#平均水肥PH']?el.value['1#平均水肥PH']:0) - data5.push(el.value['1#水肥PH']?el.value['1#水肥PH']:0) - data6.push(el.value['2#水肥PH']?el.value['2#水肥PH']:0) - data7.push(el.value['1#水肥EC']?el.value['1#水肥EC']:0) - data8.push(el.value['2#水肥EC']?el.value['2#水肥EC']:0) - data10.push(el.value['1#管道压力']?el.value['1#管道压力']:0) - data9.push(el.value['1#空气温度']?el.value['1#空气温度']:0) - - + + el.value.forEach((el1, index1) => { + var containsIndex = dataList.findIndex(function(item) { + return item.name === el1.name; + }); + if(containsIndex==-1){ + dataList.push({name:el1.name,value:[]}) + }else{ + dataList[containsIndex].value.push(el1.value) + } + }) + + }) - console.log(data1,data2); - var list = [ - { - name: '目标水肥PH', - data: data1, + dataList.forEach((el,index)=>{ + list.push({ + name: el.name, + data: el.value, type: "line", symbol: "circle", smooth: true, @@ -46,411 +204,18 @@ export function realTimeLine(id,data) { }, areaStyle: { normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgba(0, 187, 136, 0.50)", - }, - { - offset: 0.8, - color: "rgba(0, 187, 136, 0)", - }, - ], - false - ), + color: colorList[index], }, }, itemStyle: { normal: { - color: "rgba(0, 187, 136, 1)", - borderColor: "rgba(0, 187, 136, 1)", + color: colorList1[index], + borderColor: colorList1[index], borderWidth: 1, }, }, - }, - { - name: '目标水肥EC', - data:data2, - type: "line", - symbol: "circle", - smooth: true, - symbolSize: 5, - showSymbol: false, - lineStyle: { - normal: { - width: 2, - }, - }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgba(252, 125, 106, 0.50)", - }, - { - offset: 0.8, - color: "rgba(252, 125, 106, 0)", - }, - ], - false - ), - }, - }, - itemStyle: { - normal: { - color: "rgba(252, 125, 106, 1)", - borderColor: "rgba(252, 125, 106, 1)", - borderWidth: 1, - }, - }, - }, - { - name: '平均水肥PH', - data: data3, - type: "line", - symbol: "circle", - smooth: true, - symbolSize: 5, - showSymbol: false, - lineStyle: { - normal: { - width: 2, - }, - }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgba(252, 223, 39, 0.50)", - }, - { - offset: 0.8, - color: "rgba(252, 223, 39, 0)", - }, - ], - false - ), - }, - }, - itemStyle: { - normal: { - color: "rgba(252, 223, 39, 1)", - borderColor: "rgba(252, 223, 39, 1)", - borderWidth: 1, - }, - }, - }, - { - name: '平均水肥EC', - data: data4, - type: "line", - symbol: "circle", - smooth: true, - symbolSize: 5, - showSymbol: false, - lineStyle: { - normal: { - width: 2, - }, - }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgba(68, 214, 232, 0.50)", - }, - { - offset: 0.8, - color: "rgba(68, 214, 232, 0)", - }, - ], - false - ), - }, - }, - itemStyle: { - normal: { - color: "rgba(68, 214, 232, 1)", - borderColor: "rgba(68, 214, 232, 1)", - borderWidth: 1, - }, - }, - }, - { - name: '1#水肥PH', - data: data5, - type: "line", - symbol: "circle", - smooth: true, - symbolSize: 5, - showSymbol: false, - lineStyle: { - normal: { - width: 2, - }, - }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgba(69, 224, 155, 0.50)", - }, - { - offset: 0.8, - color: "rgba(69, 224, 155, 0)", - }, - ], - false - ), - }, - }, - itemStyle: { - normal: { - color: "rgba(69, 224, 155, 1)", - borderColor: "rgba(69, 224, 155, 1)", - borderWidth: 1, - }, - }, - }, - { - name: '2#水肥PH', - data: data6, - type: "line", - symbol: "circle", - smooth: true, - symbolSize: 5, - showSymbol: false, - lineStyle: { - normal: { - width: 2, - }, - }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgba(82, 188, 255, 0.50)", - }, - { - offset: 0.8, - color: "rgba(82, 188, 255, 0)", - }, - ], - false - ), - }, - }, - itemStyle: { - normal: { - color: "rgba(82, 188, 255, 1)", - borderColor: "rgba(82, 188, 255, 1)", - borderWidth: 1, - }, - }, - }, - { - name: '1#水肥EC', - data: data7, - type: "line", - symbol: "circle", - smooth: true, - symbolSize: 5, - showSymbol: false, - lineStyle: { - normal: { - width: 2, - }, - }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgba(214, 162, 255, 0.50)", - }, - { - offset: 0.8, - color: "rgba(214, 162, 255, 0)", - }, - ], - false - ), - }, - }, - itemStyle: { - normal: { - color: "rgba(214, 162, 255, 1)", - borderColor: "rgba(214, 162, 255, 1)", - borderWidth: 1, - }, - }, - }, - { - name: '2#水肥EC', - data:data8, - type: "line", - symbol: "circle", - smooth: true, - symbolSize: 5, - showSymbol: false, - lineStyle: { - normal: { - width: 2, - }, - }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgba(255, 192, 111, 0.50)", - }, - { - offset: 0.8, - color: "rgba(255, 192, 111, 0)", - }, - ], - false - ), - }, - }, - itemStyle: { - normal: { - color: "rgba(255, 192, 111, 1)", - borderColor: "rgba(255, 192, 111, 1)", - borderWidth: 1, - }, - }, - }, - { - name: '1#空气温度', - data: data9, - type: "line", - symbol: "circle", - smooth: true, - symbolSize: 5, - showSymbol: false, - lineStyle: { - normal: { - width: 2, - }, - }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgba(255, 156, 154, 0.50)", - }, - { - offset: 0.8, - color: "rgba(255, 156, 154, 0)", - }, - ], - false - ), - }, - }, - itemStyle: { - normal: { - color: "rgba(255, 156, 154, 1)", - borderColor: "rgba(255, 156, 154, 1)", - borderWidth: 1, - }, - }, - }, - { - name: '1#管道压力', - data: data10, - type: "line", - symbol: "circle", - smooth: true, - symbolSize: 5, - showSymbol: false, - lineStyle: { - normal: { - width: 2, - }, - }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgba(255, 156, 154, 0.50)", - }, - { - offset: 0.8, - color: "rgba(255, 156, 154, 0)", - }, - ], - false - ), - }, - }, - itemStyle: { - normal: { - color: "rgba(255, 156, 154, 1)", - borderColor: "rgba(255, 156, 154, 1)", - borderWidth: 1, - }, - }, - }] + }) + }) var option = { tooltip: { trigger: "axis", @@ -473,25 +238,25 @@ export function realTimeLine(id,data) { }, dataZoom: [ { - show: true, - realtime: true, - start: 30, - end: 70, - xAxisIndex: [0, 1] + show: true, + realtime: true, + start: 30, + end: 70, + xAxisIndex: [0, 1] }, { - type: 'inside', - realtime: true, - start: 30, - end: 70, - xAxisIndex: [0, 1], - backgroundColor:'rgba(11, 28, 42, 0.4)', - fillerColor:'rgba(2, 148, 226, 1)', - textStyle:{ - color:'#fff' - } + type: 'inside', + realtime: true, + start: 30, + end: 70, + xAxisIndex: [0, 1], + backgroundColor: 'rgba(11, 28, 42, 0.4)', + fillerColor: 'rgba(2, 148, 226, 1)', + textStyle: { + color: '#fff' + } } - ], + ], grid: { left: "3%", right: "4%",