feat: 仪表盘刻度大小自适应

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

@@ -88,29 +88,66 @@ export function baseGaugeOption(chart_option, chart, scale = 1) {
             show: false
           }
           chart_option.series[0].axisTick = {
-            splitNumber: getScaleValue(5, scale), // TODO 刻度间隔数
-            length: getScaleValue(10, scale), // TODO 子刻度线长度
+            splitNumber: getScaleValue(5, scale), // 刻度间隔数
+            length: getScaleValue(10, scale), // 子刻度线长度
             lineStyle: {
               color: 'auto',
-              width: getScaleValue(2, scale) // TODO 子刻度线宽度
+              width: getScaleValue(2, scale) // 子刻度线宽度
             }
           }
           chart_option.series[0].splitLine = {
-            length: getScaleValue(18, scale), // TODO 刻度线长度
+            length: getScaleValue(18, scale), // 刻度线长度
             lineStyle: {
               color: 'auto',
-              width: getScaleValue(2, scale) // TODO 刻度线宽度
+              width: getScaleValue(2, scale) // 刻度线宽度
             }
           }
           chart_option.series[0].axisLabel = {
             color: 'auto',
-            distance: getScaleValue(20, scale), // TODO 刻度值文字里刻度线距离
-            fontSize: getScaleValue(20, scale)// TODO 刻度值字体大小
+            distance: getScaleValue(20, scale), // 刻度值文字里刻度线距离
+            fontSize: getScaleValue(20, scale)// 刻度值字体大小
           }
+        } else {
+          chart_option.series[0].axisTick = {
+            splitNumber: getScaleValue(5, scale), // 刻度间隔数
+            length: getScaleValue(10, scale), // 子刻度线长度
+            lineStyle: {
+              width: getScaleValue(2, scale) // 子刻度线宽度
+            }
+          }
+          chart_option.series[0].splitLine = {
+            length: getScaleValue(18, scale), // 刻度线长度
+            lineStyle: {
+              width: getScaleValue(2, scale) // 刻度线宽度
+            }
+          }
+          chart_option.series[0].axisLabel = {
+            distance: getScaleValue(20, scale), // 刻度值文字里刻度线距离
+            fontSize: getScaleValue(20, scale)// 刻度值字体大小
+          }
+        }
+      } else {
+        chart_option.series[0].axisTick = {
+          splitNumber: getScaleValue(5, scale), // 刻度间隔数
+          length: getScaleValue(10, scale), // 子刻度线长度
+          lineStyle: {
+            width: getScaleValue(2, scale) // 子刻度线宽度
+          }
+        }
+        chart_option.series[0].splitLine = {
+          length: getScaleValue(18, scale), // 刻度线长度
+          lineStyle: {
+            width: getScaleValue(2, scale) // 刻度线宽度
+          }
+        }
+        chart_option.series[0].axisLabel = {
+          distance: getScaleValue(20, scale), // 刻度值文字里刻度线距离
+          fontSize: getScaleValue(12, scale)// 刻度值字体大小
         }
       }
     }
   }
+  console.log(chart_option.series[0])
   // console.log(chart_option);
   componentStyle(chart_option, chart)
   return chart_option

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

@@ -77,20 +77,20 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
     axis: {
       label: {
         style: {
-          fontSize: getScaleValue(14, scale) // TODO 刻度值字体大小
+          fontSize: getScaleValue(14, scale) // 刻度值字体大小
         }
       },
       tickLine: {
-        length: getScaleValue(12, scale) * -1, // TODO 刻度线长度
+        length: getScaleValue(12, scale) * -1, // 刻度线长度
         style: {
-          lineWidth: getScaleValue(1, scale)// TODO 刻度线宽度
+          lineWidth: getScaleValue(1, scale)// 刻度线宽度
         }
       },
       subTickLine: {
         count: 4, // TODO 子刻度数
-        length: getScaleValue(6, scale) * -1, // TODO 子刻度线长度
+        length: getScaleValue(6, scale) * -1, // 子刻度线长度
         style: {
-          lineWidth: getScaleValue(1, scale)// TODO 子刻度线宽度
+          lineWidth: getScaleValue(1, scale)// 子刻度线宽度
         }
       }
     }
@@ -114,11 +114,21 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
       },
       pin: {
         style: {
-          stroke: theme.styleSheet.paletteQualitative10[index % theme.styleSheet.paletteQualitative10.length]
+          stroke: theme.styleSheet.paletteQualitative10[index % theme.styleSheet.paletteQualitative10.length],
+          r: getScaleValue(10, scale)
+        }
+      }
+    }
+  } else {
+    options.indicator = {
+      pin: {
+        style: {
+          r: getScaleValue(10, scale)
         }
       }
     }
   }
+  console.log(options.indicator.pin)
 
   // 开始渲染
   if (plot) {