From 00bce0ee7ee18f6e0658014bdd157d25abef5067 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Thu, 11 Mar 2021 15:06:13 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20echarts=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=B0=81=E8=A3=85=EF=BC=8C=E5=88=9D=E6=AD=A5=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/chart/chart/chart.js       | 21 +++++-
 .../views/chart/components/ChartComponent.vue | 65 +++++++++++++++++++
 .../src/views/chart/components/QuotaItem.vue  |  4 +-
 frontend/src/views/chart/view/ChartEdit.vue   | 62 +++---------------
 4 files changed, 95 insertions(+), 57 deletions(-)
 create mode 100644 frontend/src/views/chart/components/ChartComponent.vue

diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 4f61c83d7f..7392c1b3d2 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -15,6 +15,23 @@ export const BASE_BAR = {
   series: []
 }
 
-export default {
-  BASE_BAR
+export const BASE_LINE = {
+  title: {
+    text: ''
+  },
+  tooltip: {},
+  legend: {
+    data: []
+  },
+  xAxis: {
+    data: []
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: []
+}
+
+export default {
+  BASE_BAR, BASE_LINE
 }
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
new file mode 100644
index 0000000000..b4afd1e9a0
--- /dev/null
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">
+    <div id="echart" style="width: 100%;height: 80vh;" />
+  </div>
+</template>
+
+<script>
+import { BASE_BAR, BASE_LINE } from '../chart/chart'
+
+export default {
+  name: 'ChartComponent',
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    chart() {
+      this.drawEcharts()
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    drawEcharts() {
+      const chart = this.chart
+      let chart_option = {}
+      // todo type
+      if (chart.type === 'bar') {
+        chart_option = JSON.parse(JSON.stringify(BASE_BAR))
+      } else if (chart.type === 'line') {
+        chart_option = JSON.parse(JSON.stringify(BASE_LINE))
+      }
+      // console.log(chart_option);
+      if (chart.data) {
+        chart_option.title.text = chart.title
+        chart_option.xAxis.data = chart.data.x
+        chart.data.series.forEach(function(y) {
+          chart_option.legend.data.push(y.name)
+          chart_option.series.push(y)
+        })
+      }
+      // console.log(chart_option);
+      this.myEcharts(chart_option)
+    },
+    myEcharts(option) {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = this.$echarts.init(document.getElementById('echart'))
+      // 指定图表的配置项和数据
+      setTimeout(myChart.setOption(option, true), 500)
+      window.onresize = function() {
+        myChart.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/views/chart/components/QuotaItem.vue b/frontend/src/views/chart/components/QuotaItem.vue
index 3c4ece1fa5..3e0c405781 100644
--- a/frontend/src/views/chart/components/QuotaItem.vue
+++ b/frontend/src/views/chart/components/QuotaItem.vue
@@ -5,7 +5,7 @@
         <span
           class="item-axis"
         >
-          {{ item.name }}<span class="summary-span">({{ $t('chart.'+item.summary) }})</span><i class="el-icon-arrow-down el-icon--right" />
+          {{ item.name }}<span class="summary-span">{{ $t('chart.'+item.summary) }}</span><i class="el-icon-arrow-down el-icon--right" />
           <span />
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item icon="el-icon-notebook-2">
@@ -50,7 +50,7 @@ export default {
   },
   methods: {
     summary(param) {
-      console.log(param)
+      // console.log(param)
       this.item.summary = param.type
       this.$emit('onQuotaSummaryChange', this.item)
     },
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 4281df8105..7aa484402d 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -31,7 +31,7 @@
             @start="start1"
           >
             <transition-group>
-              <span v-for="item in dimension" :key="item.id" class="item" @click="click1(item)">{{ item.name }}</span>
+              <span v-for="item in dimension" :key="item.id" class="item">{{ item.name }}</span>
             </transition-group>
           </draggable>
         </div>
@@ -47,7 +47,7 @@
             @start="start1"
           >
             <transition-group>
-              <span v-for="item in quota" :key="item.id" class="item" @click="click2(item)">{{ item.name }}</span>
+              <span v-for="item in quota" :key="item.id" class="item">{{ item.name }}</span>
             </transition-group>
           </draggable>
         </div>
@@ -131,9 +131,7 @@
             </el-row>
           </el-row>
 
-          <div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">
-            <div id="echart" style="width: 100%;height: 80vh;" />
-          </div>
+          <chart-component :chart="chart" />
         </el-row>
       </el-col>
     </el-row>
@@ -143,13 +141,13 @@
 <script>
 import { post } from '@/api/dataset/dataset'
 import draggable from 'vuedraggable'
-import { BASE_BAR } from '../chart/chart'
 import DimensionItem from '../components/DimensionItem'
 import QuotaItem from '../components/QuotaItem'
+import ChartComponent from '../components/ChartComponent'
 
 export default {
   name: 'ChartEdit',
-  components: { QuotaItem, DimensionItem, draggable },
+  components: { ChartComponent, QuotaItem, DimensionItem, draggable },
   data() {
     return {
       table: {},
@@ -173,7 +171,8 @@ export default {
       arr2: [
         { id: 11, name: '容量' }
       ],
-      moveId: -1
+      moveId: -1,
+      chart: {}
     }
   },
   computed: {
@@ -225,26 +224,6 @@ export default {
         this.quota = response.data.quota
       })
     },
-    click1(item) {
-      // console.log(item);
-      const c = this.view.xaxis.filter(function(ele) {
-        return ele.id === item.id
-      })
-      // console.log(c);
-      if (c && c.length === 0) {
-        this.view.xaxis.push(item)
-      }
-    },
-    click2(item) {
-      // console.log(item);
-      const c = this.view.yaxis.filter(function(ele) {
-        return ele.id === item.id
-      })
-      // console.log(c);
-      if (c && c.length === 0) {
-        this.view.yaxis.push(item)
-      }
-    },
     get(id) {
       if (id) {
         post('/chart/view/get/' + id, null).then(response => {
@@ -290,20 +269,8 @@ export default {
           this.view = response.data
           this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
           this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
-
-          const chart = response.data
-          const chart_option = JSON.parse(JSON.stringify(BASE_BAR))
-          // console.log(chart_option);
-          if (chart.data) {
-            chart_option.title.text = chart.title
-            chart_option.xAxis.data = chart.data.x
-            chart.data.series.forEach(function(y) {
-              chart_option.legend.data.push(y.name)
-              chart_option.series.push(y)
-            })
-          }
-          // console.log(chart_option);
-          this.myEcharts(chart_option)
+          // 将视图传入echart组件
+          this.chart = response.data
         })
       } else {
         this.view = {}
@@ -391,7 +358,6 @@ export default {
     },
 
     quotaSummaryChange(item) {
-      console.log(item)
       // 更新item
       this.view.yaxis.forEach(function(ele) {
         if (ele.id === item.id) {
@@ -399,16 +365,6 @@ export default {
         }
       })
       this.save()
-    },
-
-    myEcharts(option) {
-      // 基于准备好的dom，初始化echarts实例
-      var myChart = this.$echarts.init(document.getElementById('echart'))
-      // 指定图表的配置项和数据
-      setTimeout(myChart.setOption(option, true), 500)
-      window.onresize = function() {
-        myChart.resize()
-      }
     }
   }
 }