Merge pull request #247 from dataease/pr@dev@feat_视图增加默认padding

feat: 视图增加默认padding

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

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
         }

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