add second line in the history graph

src/views/VueUploader/index.vue

@@ -537,6 +537,26 @@ export default {
         this.$router.push({ name: "analyze" })
         this.listLoading = true
         sendAnalyzeRequest().then(response => {
+                  this.$router.push({ name: "plotTest", params: {
+          past: {
+            yAxisData: [100, 120, 161, 134, 105, 160, 165, 190,200,250],
+            xAxisData: ['2019-7-13', '2019-7-14', '2019-7-15', '2019-7-16', '2019-7-17', '2019-7-18', '2019-7-19', '2019-7-20','2019-7-21','2019-7-22'] ,
+            label: 'Past',
+            colorPicked: '#999997',
+            twoLines: true,
+            yAxisData2: [30, 140, 150, 200, 150, 170, 165, 170,150,230],
+            label2: 'Prediction',
+            colorPicked2: '#999997'
+          },
+          future: {
+            yAxisData: [260, 230, 270, 285, 295, 300, 310,330],
+            xAxisData: ['2019-8-13', '2019-8-14', '2019-8-15', '2019-8-16', '2019-8-17', '2019-8-18', '2019-8-19', '2019-8-20'] ,
+            label: 'Future',
+            colorPicked: '#519e19'
+          }
+          }})
+
+
         var token = response['token']
         var para = response['future']
         
@@ -548,7 +568,11 @@ export default {
             yAxisData: [100, 120, 161, 134, 105, 160, 165, 190,200,250],
             xAxisData: ['2019-7-13', '2019-7-14', '2019-7-15', '2019-7-16', '2019-7-17', '2019-7-18', '2019-7-19', '2019-7-20','2019-7-21','2019-7-22'] ,
             label: 'Past',
-            colorPicked: '#999997'
+            colorPicked: '#999997',
+            twoLines: true,
+            yAxisData2: [100, 140, 161, 134, 105, 160, 165, 190,200,250],
+            label2: 'Past2',
+            colorPicked2: '#999997'
           },
           future: {
             yAxisData: [260, 230, 270, 285, 295, 300, 310,330],

src/views/dashboard/admin/components/LineChart.vue

@@ -62,7 +62,85 @@ export default {
       this.chart = echarts.init(this.$el, 'macarons')
       this.setOptions(this.chartData)
     },
-    setOptions({ xAxisData, yAxisData, label, colorPicked} = {}) {
+    setOptions({ xAxisData, yAxisData, label, colorPicked, twoLines = false, label2 = "none", yAxisData2 = [], colorPicked2 = ""} = {}) {
+      if (twoLines) {
+      this.chart.setOption({
+        xAxis: {
+          data: xAxisData,
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          }
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          }
+        },
+        legend: {
+          data: [label, label2]
+        },
+        series: [{
+          name: label, itemStyle: {
+            normal: {
+              color: colorPicked,
+              lineStyle: {
+                color: colorPicked,
+                width: 3
+              }
+            }
+          },
+          smooth: true,
+          type: 'line',
+          data: yAxisData,
+          animationDuration: 2800,
+          animationEasing: 'cubicInOut'
+        },
+        {
+          name: label2, itemStyle: {
+            normal: {
+              color: colorPicked2,
+              lineStyle: {
+                color: colorPicked2,
+                width: 3
+              }
+            }
+          },
+          smooth: true,
+          type: 'line',
+          itemStyle: {
+            normal: {
+              color: '#3888fa',
+              lineStyle: {
+                color: '#3888fa',
+                width: 3
+              },
+              areaStyle: {
+                color: '#f3f8ff'
+              }
+            }
+          },
+          data: yAxisData2,
+          animationDuration: 2800,
+          animationEasing: 'quadraticOut'
+        }
+      ]
+      })
+      } else {
       this.chart.setOption({
         xAxis: {
           data: xAxisData,
@@ -109,28 +187,12 @@ export default {
           animationDuration: 2800,
           animationEasing: 'cubicInOut'
         }
-        // {
-        //   name: 'actual',
-        //   smooth: true,
-        //   type: 'line',
-        //   itemStyle: {
-        //     normal: {
-        //       color: '#3888fa',
-        //       lineStyle: {
-        //         color: '#3888fa',
-        //         width: 3
-        //       },
-        //       areaStyle: {
-        //         color: '#f3f8ff'
-        //       }
-        //     }
-        //   },
-        //   data: actualData,
-        //   animationDuration: 2800,
-        //   animationEasing: 'quadraticOut'
-        // }
       ]
       })
+
+      }
+
+
     }
   }
 }

src/views/plotTest/plotTest.vue

@@ -3,10 +3,10 @@
     <div class="dashboard-editor-container">
       <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
         <!-- <line-chart :chart-data="{xAxisData, yAxisData, label}" /> -->
-        <h2>History Plot</h2>
-        <line-chart :chart-data="past" />
         <h2>Prediction Plot</h2>
         <line-chart :chart-data="future" />
+        <h2>History Plot</h2>
+        <line-chart :chart-data="past" />
       </el-row>
     </div>
     <div>
@@ -49,18 +49,31 @@ export default {
     BoxCard
   },
   props: {
+    twoLines: true,
     past: {
       xAxisData: {
-        default: [120, 82, 91, 154, 162, 140, 145,230]
-      },
-      yAxisData: {
         default: ['a', 'x', 'c', 'd', 'e', 'f', 'g', 'h']
       },
+      yAxisData: {
+        default: [120, 82, 91, 154, 162, 140, 145,230]
+      },
       label: {
-        default: 'Future'
+        default: 'Past'
       },
       colorPicked: {
         default: '#999997'
+      },
+      twoLines: {
+        default: true
+      },
+      yAxisData2: {
+        default: [150, 96, 190, 150, 180, 160, 76,180]
+      },
+      label2: {
+        default: 'Prediction'
+      },
+      colorPicked2: {
+        default: '#999997'
       }
     },
     future: {