From ecc56b02c40b3092c74fc8795b738f40aa27de26 Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@geedgenetworks.com>
Date: Fri, 21 Jan 2022 17:10:18 +0800
Subject: [PATCH] =?UTF-8?q?CN-269=20=E5=9B=BE=E8=A1=A8=E9=87=8D=E6=9E=84-e?=
 =?UTF-8?q?charts=E7=B1=BB=E5=9E=8B=E5=9B=BE=E8=A1=A8=E9=87=8D=E6=9E=84:?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0type=3D12=20=E5=B8=A6=E7=BB=9F=E8=AE=A1?=
 =?UTF-8?q?=E7=9A=84=E6=8A=98=E7=BA=BF=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/charts/charts/ChartEchartLine.vue   |   9 +-
 .../charts/ChartEchartWithStatistics.vue      | 135 ++++++++++++++++++
 src/views/charts/charts/chart-options.js      |   4 +
 3 files changed, 143 insertions(+), 5 deletions(-)
 create mode 100644 src/views/charts/charts/ChartEchartWithStatistics.vue

diff --git a/src/views/charts/charts/ChartEchartLine.vue b/src/views/charts/charts/ChartEchartLine.vue
index f434dbac..83c67e25 100644
--- a/src/views/charts/charts/ChartEchartLine.vue
+++ b/src/views/charts/charts/ChartEchartLine.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
+   <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
 </template>
 
 <script>
@@ -23,11 +23,10 @@ export default {
   props: {
     chartInfo: Object,
     chartData: [Array, Object],
-    resultType: Object,
-    queryParams: Object
+    resultType: Object
   },
   methods: {
-    initMap (id) {
+    initLine (id) {
       const chartParams = this.chartInfo.params
       const dom = document.getElementById(id)
       !this.myChart && (this.myChart = echarts.init(dom))
@@ -94,7 +93,7 @@ export default {
     chartData: {
       deep: true,
       handler (n) {
-        this.initMap(`chart${this.chartInfo.id}`)
+        this.initLine(`chart${this.chartInfo.id}`)
       }
     }
   }
diff --git a/src/views/charts/charts/ChartEchartWithStatistics.vue b/src/views/charts/charts/ChartEchartWithStatistics.vue
new file mode 100644
index 00000000..33492725
--- /dev/null
+++ b/src/views/charts/charts/ChartEchartWithStatistics.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="chart-drawing"  :style="`height: calc(100% - ${statisticsHeight}px)`" :id="`chart${chartInfo.id}`"></div>
+  <div class="cn-chart__footer">
+    <statistics-legend :data="statisticsData" :chart-info="chartInfo" @toggleLegend="toggleStatisticsLegend"></statistics-legend>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import StatisticsLegend from '@/components/charts/StatisticsLegend'
+import {
+  lineWithStatistics
+} from '@/views/charts/charts/options/line'
+import {
+  getChartColor
+} from '@/views/charts/charts/chart-options'
+
+export default {
+  name: 'ChartEchartWithStatistics',
+  data () {
+    return {
+      myChart: null,
+      chartOption: null,
+      statisticsData: [],
+      statisticsHeight: 280
+    }
+  },
+  props: {
+    chartInfo: Object,
+    chartData: [Array, Object],
+    resultType: Object
+  },
+  components: {
+    StatisticsLegend
+  },
+  mounted () {
+    // 动态计算统计信息的高度
+    if (this.chartData) {
+      const dataLen = this.chartData.length
+      this.statisticsHeight = (dataLen * 24) + 30 + 3 + 7 // 根据legend个数动态预留legend空间,7为其他
+    }
+  },
+  methods: {
+    initEchartsWithStatistics (id) {
+      const chartParams = this.chartInfo.params
+      const dom = document.getElementById(id)
+      !this.myChart && (this.myChart = echarts.init(dom))
+      this.chartOption = this.$_.cloneDeep(lineWithStatistics)
+      const allZero = this.timeLineIsAllZero(this.chartData)
+      if (allZero) {
+        this.chartOption.yAxis = {
+          ...this.chartOption.yAxis,
+          min: 0,
+          max: 5,
+          interval: 1
+        }
+      }
+      this.statisticsData = this.chartData.map(d => {
+        return {
+          ...d,
+          active: true
+        }
+      })
+
+      const seriesTemplate = this.chartOption.series[0]
+      this.chartOption.series = this.chartData.map((r, i) => {
+        return {
+          ...seriesTemplate,
+          name: r.legend,
+          data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), chartParams.unitType]),
+          lineStyle: {
+            color: getChartColor[i]
+          }
+        }
+      })
+      this.loadEchartWithStatistics()
+    },
+
+    loadEchartWithStatistics () {
+      this.$emit('showLoading', true)
+      try {
+        this.myChart.setOption(this.chartOption)
+      } finally {
+        setTimeout(() => {
+          this.$emit('showLoading', false)
+        }, 200)
+      }
+    },
+    timeLineIsAllZero (data) {
+      if (this.resultType === 'matrix') {
+        let allZero = true
+        try {
+          data.forEach(d => {
+            d.values.forEach(r => {
+              if (r[1] && r[1] !== '0') {
+                allZero = false
+                throw new Error('break')
+              }
+            })
+          })
+        } catch (e) {}
+        return allZero
+      }
+    },
+    toggleStatisticsLegend (index) {
+      this.statisticsData[index].active = !this.statisticsData[index].active
+      this.statisticsData.forEach((d, i) => {
+        if (d.active) {
+          this.myChart.dispatchAction({
+            type: 'legendSelect',
+            name: d.legend
+          })
+        } else {
+          this.myChart.dispatchAction({
+            type: 'legendUnSelect',
+            name: d.legend
+          })
+        }
+      })
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler (n) {
+        this.initEchartsWithStatistics(`chart${this.chartInfo.id}`)
+      }
+    },
+    statisticsHeight (val) {
+      const dom = document.getElementById(`chart${this.chartInfo.id}`)
+      dom.style.cssText += `height: calc(100% - ${val}px)`
+    }
+  }
+}
+</script>
diff --git a/src/views/charts/charts/chart-options.js b/src/views/charts/charts/chart-options.js
index 460c4e6d..b6394c24 100644
--- a/src/views/charts/charts/chart-options.js
+++ b/src/views/charts/charts/chart-options.js
@@ -620,6 +620,10 @@ export function isEchartsCategoryBar (type) {
 export function isEcharts (type) {
   return type >= 11 && type <= 50
 }
+/* 折线，饼图 */
+export function isEchartsLineBar (type) {
+  return type == 11 || type == 12 || type == 31 || type == 32 || type == 33 || type == 34
+}
 /* 地图 */
 export function isMap (type) {
   return type >= 1 && type <= 10