From e93b57e0623a1589d4f248effa69aec1db5b1241 Mon Sep 17 00:00:00 2001
From: chenjianxing <jianxing.chen@fit2cloud.com>
Date: Wed, 27 Oct 2021 11:02:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20echart=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/business/components/common/chart/MsChart.vue  | 11 +++++++++--
 .../common/components/MsDoughnutPieChart.vue          |  8 +++++++-
 .../components/common/components/MsPieChart.vue       |  8 +++++++-
 frontend/src/common/js/chart.js                       |  1 +
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/frontend/src/business/components/common/chart/MsChart.vue b/frontend/src/business/components/common/chart/MsChart.vue
index 4dc67ba47d..627a1ec7fa 100644
--- a/frontend/src/business/components/common/chart/MsChart.vue
+++ b/frontend/src/business/components/common/chart/MsChart.vue
@@ -1,8 +1,9 @@
 <template>
   <chart
+    :style="{'height': height + 'px'}"
     class="ms-chart"
     :init-options="defaultInitOptions"
-    :options="options"
+    :option="options"
     :theme="theme"
     :group="group"
     @click="onClick"
@@ -22,7 +23,13 @@ export default {
     group: String,
     autoresize: Boolean,
     watchShallow: Boolean,
-    manualUpdate: Boolean
+    manualUpdate: Boolean,
+    height: {
+      type: Number,
+      default() {
+        return 400
+      }
+    }
   },
   data() {
     return {
diff --git a/frontend/src/business/components/common/components/MsDoughnutPieChart.vue b/frontend/src/business/components/common/components/MsDoughnutPieChart.vue
index a0825ce371..6e04cce952 100644
--- a/frontend/src/business/components/common/components/MsDoughnutPieChart.vue
+++ b/frontend/src/business/components/common/components/MsDoughnutPieChart.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ms-chart v-if="visible && data.length > 0" :options="options"/>
+    <ms-chart v-if="visible && data.length > 0" :options="options" :height="height"/>
     <div v-if="visible && data.length <= 0" style="height: 300px">
 
     </div>
@@ -66,6 +66,12 @@ export default {
         return []
       }
     },
+    height: {
+      type: Number,
+      default() {
+        return 400
+      }
+    }
   },
   watch: {
     data() {
diff --git a/frontend/src/business/components/common/components/MsPieChart.vue b/frontend/src/business/components/common/components/MsPieChart.vue
index 80cbd524dd..d922ae7876 100644
--- a/frontend/src/business/components/common/components/MsPieChart.vue
+++ b/frontend/src/business/components/common/components/MsPieChart.vue
@@ -1,7 +1,7 @@
 <template>
 
   <div>
-    <ms-chart :options="options" @onClick="onClick">
+    <ms-chart :options="options" @onClick="onClick" :height="height">
     </ms-chart>
   </div>
 
@@ -74,6 +74,12 @@ export default {
         type: String,
         default: ''
       },
+      height: {
+        type: Number,
+        default() {
+          return 400
+        }
+      },
       data: {
         type: Array,
         default() {
diff --git a/frontend/src/common/js/chart.js b/frontend/src/common/js/chart.js
index 522eda7756..0b012c5af5 100644
--- a/frontend/src/common/js/chart.js
+++ b/frontend/src/common/js/chart.js
@@ -9,6 +9,7 @@ import 'echarts/lib/component/toolbox';
 import 'echarts/lib/component/dataZoom';
 import 'echarts/lib/component/legend';
 import 'zrender/lib/svg/svg'
+import 'echarts/lib/component/grid'
 
 export default {
   install(Vue) {