fix: 数据看板 - 首页 - 总消耗&总回收折线图

project/src/components/HomeData.vue

@@ -364,7 +364,7 @@ export default {
           }))
           this.$nextTick(() => {
             this.trendEvent('custTrends') // 绘制图表
-            this.trendEvent('custTrendsNew') // 绘制新图表
+            this.trendEventNew('custTrendsNew') // 绘制新图表
           })
         } else if (res.errno != 4002) {
           this.$message({
@@ -529,6 +529,147 @@ export default {
         this.myChartNew.setOption(option);
       }
     },
+    trendEventNew (chartDataName) {
+      // 旧图表
+      chartDataName === 'custTrends' && this.myChart && this.myChart.clear()
+      // 新图表
+      chartDataName === 'custTrendsNew' && this.myChartNew && this.myChartNew.clear()
+
+      const _this = this;
+      let series = []
+      let xArr = this[chartDataName].map((v) => {
+        return v.idate
+      });
+      this[chartDataName === 'custTrends' ? 'legendList' : 'legendListNew'].forEach((item, index) => {
+        if (item.selectFlag) {
+          // series
+          let data = this[chartDataName].map((v) => {
+            return v[item.key] || v[item.key] == 0 ? v[item.key] : '-'
+          });
+          series.push({
+            type: "line",
+            smooth: true,
+            name: item.name,
+            data: data,
+            lineStyle: {
+              width: 2
+            },
+            symbol: xArr.length == 1 ? 'emptyCircle' : 'none',
+            itemStyle: {
+              color: item.color,
+              borderType: "emptyCircle"
+            },
+          })
+        }
+      })
+
+      let option = {
+        title: '',
+        tooltip: {
+          trigger: 'axis',
+          show: true,
+          formatter: function (params) {
+            let result = params[0].name;
+            result += '<br/>'
+            params.forEach((item, index) => {
+              result +=
+                item.marker +
+                item.seriesName +
+                "：" + (_this.$formatNum(item.value)) +
+                "<br/>";
+            });
+            return result;
+          }
+        },
+        legend: {
+          itemWidth: 8,
+          itemHeight: 2,
+          icon: "plain",
+          show: false,
+          textStyle: {
+            fontSize: 12,
+            color: '#666666'
+          },
+        },
+        grid:
+        {
+          top: '6%',
+          left: '5%',
+          right: '4%',
+          bottom: '16%',
+          containLabel: false
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: xArr,
+            boundaryGap: false,//设置数据从头开始
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#F2F2f2'
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              color: '#666',
+              fontSize: 10,
+              rotate: 30,
+            },
+          }
+        ],
+        yAxis: {
+          type: "value",
+          name: '',
+          show: true,
+          position: 'left',
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#F2F2f2',
+              type: "dashed"
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#F2F2f2'
+            }
+          },
+          nameTextStyle: {
+            color: "#999999",
+            fontSize: 13,
+          },
+          axisLabel: {
+            color: '#999999',
+            fontSize: 12,
+            show: true,
+            formatter: function (params) {
+              let result = params;
+              let resultData;
+              resultData = _this.$NumberHandle(result)
+              return resultData;
+            }
+          }
+        },
+        series: series
+      };
+      //初始化echarts实例
+      if (chartDataName === 'custTrends') {
+        this.myChart = this.myChart ? this.myChart : this.$echarts.init(document.getElementById('trend'));
+        this.myChart.setOption(option);
+      } else if (chartDataName === 'custTrendsNew') {
+        this.myChartNew = this.myChartNew ? this.myChartNew : this.$echarts.init(document.getElementById('trendNew'));
+        this.myChartNew.setOption(option);
+      }
+    },
     changeLegend (legendListName, data, index) {
       let arr = this[legendListName].filter((v) => {
         return v.selectFlag
@@ -545,7 +686,7 @@ export default {
       this.$set(this[legendListName], index, item)
       this.$nextTick(() => {
         legendListName === 'legendList' && this.trendEvent('custTrends')
-        legendListName === 'legendListNew' && this.trendEvent('custTrendsNew')
+        legendListName === 'legendListNew' && this.trendEventNew('custTrendsNew')
       })
     },
     changeTime (time) {//筛选时间变化