Merge pull request #2896 from dataease/pr@dev@feat_map_border_color

feat(视图-地图): 地图边线颜色配置

frontend/src/lang/en.js

@@ -866,6 +866,7 @@ export default {
     color_technology: 'Technology',
     color_simple: 'Simple',
     not_alpha: 'Opacity',
+    area_border_color: 'Map border',
     size: 'Size',
     bar_width: 'Column Width',
     bar_gap: 'Column septum',

frontend/src/lang/tw.js

@@ -867,6 +867,7 @@ export default {
     color_technology: '科技',
     color_simple: '簡潔',
     not_alpha: '不透明度',
+    area_border_color: '地圖邊線',
     size: '大小',
     bar_width: '柱寬',
     bar_gap: '柱間隔',

frontend/src/lang/zh.js

@@ -869,6 +869,7 @@ export default {
     color_technology: '科技',
     color_simple: '简洁',
     not_alpha: '不透明度',
+    area_border_color: '地图边线',
     size: '大小',
     bar_width: '柱宽',
     bar_gap: '柱间隔',

frontend/src/views/chart/chart/chart.js

@@ -23,7 +23,8 @@ export const DEFAULT_COLOR_CASE = {
   dimensionColor: '#000000',
   quotaColor: '#4E81BB',
   tableBorderColor: '#E6E7E4',
-  seriesColors: [] // 格式：{"name":"s1","color":"","isCustom":false}
+  seriesColors: [], // 格式：{"name":"s1","color":"","isCustom":false}
+  areaBorderColor: '#303133'
 }
 
 export const DEFAULT_COLOR_CASE_DARK = {
@@ -37,7 +38,8 @@ export const DEFAULT_COLOR_CASE_DARK = {
   dimensionColor: '#ffffff',
   quotaColor: '#4E81BB',
   tableBorderColor: '#CCCCCC',
-  seriesColors: [] // 格式：{"name":"s1","color":"","isCustom":false}
+  seriesColors: [], // 格式：{"name":"s1","color":"","isCustom":false}
+  areaBorderColor: '#EBEEF5'
 }
 export const DEFAULT_SIZE = {
   barDefault: true,
@@ -835,7 +837,15 @@ export const BASE_MAP = {
       type: 'map',
       map: 'MAP',
       roam: true,
-      data: []
+      data: [],
+      itemStyle: {
+        normal: {
+
+        },
+        emphasis: {
+
+        }
+      }
     }
   ]
 }

frontend/src/views/chart/chart/map/map.js

@@ -9,6 +9,9 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
     customAttr = JSON.parse(chart.customAttr)
     if (customAttr.color) {
       chart_option.color = customAttr.color.colors
+      if (customAttr.color.areaBorderColor) {
+        chart_option.series[0].itemStyle.normal.borderColor = customAttr.color.areaBorderColor
+      }
     }
     // tooltip
     if (customAttr.tooltip) {

frontend/src/views/chart/chart/util.js

@@ -2600,7 +2600,8 @@ export const TYPE_CONFIGS = [
       'color-selector': [
         'value',
         'custom',
-        'alpha'
+        'alpha',
+        'area-border-color'
       ],
       'label-selector': [
         'show',

frontend/src/views/chart/components/shape-attr/ColorSelector.vue

@@ -105,6 +105,10 @@
         <el-form-item v-show="showProperty('alpha')" :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="changeColorCase('alpha')" />
         </el-form-item>
+
+        <el-form-item v-show="showProperty('area-border-color') " :label="$t('chart.area_border_color')" class="form-item">
+          <el-color-picker v-model="colorForm.areaBorderColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('areaBorderColor')" />
+        </el-form-item>
       </el-form>
     </el-col>
   </div>