From ded3fb29cb15f8725d2d7dfb84ef462b396aa014 Mon Sep 17 00:00:00 2001
From: junjun <junjie.xia@fit2cloud.com>
Date: Wed, 20 Apr 2022 13:01:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BB=AA=E8=A1=A8=E7=9B=98=E5=88=BB?=
 =?UTF-8?q?=E5=BA=A6=E5=A4=A7=E5=B0=8F=E8=87=AA=E9=80=82=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/chart/chart/gauge/gauge.js | 51 ++++++++++++++++---
 .../src/views/chart/chart/gauge/gauge_antv.js | 22 +++++---
 2 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/frontend/src/views/chart/chart/gauge/gauge.js b/frontend/src/views/chart/chart/gauge/gauge.js
index 921e315bfc..93154c5d84 100644
--- a/frontend/src/views/chart/chart/gauge/gauge.js
+++ b/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
diff --git a/frontend/src/views/chart/chart/gauge/gauge_antv.js b/frontend/src/views/chart/chart/gauge/gauge_antv.js
index ceedf38cd6..40a35773ee 100644
--- a/frontend/src/views/chart/chart/gauge/gauge_antv.js
+++ b/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) {