Merge pull request #2705 from dataease/pr@dev@feat_map_label_style

feat(视图): echarts地图丰富标签样式属性设置

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

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: '提示',

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: '提示',

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

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

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">