feat: 预测效果增加点位显示

src/views/business/comparison/components/echartConfig.js

@@ -1,18 +1,49 @@
-export const getEchartLineOption = ({ xAxisData, echartData }) => {
-  const series = echartData.map(({ name, val: data }) => ({
+export const getEchartLineOption = ({ xAxisData, echartData, specificData }) => {
+  console.log("echartData", echartData);
+  const colors = ["#5B8FF9", "#82c370", "#ffbf59"];
+  const series = echartData.map(({ name, val: data }, index) => ({
     name,
     data,
     type: "line",
     showSymbol: false,
+    lineStyle: {
+      width: 2,
+      color: colors[index],
+    },
     smooth: true,
+    xAxisIndex: 0,
   }));
 
+  series.push({
+    tooltip: {
+      show: false
+    },
+    type: "line",
+    symbolSize: 8,
+    itemStyle: {
+      color: "red",
+    },
+    itemStyle: {
+      color: colors[0],
+    },
+    xAxisIndex: 0,
+    data: specificData,
+  });
+
   const option = {
+    dataZoom: [{
+      bottom: 10,
+      height: 20,
+      show: true,
+      start: 0,
+      end: 100,
+      xAxisIndex: [0],
+    }],
     grid: {
       left: "5%",
       top: "2%",
       right: "12%",
-      bottom: "2%",
+      bottom: 30,
       containLabel: true,
     },
     legend: {
@@ -39,11 +70,13 @@ export const getEchartLineOption = ({ xAxisData, echartData }) => {
     tooltip: {
       trigger: "axis",
     },
-    xAxis: {
-      type: "category",
-      boundaryGap: false,
-      data: xAxisData,
-    },
+    xAxis: [
+      {
+        type: "category",
+        boundaryGap: false,
+        data: xAxisData,
+      },
+    ],
     yAxis: {
       type: "value",
     },

src/views/business/comparison/index.vue

@@ -244,17 +244,20 @@ export default {
       }
       
       const data = await getEchartData({ category: this.activeItem.value, timeBegin, timeEnd });
-      console.log(data);
+  
+      const reusltData = data.hs.data.splice(data.real.data.length - 1, data.hs.data.length - data.real.data.length);
+      const reusltTime = data.hs.time.splice(data.real.time.length - 1, data.hs.time.length - data.real.time.length);
+
       let xAxisData = [];
-      const realOneList = [];
-      const realTwoList = [];
-      const realThreeList = [];
-      const hsForecastOneList = [];
-      const hsForecastTwoList = [];
-      const hsForecastThreeList = [];
-      const yyForecastOneList = [];
-      const yyForecastTwoList = [];
-      const yyForecastThreeList = [];
+      // const realOneList = [];
+      // const realTwoList = [];
+      // const realThreeList = [];
+      // const hsForecastOneList = [];
+      // const hsForecastTwoList = [];
+      // const hsForecastThreeList = [];
+      // const yyForecastOneList = [];
+      // const yyForecastTwoList = [];
+      // const yyForecastThreeList = [];
 
       // data.map(item => {
       //   const {
@@ -275,10 +278,10 @@ export default {
       //   yyForecastThreeList.push(yyForecastThree);
       // })
     
-      xAxisData = data.yy.time
+      xAxisData = [...data.yy.time, ...reusltTime];
 
       const echartData = [
-        { name: 'TFT', val: data.hs.data },
+        { name: 'TFT', val: [...data.hs.data, ...reusltData] },
         { name: '真实值', val: data.real.data },
         { name: 'LSTM', val: data.yy.data },
         // { name: 'TFTpre_1', val: hsForecastOneList },
@@ -289,7 +292,9 @@ export default {
         // { name: 'LSTMpre_3', val: yyForecastThreeList }
       ]
 
-      const option = getEchartLineOption({ xAxisData, echartData });
+      const specificData = new Array(data.hs.data.length).fill(null).concat( reusltData );
+
+      const option = getEchartLineOption({ xAxisData, echartData, specificData:specificData });
 
       echart.setOption(option);