refactor: 仪表盘可以根据画布缩放调整大小

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

@@ -31,6 +31,7 @@
       :track-menu="trackMenu"
       :search-count="searchCount"
       :terminal-type="scaleCoefficientType"
+      :scale="scale"
       @onChartClick="chartClick"
       @onJumpClick="jumpClick"
     />
@@ -41,6 +42,7 @@
       :chart="chart"
       :track-menu="trackMenu"
       :search-count="searchCount"
+      :scale="scale"
       @onChartClick="chartClick"
       @onJumpClick="jumpClick"
     />
@@ -177,7 +179,8 @@ export default {
       pre: null,
       preCanvasPanel: null,
       sourceCustomAttrStr: null,
-      sourceCustomStyleStr: null
+      sourceCustomStyleStr: null,
+      scale: 1
     }
   },
 
@@ -412,11 +415,11 @@ export default {
     },
     // 根据仪表板的缩放比例，修改视图内部参数
     mergeScale() {
-      const scale = Math.min(this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointHeight) * this.scaleCoefficient
+      this.scale = Math.min(this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointHeight) * this.scaleCoefficient
       const customAttrChart = JSON.parse(this.sourceCustomAttrStr)
       const customStyleChart = JSON.parse(this.sourceCustomStyleStr)
-      recursionTransObj(customAttrTrans, customAttrChart, scale, this.scaleCoefficientType)
+      recursionTransObj(customAttrTrans, customAttrChart, this.scale, this.scaleCoefficientType)
-      recursionTransObj(customStyleTrans, customStyleChart, scale, this.scaleCoefficientType)
+      recursionTransObj(customStyleTrans, customStyleChart, this.scale, this.scaleCoefficientType)
 
       // 移动端地图标签不显示
       if (this.chart.type === 'map' && this.scaleCoefficientType === 'mobile') {

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

@@ -1,8 +1,9 @@
 import { componentStyle } from '../common/common'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
+import { getScaleValue } from '@/components/canvas/utils/style'
 
-export function baseGaugeOption(chart_option, chart) {
+export function baseGaugeOption(chart_option, chart, scale = 1) {
   // 处理shape attr
   let customAttr = {}
   if (chart.customAttr) {
@@ -87,24 +88,24 @@ export function baseGaugeOption(chart_option, chart) {
             show: false
           }
           chart_option.series[0].axisTick = {
-            splitNumber: 5, // TODO 刻度间隔数
+            splitNumber: getScaleValue(5, scale), // TODO 刻度间隔数
-            length: 10, // TODO 子刻度线长度
+            length: getScaleValue(10, scale), // TODO 子刻度线长度
             lineStyle: {
               color: 'auto',
-              width: 2// TODO 子刻度线宽度
+              width: getScaleValue(2, scale) // TODO 子刻度线宽度
             }
           }
           chart_option.series[0].splitLine = {
-            length: 18, // TODO 刻度线长度
+            length: getScaleValue(18, scale), // TODO 刻度线长度
             lineStyle: {
               color: 'auto',
-              width: 2// TODO 刻度线宽度
+              width: getScaleValue(2, scale) // TODO 刻度线宽度
             }
           }
           chart_option.series[0].axisLabel = {
             color: 'auto',
-            distance: 20, // TODO 刻度值文字里刻度线距离
+            distance: getScaleValue(20, scale), // TODO 刻度值文字里刻度线距离
-            fontSize: 20// TODO 刻度值字体大小
+            fontSize: getScaleValue(20, scale)// TODO 刻度值字体大小
           }
         }
       }

frontend/src/views/chart/chart/gauge/gauge_antv.js

@@ -1,8 +1,9 @@
 import { getPadding, getTheme } from '@/views/chart/chart/common/common_antv'
 import { Gauge } from '@antv/g2plot'
 import { DEFAULT_SIZE, DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
+import { getScaleValue } from '@/components/canvas/utils/style'
 
-export function baseGaugeOptionAntV(plot, container, chart, action) {
+export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
   let max, labelContent, startAngel, endAngel
   // theme
   const theme = getTheme(chart)
@@ -76,20 +77,20 @@ export function baseGaugeOptionAntV(plot, container, chart, action) {
     axis: {
       label: {
         style: {
-          fontSize: 14// TODO 刻度值字体大小
+          fontSize: getScaleValue(14, scale) // TODO 刻度值字体大小
         }
       },
       tickLine: {
-        length: -12, // TODO 刻度线长度
+        length: getScaleValue(12, scale) * -1, // TODO 刻度线长度
         style: {
-          lineWidth: 1// TODO 刻度线宽度
+          lineWidth: getScaleValue(1, scale)// TODO 刻度线宽度
         }
       },
       subTickLine: {
         count: 4, // TODO 子刻度数
-        length: -6, // TODO 子刻度线长度
+        length: getScaleValue(6, scale) * -1, // TODO 子刻度线长度
         style: {
-          lineWidth: 1// TODO 子刻度线宽度
+          lineWidth: getScaleValue(1, scale)// TODO 子刻度线宽度
         }
       }
     }

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

@@ -115,6 +115,11 @@ export default {
     terminalType: {
       type: String,
       default: 'pc'
+    },
+    scale: {
+      type: Number,
+      required: false,
+      default: 1
     }
   },
   data() {
@@ -210,7 +215,7 @@ export default {
       } else if (chart.type === 'radar') {
         chart_option = baseRadarOption(JSON.parse(JSON.stringify(BASE_RADAR)), chart)
       } else if (chart.type === 'gauge') {
-        chart_option = baseGaugeOption(JSON.parse(JSON.stringify(BASE_GAUGE)), chart)
+        chart_option = baseGaugeOption(JSON.parse(JSON.stringify(BASE_GAUGE)), chart, this.scale)
       } else if (chart.type === 'scatter') {
         chart_option = baseScatterOption(JSON.parse(JSON.stringify(BASE_SCATTER)), chart, this.terminalType)
       } else if (chart.type === 'treemap') {

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

@@ -50,6 +50,11 @@ export default {
       type: Number,
       required: false,
       default: 0
+    },
+    scale: {
+      type: Number,
+      required: false,
+      default: 1
     }
   },
   data() {
@@ -153,7 +158,7 @@ export default {
       } else if (chart.type === 'radar') {
         this.myChart = baseRadarOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
       } else if (chart.type === 'gauge') {
-        this.myChart = baseGaugeOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
+        this.myChart = baseGaugeOptionAntV(this.myChart, this.chartId, chart, this.antVAction, this.scale)
       } else if (chart.type === 'pie') {
         this.myChart = basePieOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
       } else if (chart.type === 'pie-rose') {