Merge pull request #646 from dataease/pr@dev@feat_view_border

feat: 视图增加边框圆角配置

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',

frontend/src/lang/tw.js

@@ -696,6 +696,9 @@ export default {
     filter: '過濾',
     none: '無',
     background: '背景',
+    border: '邊角',
+    border_width: '邊框寬度',
+    border_radius: '邊框半徑',
     alpha: '透明度',
     add_filter: '添加過濾',
     no_limit: '無顯示',

frontend/src/lang/zh.js

@@ -696,6 +696,9 @@ export default {
     filter: '过滤',
     none: '无',
     background: '背景',
+    border: '边角',
+    border_width: '边框宽度',
+    border_radius: '边框半径',
     alpha: '透明度',
     add_filter: '添加过滤',
     no_limit: '无限制',

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

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>