From 4fbccf55a89f91d12c0116185715a52f0e9a3e00 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Sat, 10 Jul 2021 11:18:40 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20statisticslegend=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/charts/StatisticsLegend.vue |  2 +-
 src/components/charts/chart-options.js     |  5 +-
 src/views/charts/Chart.vue                 | 96 ++++++++++++----------
 3 files changed, 55 insertions(+), 48 deletions(-)

diff --git a/src/components/charts/StatisticsLegend.vue b/src/components/charts/StatisticsLegend.vue
index a19e93e1..5b87fdb0 100644
--- a/src/components/charts/StatisticsLegend.vue
+++ b/src/components/charts/StatisticsLegend.vue
@@ -43,7 +43,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .chart__legend {
-  width: calc(100% - 60px);
+  width: calc(100% - 40px);
   height: 105px;
   border: 1px solid #E7EAED;
   color: #5f6368;
diff --git a/src/components/charts/chart-options.js b/src/components/charts/chart-options.js
index fe46ea99..27a4f242 100644
--- a/src/components/charts/chart-options.js
+++ b/src/components/charts/chart-options.js
@@ -94,8 +94,9 @@ const lineWithStatistics = {
   color: chartColor,
   grid: {
     left: 55,
-    bottom: 25,
-    top: 30
+    bottom: 30,
+    top: 20,
+    right: 20
   },
   legend: {
     show: false
diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue
index dee734fd..1c29ae65 100644
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -30,7 +30,7 @@
     <template #title>{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</template>
     <template #operations>
       <i class="cn-icon cn-icon-more-light"></i>
-<!--      <i class="cn-icon cn-icon-refresh" @click="mapReload"></i>-->
+<!--      <i class="cn-icon cn-icon-refresh" @click="loadMap"></i>-->
     </template>
     <template #default>
       <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
@@ -220,55 +220,18 @@ export default {
       if (this.isMap) {
         this.myChart = this.initMap(`chart${this.chartInfo.id}`)
         if (chartParams) {
-          this.mapReload()
+          this.loadMap()
         }
       } else if (this.isEcharts) {
         const dom = document.getElementById(`chart${this.chartInfo.id}`)
         this.myChart = echarts.init(dom)
         if (chartParams) {
           if (this.isEchartsWithTable) {
-            this.chartWithPieTableInit(chartParams)
+            this.initEchartsWithPieTable(chartParams)
           } else if (this.isEchartsWithStatistics) {
-            const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000) }
-            get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
-              if (response.code === 200) {
-                this.statisticsData = response.data.result
-                const seriesTemplate = this.chartOption.series[0]
-                this.chartOption.series = response.data.result.map((r, i) => {
-                  return {
-                    ...seriesTemplate,
-                    name: r.legend,
-                    data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1])]),
-                    lineStyle: {
-                      color: getChartColor[i]
-                    }
-                  }
-                })
-              }
-              this.myChart.setOption(this.chartOption)
-              this.$nextTick(() => {
-                this.myChart.resize()
-              })
-            })
+            this.initEchartsWithStatistics(chartParams)
           } else {
-            const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000) }
-            get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
-              if (response.code === 200) {
-                this.statisticsData = response.data.result
-                const seriesTemplate = this.chartOption.series[0]
-                this.chartOption.series = response.data.result.map(r => {
-                  return {
-                    ...seriesTemplate,
-                    name: r.legend,
-                    data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1])])
-                  }
-                })
-              }
-              this.myChart.setOption(this.chartOption)
-              this.$nextTick(() => {
-                this.myChart.resize()
-              })
-            })
+            this.initECharts(chartParams)
           }
         }
       } else if (this.isTable) {
@@ -315,7 +278,7 @@ export default {
       hs.properties.fill = am4Core.color('#ccc') */
       return chart
     },
-    mapReload () {
+    loadMap () {
       const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数
       const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), country: '', region: '' } // 统计数据的查询参数
       get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
@@ -414,10 +377,53 @@ export default {
       if (this.chart.type === 31) {
         const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数
         this.myChart.off('click')
-        this.chartWithPieTableInit(chartParams)
+        this.initEchartsWithPieTable(chartParams)
       }
     },
-    chartWithPieTableInit (chartParams) {
+    initECharts (chartParams) {
+      const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000) }
+      get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
+        if (response.code === 200) {
+          this.statisticsData = response.data.result
+          const seriesTemplate = this.chartOption.series[0]
+          this.chartOption.series = response.data.result.map(r => {
+            return {
+              ...seriesTemplate,
+              name: r.legend,
+              data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1])])
+            }
+          })
+        }
+        this.myChart.setOption(this.chartOption)
+        this.$nextTick(() => {
+          this.myChart.resize()
+        })
+      })
+    },
+    initEchartsWithStatistics (chartParams) {
+      const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000) }
+      get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
+        if (response.code === 200) {
+          this.statisticsData = response.data.result
+          const seriesTemplate = this.chartOption.series[0]
+          this.chartOption.series = response.data.result.map((r, i) => {
+            return {
+              ...seriesTemplate,
+              name: r.legend,
+              data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1])]),
+              lineStyle: {
+                color: getChartColor[i]
+              }
+            }
+          })
+        }
+        this.myChart.setOption(this.chartOption)
+        this.$nextTick(() => {
+          this.myChart.resize()
+        })
+      })
+    },
+    initEchartsWithPieTable (chartParams) {
       const self = this
       chartParams.valueColumn = this.orderPieTable
       const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), limit: 10, order: this.orderPieTable } // 统计数据的查询参数