fix(GaugeChart): update adaptive specification of cloud (#408)

Author: ader-h

src/components/GaugeChart/handleSeries.js

@@ -136,7 +136,7 @@ function handleTheme(iChartOption) {
 }
 
 // 配置仪表盘中心文本
-export function handleDetail(seriesUnit, text, data, sizeData,isAdaptive) {
+export function handleDetail(seriesUnit, text, data, sizeData, isAdaptive) {
   seriesUnit.detail.formatter =
     text.formatter ||
     function (value) {
@@ -148,7 +148,7 @@ export function handleDetail(seriesUnit, text, data, sizeData,isAdaptive) {
 
     };
   const space = isAdaptive ? sizeData.space : 24;
-  const valuePadding = isAdaptive ? sizeData.valuePadding : 0;
+  const valuePadding = isAdaptive ? (sizeData.valuePadding || 0) : 0;
   seriesUnit.detail.offsetCenter = text.offset || [0, 0];
   seriesUnit.detail.rich = {
     value: {
@@ -158,13 +158,13 @@ export function handleDetail(seriesUnit, text, data, sizeData,isAdaptive) {
       padding: [valuePadding, 0, 0, 0],
     },
     name: {
-      fontSize: sizeData.secondaryFontSize,
+      fontSize: sizeData.secondaryFontSize || sizeData.subFontSize,
       color: chartToken.descRichColor,
       padding: [space, 0, 0, 0],
     },
     unit: {
       color: chartToken.detailRichColor,
-      fontSize: sizeData.secondaryFontSize
+      fontSize: sizeData.secondaryFontSize || sizeData.subFontSize
     }
   };
   if (text?.formatterStyle) {
@@ -510,7 +510,7 @@ export function handleStatus(seriesUnit, iChartOption,radiusSize,text,sizeData,i
         padding: [unitPadding, 0, 30, 0],
       },
       name: {
-        fontSize: sizeData.secondaryFontSize,
+        fontSize: sizeData.secondaryFontSize || sizeData.subFontSize,
         color: chartToken.descRichColor,
         padding: [lineHeight + sizeData.space, 0, 0, 0],
 
@@ -593,7 +593,7 @@ function setSeriesInit(seriesUnit, iChartOption) {
  * @param {数据} data
  * @returns
  */
-export function handleSeries(iChartOption,optionColor,containerWidth,containerHeight) {
+export function handleSeries(iChartOption, optionColor, containerWidth, containerHeight) {
   const data = iChartOption.data.length ? iChartOption.data : [{value:0,name: ''}];
   const text = iChartOption.text || {};
   const axisLabelStyle = iChartOption.axisLabelStyle || {};
@@ -620,7 +620,7 @@ export function handleSeries(iChartOption,optionColor,containerWidth,containerHe
   // 不同尺寸下的fontSize
   const sizeData = handleSize(seriesUnit,radiusSize);
   // 中间文本
-  handleDetail(seriesUnit, text, data,sizeData);
+  handleDetail(seriesUnit, text, data, sizeData, iChartOption.adaptive);
   // 进度条宽度
   handleProgress(seriesUnit, iChartOption, data);
   handleAxisLine(seriesUnit, iChartOption);
@@ -634,15 +634,15 @@ export function handleSeries(iChartOption,optionColor,containerWidth,containerHe
   return series;
 }
 
-export function adapt(iChartOption,baseOption,containerWidth,containerHeight) {
+export function adapt(iChartOption, baseOption, containerWidth, containerHeight) {
   const theme = iChartOption?.theme;
   const adaptive =  iChartOption?.adaptive;
   const series = baseOption.series[0];
   const text = iChartOption.text || {};
   // 如果主题为华为云主题，并且开启配置项则开启自适应功能
-  if (theme && theme.indexOf('cloud')!=-1 && adaptive){
+  if (theme && theme.indexOf('cloud')!=-1 && adaptive) {
     // 初始值为宽度的80%
-    let initRadius = containerWidth * 0.8 / 2;
+    let initRadius = containerWidth * 0.8;
     let radius = Math.max(120,Math.min(200,Math.min(initRadius,containerHeight))) / 2;
     let mainText;
     const value = iChartOption?.data[0]?.value;
@@ -654,8 +654,7 @@ export function adapt(iChartOption,baseOption,containerWidth,containerHeight) {
     }
     const barWidth = baseOption.series[0]?.progress?.width;
     let sizeData = calculateFontSize(radius * 2,mainText,barWidth);
-    // 主副文本的间距固定为4
-    sizeData.space = 4;
+    
     // 主文本的上padding
     if(sizeData.mainFontSize === 48) {
       sizeData.valuePadding = 0;
@@ -667,10 +666,24 @@ export function adapt(iChartOption,baseOption,containerWidth,containerHeight) {
 
     baseOption.series[0].axisLabel.show = false;
     baseOption.series[0].splitLine.show = false;
-    // 中间文本
-    handleDetail(series, text, iChartOption.data,sizeData,true);
-    // 内置状态仪表盘
-    handleStatus(series, iChartOption,radius,text,sizeData,true);
+    // 非内置仪表盘 中间文本 主副文本的间距按需决定
+    if(radius*2 >= 200) {
+      sizeData.space = 24;
+    } else if (radius*2 < 200 && radius*2 >= 160) {
+      sizeData.space = 18;
+    } else {
+      sizeData.space = 10;
+    }
+    handleDetail(series, text, iChartOption.data, sizeData, true);
+    // 内置状态仪表盘 space沿用默认规则
+    if(radius*2 >= 200) {
+      sizeData.space = 28;
+    } else if (radius*2 < 200 && radius*2 >= 160) {
+      sizeData.space = 4;
+    } else {
+      sizeData.space = 0;
+    }
+    handleStatus(series, iChartOption, radius, text, sizeData, true);
     baseOption.series[0].radius = radius;
   }
 }