Merge pull request '折线图数据修改' (#20) from pc-master into portal

Reviewed-on: #20

src/assets/js/charts.js

@@ -4,49 +4,9 @@ export function realTimeLine(id,data) {
     var chartDom = document.getElementById(id);
     var myChart = echarts.init(chartDom);
     var Xdata = []
-    var data1=[]//目标水肥PH
+    var colorList1 = ['rgba(0, 187, 136, 1)', 'rgba(252, 125, 106, 1)', 'rgba(252, 223, 39, 1)', 'rgba(68, 214, 232, 1)',
-    var data2=[]//目标水肥EC
+        '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 data3=[]//平均值水肥PH
+    var colorList = [new echarts.graphic.LinearGradient(
-    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)=>{
-        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)
-      
-        
-    })
-    console.log(data1,data2);
-    var list = [
-        {
-            name: '目标水肥PH',
-            data: data1,
-            type: "line",
-            symbol: "circle",
-            smooth: true,
-            symbolSize: 5,
-            showSymbol: false,
-            lineStyle: {
-                normal: {
-                    width: 2,
-                },
-            },
-            areaStyle: {
-                normal: {
-                    color: new echarts.graphic.LinearGradient(
         0,
         0,
         0,
@@ -63,32 +23,7 @@ export function realTimeLine(id,data) {
         ],
         false
     ),
-                },
+    new echarts.graphic.LinearGradient(
-            },
-            itemStyle: {
-                normal: {
-                    color: "rgba(0, 187, 136, 1)",
-                    borderColor: "rgba(0, 187, 136, 1)",
-                    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,
@@ -104,33 +39,7 @@ export function realTimeLine(id,data) {
             },
         ],
         false
-                    ),
+    ), new echarts.graphic.LinearGradient(
-                },
-            },
-            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,
@@ -146,33 +55,7 @@ export function realTimeLine(id,data) {
             },
         ],
         false
-                    ),
+    ), new echarts.graphic.LinearGradient(
-                },
-            },
-            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,
@@ -188,33 +71,7 @@ export function realTimeLine(id,data) {
             },
         ],
         false
-                    ),
+    ), new echarts.graphic.LinearGradient(
-                },
-            },
-            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,
@@ -230,33 +87,7 @@ export function realTimeLine(id,data) {
             },
         ],
         false
-                    ),
+    ), new echarts.graphic.LinearGradient(
-                },
-            },
-            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,
@@ -272,33 +103,7 @@ export function realTimeLine(id,data) {
             },
         ],
         false
-                    ),
+    ), new echarts.graphic.LinearGradient(
-                },
-            },
-            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,
@@ -314,33 +119,7 @@ export function realTimeLine(id,data) {
             },
         ],
         false
-                    ),
+    ), new echarts.graphic.LinearGradient(
-                },
-            },
-            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,
@@ -356,33 +135,23 @@ export function realTimeLine(id,data) {
             },
         ],
         false
-                    ),
+    ), new echarts.graphic.LinearGradient(
-                },
+        0,
-            },
+        0,
-            itemStyle: {
+        0,
-                normal: {
+        1,
-                    color: "rgba(255, 192, 111, 1)",
+        [
-                    borderColor: "rgba(255, 192, 111, 1)",
+            {
-                    borderWidth: 1,
+                offset: 0,
-                },
+                color: "rgba(255, 156, 154, 0.50)",
-            },
             },
             {
-            name: '1#空气温度',
+                offset: 0.8,
-            data: data9,
+                color: "rgba(255, 156, 154, 0)",
-            type: "line",
-            symbol: "circle",
-            smooth: true,
-            symbolSize: 5,
-            showSymbol: false,
-            lineStyle: {
-                normal: {
-                    width: 2,
             },
-            },
+        ],
-            areaStyle: {
+        false
-                normal: {
+    ), new echarts.graphic.LinearGradient(
-                    color: new echarts.graphic.LinearGradient(
         0,
         0,
         0,
@@ -399,19 +168,30 @@ export function realTimeLine(id,data) {
         ],
         false
     ),
-                },
+
-            },
+    ]
-            itemStyle: {
+    var list = []
-                normal: {
+    var dataList = []
-                    color: "rgba(255, 156, 154, 1)",
+    data.forEach((el, index) => {
-                    borderColor: "rgba(255, 156, 154, 1)",
+        Xdata.push(el.time)
-                    borderWidth: 1,
+
-                },
+        el.value.forEach((el1, index1) => {
-            },
+            var containsIndex = dataList.findIndex(function(item) {
-        },
+                return item.name === el1.name;
-        {
+            });
-            name: '1#管道压力',
+            if(containsIndex==-1){
-            data: data10,
+                dataList.push({name:el1.name,value:[]})
+            }else{
+                dataList[containsIndex].value.push(el1.value)
+            }
+        })
+    
+
+    })
+    dataList.forEach((el,index)=>{
+    list.push({
+            name: el.name,
+            data: el.value,
             type: "line",
             symbol: "circle",
             smooth: true,
@@ -424,33 +204,18 @@ export function realTimeLine(id,data) {
             },
             areaStyle: {
                 normal: {
-                    color: new echarts.graphic.LinearGradient(
+                    color: colorList[index],
-                        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)",
+                    color: colorList1[index],
-                    borderColor: "rgba(255, 156, 154, 1)",
+                    borderColor: colorList1[index],
                     borderWidth: 1,
                 },
             },
-        }]
+        })
+    })
     var option = {
         tooltip: {
             trigger: "axis",