Merge pull request #2483 from dataease/pr@dev@perf_map

perf: 地图调色手柄文字跟随仪表板主题色

frontend/src/components/canvas/custom-component/UserView.vue

@@ -33,6 +33,7 @@
       :search-count="searchCount"
       :terminal-type="scaleCoefficientType"
       :scale="scale"
+      :theme-style="element.commonBackground"
       class="chart-class"
       @onChartClick="chartClick"
       @onJumpClick="jumpClick"
@@ -47,6 +48,7 @@
       :search-count="searchCount"
       :terminal-type="scaleCoefficientType"
       :scale="scale"
+      :theme-style="element.commonBackground"
       @onChartClick="chartClick"
       @onJumpClick="jumpClick"
     />

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

@@ -774,6 +774,7 @@ export const BASE_MAP = {
     inRange: {
       color: ['lightskyblue', 'yellow', 'orangered']
     },
+    textStyle: {},
     right: 0
   },
   series: [

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

@@ -306,3 +306,9 @@ const yExtFormatter = function(value) {
     return valueFormatter(value, yExtAxisLabelFormatter)
   }
 }
+
+export const reverseColor = colorValue => {
+  colorValue = '0x' + colorValue.replace(/#/g, '')
+  const str = '000000' + (0xFFFFFF - colorValue).toString(16)
+  return '#' + str.substring(str.length - 6, str.length)
+}

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

@@ -1,8 +1,8 @@
 // import { hexColorToRGBA } from '@/views/chart/chart/util'
-import { componentStyle } from '../common/common'
+import { componentStyle, reverseColor } from '../common/common'
 import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
 
-export function baseMapOption(chart_option, chart) {
+export function baseMapOption(chart_option, chart, themeStyle) {
   // 处理shape attr
   let customAttr = {}
   if (chart.customAttr) {
@@ -69,6 +69,11 @@ export function baseMapOption(chart_option, chart) {
         chart_option.visualMap.inRange.color = customAttr.color.colors
         chart_option.visualMap.inRange.colorAlpha = customAttr.color.alpha / 100
       }
+      if (themeStyle && themeStyle.backgroundColorSelect) {
+        const panelColor = themeStyle.color
+        const reverseValue = reverseColor(panelColor)
+        chart_option.visualMap.textStyle = { color: reverseValue }
+      }
       for (let i = 0; i < valueArr.length; i++) {
         const y = valueArr[i]
         y.name = chart.data.x[i]

frontend/src/views/chart/components/ChartComponent.vue

@@ -120,6 +120,11 @@ export default {
       type: Number,
       required: false,
       default: 1
+    },
+    themeStyle: {
+      type: Object,
+      required: false,
+      default: null
     }
   },
   data() {
@@ -279,7 +284,11 @@ export default {
       this.$echarts.registerMap('MAP', geoJson)
       // this.$echarts.getMap('MAP') || this.$echarts.registerMap('MAP', geoJson)
       const base_json = JSON.parse(JSON.stringify(BASE_MAP))
-      const chart_option = baseMapOption(base_json, chart)
+      let themeStyle = null
+      if (this.themeStyle) {
+        themeStyle = JSON.parse(JSON.stringify(this.themeStyle))
+      }
+      const chart_option = baseMapOption(base_json, chart, themeStyle)
       this.myEcharts(chart_option)
       const opt = this.myChart.getOption()
       if (opt && opt.series) {

frontend/src/views/chart/view/ChartEdit.vue

@@ -765,6 +765,7 @@
               :obj="{chart}"
               :chart-id="chart.id"
               :chart="chart"
+              :theme-style="curComponent.commonBackground"
               class="chart-class"
               @onChartClick="chartClick"
             />
@@ -774,6 +775,7 @@
               :chart-id="chart.id"
               :chart="chart"
               class="chart-class"
+              :theme-style="curComponent.commonBackground"
               @onChartClick="chartClick"
             />
             <chart-component-g2