From 09667df67ea23b3e68419c8eb818f4650a4b9b1d Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Tue, 17 Aug 2021 15:19:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A7=86=E5=9B=BE=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E8=BE=B9=E6=A1=86=E5=9C=86=E8=A7=92=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/en.js                            |  4 ++++
 frontend/src/lang/tw.js                            |  3 +++
 frontend/src/lang/zh.js                            |  3 +++
 .../src/views/chart/components/ChartComponent.vue  | 14 ++++++++++++--
 .../component-style/BackgroundColorSelector.vue    |  4 ++++
 5 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 033b0da0bf..5c5298814b 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -696,6 +696,10 @@ export default {
     filter: 'Filter',
     none: 'None',
     background: 'Background',
+
+    border: 'Corner',
+    border_width: 'Border width',
+    border_radius: 'Border radius',
     alpha: 'Transparency',
     add_filter: 'Add Filter',
     no_limit: 'No limit',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index a973e69f36..1a99572f77 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -696,6 +696,9 @@ export default {
     filter: '過濾',
     none: '無',
     background: '背景',
+    border: '邊角',
+    border_width: '邊框寬度',
+    border_radius: '邊框半徑',
     alpha: '透明度',
     add_filter: '添加過濾',
     no_limit: '無顯示',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 285de2d1d8..d19e349de2 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -696,6 +696,9 @@ export default {
     filter: '过滤',
     none: '无',
     background: '背景',
+    border: '边角',
+    border_width: '边框宽度',
+    border_radius: '边框半径',
     alpha: '透明度',
     add_filter: '添加过滤',
     no_limit: '无限制',
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index 9368cb3129..5e673dc7ea 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -1,7 +1,7 @@
 <template>
   <div style="display: flex;">
     <view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
-    <div :id="chartId" style="width: 100%;height: 100%;" />
+    <div :id="chartId" style="width: 100%;height: 100%;overflow: hidden;" :style="{ borderRadius: borderRadius}" />
   </div>
 </template>
 
@@ -56,7 +56,8 @@ export default {
       },
       pointParam: null,
 
-      dynamicAreaCode: null
+      dynamicAreaCode: null,
+      borderRadius: '0px'
     }
   },
 
@@ -195,11 +196,20 @@ export default {
     myEcharts(option) {
       // 指定图表的配置项和数据
       const chart = this.myChart
+      this.setBackGroundBorder()
       setTimeout(chart.setOption(option, true), 500)
       window.onresize = function() {
         chart.resize()
       }
     },
+    setBackGroundBorder() {
+      if (this.chart.customStyle) {
+        const customStyle = JSON.parse(this.chart.customStyle)
+        if (customStyle.background) {
+          this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
+        }
+      }
+    },
     chartResize() {
       // 指定图表的配置项和数据
       const chart = this.myChart
diff --git a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
index d2a2f566f8..294b9c7629 100644
--- a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
+++ b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
@@ -8,6 +8,10 @@
         <el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
           <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
         </el-form-item>
+
+        <el-form-item :label="$t('chart.border_radius')" class="form-item form-item-slider">
+          <el-slider v-model="colorForm.borderRadius" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
+        </el-form-item>
       </el-form>
     </el-col>
   </div>