From 2b51cc9f3fd5dafa88f16121470bfb5fca26487a Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Tue, 26 Jul 2022 17:12:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20echarts=E5=9C=B0?=
 =?UTF-8?q?=E5=9B=BE=E4=B8=B0=E5=AF=8C=E6=A0=87=E7=AD=BE=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/en.js                                |  3 +++
 frontend/src/lang/tw.js                                |  3 +++
 frontend/src/lang/zh.js                                |  3 +++
 frontend/src/views/chart/chart/map/map.js              |  7 +++++++
 frontend/src/views/chart/chart/util.js                 |  5 ++++-
 .../chart/components/shape-attr/LabelSelector.vue      | 10 ++++++++++
 6 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index ce8ec35aa8..31eeba4ac6 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -826,6 +826,9 @@ export default {
     circle: 'circular',
     label: 'label',
     label_position: 'Label location',
+    label_bg: 'Label BG',
+    label_shadow: 'Label Shadow',
+    label_shadow_color: 'Shadow Color',
     content_formatter: 'Content Format',
     inside: 'Inside',
     tooltip: 'Tips',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 984f142875..333fd620b7 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -827,6 +827,9 @@ export default {
     circle: '圓形',
     label: '標簽',
     label_position: '標簽位置',
+    label_bg: '標簽背景',
+    label_shadow: '標簽陰影',
+    label_shadow_color: '陰影顏色',
     content_formatter: '內容格式',
     inside: '內',
     tooltip: '提示',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 726294852f..abedbe3b95 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -829,6 +829,9 @@ export default {
     circle: '圆形',
     label: '标签',
     label_position: '标签位置',
+    label_bg: '标签背景',
+    label_shadow: '标签阴影',
+    label_shadow_color: '阴影颜色',
     content_formatter: '内容格式',
     inside: '内',
     tooltip: '提示',
diff --git a/frontend/src/views/chart/chart/map/map.js b/frontend/src/views/chart/chart/map/map.js
index 2640996af9..278b44f62e 100644
--- a/frontend/src/views/chart/chart/map/map.js
+++ b/frontend/src/views/chart/chart/map/map.js
@@ -46,6 +46,13 @@ export function baseMapOption(chart_option, chart, themeStyle) {
           return text.replace(new RegExp('{a}', 'g'), a).replace(new RegExp('{b}', 'g'), b).replace(new RegExp('{c}', 'g'), c)
         }
         chart_option.series[0].labelLine = customAttr.label.labelLine
+        if (customAttr.label.bgColor) {
+          chart_option.series[0].label.backgroundColor = customAttr.label.bgColor
+        }
+        if (customAttr.label.showShadow) {
+          chart_option.series[0].label.shadowBlur = 2
+          chart_option.series[0].label.showdowColor = customAttr.label.shadowColor
+        }
       }
       // visualMap
       const valueArr = chart.data.series[0].data
diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js
index 9e46dfe09d..7d73e25fbb 100644
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
@@ -2438,7 +2438,10 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'formatter'
+        'formatter',
+        'label-bg',
+        'label-show-shadow',
+        'label-shadow-color'
       ],
       'tooltip-selector': [
         'show',
diff --git a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
index afb806a7c5..af723a46e6 100644
--- a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
@@ -32,6 +32,16 @@
               <el-option v-for="option in labelPositionV" :key="option.value" :label="option.name" :value="option.value" />
             </el-select>
           </el-form-item>
+          <el-form-item v-show="showProperty('label-bg') " :label="$t('chart.label_bg')" class="form-item">
+            <el-color-picker v-model="labelForm.bgColor" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr('bgColor')" />
+          </el-form-item>
+          <el-form-item v-show="showProperty('label-show-shadow')" :label="$t('chart.label_shadow')" class="form-item">
+            <el-checkbox v-model="labelForm.showShadow" @change="changeLabelAttr('showShadow')">{{ $t('chart.show') }}</el-checkbox>
+          </el-form-item>
+          <el-form-item v-show="showProperty('label-shadow-color') && labelForm.showShadow" :label="$t('chart.label_shadow_color')" class="form-item">
+            <el-color-picker v-model="labelForm.shadowColor" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr('shadowColor')" />
+          </el-form-item>
+
           <el-form-item v-show="showProperty('formatter')" class="form-item">
             <span slot="label">
               <span class="span-box">