From f36a81d06eb73b2772f2ef87317cb7ac7026950e Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Thu, 23 Jun 2022 12:44:10 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=9C=B0=E5=9B=BE=E8=B0=83=E8=89=B2?=
 =?UTF-8?q?=E6=89=8B=E6=9F=84=E6=96=87=E5=AD=97=E8=B7=9F=E9=9A=8F=E4=BB=AA?=
 =?UTF-8?q?=E8=A1=A8=E6=9D=BF=E4=B8=BB=E9=A2=98=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/canvas/custom-component/UserView.vue   |  2 ++
 frontend/src/views/chart/chart/chart.js               |  1 +
 frontend/src/views/chart/chart/common/common.js       |  6 ++++++
 frontend/src/views/chart/chart/map/map.js             |  9 +++++++--
 .../src/views/chart/components/ChartComponent.vue     | 11 ++++++++++-
 frontend/src/views/chart/view/ChartEdit.vue           |  2 ++
 6 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index f326f4f2d2..39268cf1c8 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/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"
     />
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 4b68fdd3b6..468434eaae 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -774,6 +774,7 @@ export const BASE_MAP = {
     inRange: {
       color: ['lightskyblue', 'yellow', 'orangered']
     },
+    textStyle: {},
     right: 0
   },
   series: [
diff --git a/frontend/src/views/chart/chart/common/common.js b/frontend/src/views/chart/chart/common/common.js
index e1e5de1641..f8b97be386 100644
--- a/frontend/src/views/chart/chart/common/common.js
+++ b/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)
+}
diff --git a/frontend/src/views/chart/chart/map/map.js b/frontend/src/views/chart/chart/map/map.js
index 4338bb9d13..4dbf401587 100644
--- a/frontend/src/views/chart/chart/map/map.js
+++ b/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]
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index 4307620d2d..0415f323cd 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/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) {
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 3712ed5406..14ab18cc16 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/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