From 7596debca62b30d9f35b16c15597d1b264e26730 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Thu, 15 Jul 2021 18:30:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A7=86=E5=9B=BE=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E9=BB=98=E8=AE=A4padding?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/chart/chart/common/common.js    | 37 +++++++++++++++++--
 .../chart/components/normal/LabelNormal.vue   |  4 +-
 .../chart/components/table/TableNormal.vue    |  4 +-
 3 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/frontend/src/views/chart/chart/common/common.js b/frontend/src/views/chart/chart/common/common.js
index 0ca82eadc0..e4135b6c12 100644
--- a/frontend/src/views/chart/chart/common/common.js
+++ b/frontend/src/views/chart/chart/common/common.js
@@ -1,12 +1,27 @@
 import { hexColorToRGBA } from '@/views/chart/chart/util'
 
 export function componentStyle(chart_option, chart) {
+  const padding = '8px'
   if (chart.customStyle) {
     const customStyle = JSON.parse(chart.customStyle)
     if (customStyle.text) {
       chart_option.title.show = customStyle.text.show
-      chart_option.title.left = customStyle.text.hPosition
-      chart_option.title.top = customStyle.text.vPosition
+      // 水平方向
+      if (customStyle.text.hPosition === 'left') {
+        chart_option.title.left = padding
+      } else if (customStyle.text.hPosition === 'right') {
+        chart_option.title.right = padding
+      } else {
+        chart_option.title.left = customStyle.text.hPosition
+      }
+      // 垂直方向
+      if (customStyle.text.vPosition === 'top') {
+        chart_option.title.top = padding
+      } else if (customStyle.text.vPosition === 'bottom') {
+        chart_option.title.bottom = padding
+      } else {
+        chart_option.title.top = customStyle.text.vPosition
+      }
       const style = chart_option.title.textStyle ? chart_option.title.textStyle : {}
       style.fontSize = customStyle.text.fontSize
       style.color = customStyle.text.color
@@ -16,8 +31,22 @@ export function componentStyle(chart_option, chart) {
     }
     if (customStyle.legend) {
       chart_option.legend.show = customStyle.legend.show
-      chart_option.legend.left = customStyle.legend.hPosition
-      chart_option.legend.top = customStyle.legend.vPosition
+      // 水平方向
+      if (customStyle.legend.hPosition === 'left') {
+        chart_option.legend.left = padding
+      } else if (customStyle.legend.hPosition === 'right') {
+        chart_option.legend.right = padding
+      } else {
+        chart_option.legend.left = customStyle.legend.hPosition
+      }
+      // 垂直方向
+      if (customStyle.legend.vPosition === 'top') {
+        chart_option.legend.top = padding
+      } else if (customStyle.legend.vPosition === 'bottom') {
+        chart_option.legend.bottom = padding
+      } else {
+        chart_option.legend.top = customStyle.legend.vPosition
+      }
       chart_option.legend.orient = customStyle.legend.orient
       chart_option.legend.icon = customStyle.legend.icon
       chart_option.legend.textStyle = customStyle.legend.textStyle
diff --git a/frontend/src/views/chart/components/normal/LabelNormal.vue b/frontend/src/views/chart/components/normal/LabelNormal.vue
index 82b81466ec..ac5bd9d95f 100644
--- a/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="tableContainer" :style="bg_class">
+  <div ref="tableContainer" :style="bg_class" style="padding: 8px;">
     <p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
     <div
       v-if="chart.data && chart.data.x && chart.data.x.length > 0 && chart.data.series && chart.data.series.length > 0 && chart.data.series[0].data && chart.data.series[0].data.length > 0"
@@ -104,7 +104,7 @@ export default {
       this.$nextTick(function() {
         if (that.$refs.tableContainer) {
           const currentHeight = that.$refs.tableContainer.offsetHeight
-          const contentHeight = currentHeight - that.$refs.title.offsetHeight
+          const contentHeight = currentHeight - that.$refs.title.offsetHeight - 16
           that.height = contentHeight + 'px'
           that.content_class.height = that.height
         }
diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue
index 7433c9f751..01a5083463 100644
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="tableContainer" :style="bg_class">
+  <div ref="tableContainer" :style="bg_class" style="padding: 8px;">
     <p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
     <ux-grid
       ref="plxTable"
@@ -129,7 +129,7 @@ export default {
       this.$nextTick(() => {
         if (this.$refs.tableContainer) {
           const currentHeight = this.$refs.tableContainer.offsetHeight
-          const tableMaxHeight = currentHeight - this.$refs.title.offsetHeight
+          const tableMaxHeight = currentHeight - this.$refs.title.offsetHeight - 16
           let tableHeight
           if (this.chart.data) {
             tableHeight = (this.chart.data.tableRow.length + 2) * 36