fix(JadeJueChart)：modify the style specifications (#151)

Guanmingjiang · web-flow · commit 73ba1fb631c9 · 2025-02-11T18:46:22.000+08:00
diff --git a/doc/api/JadeJueChart/index.js b/doc/api/JadeJueChart/index.js
@@ -18,6 +18,7 @@ import barMinRatioMd from './barMinRatio?raw';
 import { angleAxis, angleAxisMd } from '../common/angleAxis';
 import { radiusAxis, radiusAxisMd } from '../common/radiusAxis';
 import typeMd from './type.md?raw';
+import labelContentMd from './labelContent.md?raw';
 
 const data = {
     dataset: [
@@ -39,7 +40,8 @@ const data = {
         angleAxis,
         radiusAxis,
         event,
-        ['type', '设置玉玦图的类别', 'string', 'unset']
+        ['type', '设置玉玦图的类别', 'string', 'unset'],
+        ['labelContent', '设置玉玦图每个系列的展示文本', 'string', 'name']
     ],
     markdown: [
         themeMd,
@@ -60,7 +62,8 @@ const data = {
         angleAxisMd,
         radiusAxisMd,
         eventMd,
-        typeMd
+        typeMd,
+        labelContentMd
     ],
 };
 
diff --git a/doc/api/JadeJueChart/labelContent.md b/doc/api/JadeJueChart/labelContent.md
@@ -0,0 +1,7 @@
+默认值：`name`
+
+可选值：`name`，`nameWithRatio`。
+
+说明：设置玉玦图每个系列的展示文本，当存在radiusAxis.axisLabel.formatter，此属性失效。
+name：取data中的name字段。
+nameWidthRatio：玉玦图组件提供的可选formatter，将data中的nam字段与其占比拼接构成。
diff --git a/public/option/JadeJueChart/JadeJueChart-1.js b/public/option/JadeJueChart/JadeJueChart-1.js
@@ -16,5 +16,6 @@ const option = {
 
       }
     }
-  }
+  },
+  labelContent: 'nameWithRatio'
 };
diff --git a/public/option/JadeJueChart/JadeJueChart-5.js b/public/option/JadeJueChart/JadeJueChart-5.js
@@ -46,4 +46,5 @@ const option = {
   // 自定义最大值，用于展示data中每项数据在最大值的占据比例，一般可取value最大值。
   // 未定义则data中每项数据的占比为其value值与总value值的比值。
   max: 120,
+  labelContent: 'nameWithRatio'
 };
diff --git a/src/components/JadeJueChart/handleSeries.js b/src/components/JadeJueChart/handleSeries.js
@@ -13,8 +13,10 @@ import { getColor } from '../../util/color';
 import cloneDeep from '../../util/cloneDeep';
 import { handleMinRatio } from './handleOption';
 import chartToken from './chartToken';
+import merge from '../../util/merge';
 
 function createSeries(iChartOption, baseOpt, sum, legendData) {
+  const { showBackground = true } = iChartOption;
   // 添加series中的数据
   let length = 0;
   iChartOption.data.forEach(dataItem => {
@@ -29,7 +31,7 @@ function createSeries(iChartOption, baseOpt, sum, legendData) {
         type: 'bar',
         data: '',
         stack: 'a',
-        roundCap: false,
+        roundCap: true,
         z: 2,
         coordinateSystem: 'polar',
       });
@@ -42,12 +44,17 @@ function createSeries(iChartOption, baseOpt, sum, legendData) {
       borderColor: chartToken.itemBorderColor,
       borderWidth: 2,
     };
-    if (index === 0) {
-      series.z = 1;
-    } else if (index === baseOpt.series.length - 1) {
-      series.z = 0;
-    } else {
-      series.roundCap = false;
+    switch (index) {
+      case 0:
+        series.z = 1;
+        break;
+      case baseOpt.series.length - 1:
+        series.z = 2;
+        break;
+      default:
+        series.z = 3;
+        series.roundCap = false;
+        break;
     }
   });
   // 将iChartOption的data数据依次赋给series
@@ -58,38 +65,81 @@ function createSeries(iChartOption, baseOpt, sum, legendData) {
       baseOpt.series[i].name = legendData[i];
     });
   }
+  if (showBackground) {
+    const placeHolderData = [];
+    iChartOption.data.forEach((_, index) => {
+      let typeSum = 0;
+      baseOpt.series.forEach((v) => {
+        typeSum += v.data[index].value;
+      });
+      placeHolderData.push({
+        type: 'stack背景占位',
+        value: baseOpt.angleAxis.sum - typeSum,
+        itemStyle: { color: chartToken.itemColor },
+        sum: 0
+      });
+    });
+    baseOpt.series.push({
+      type: 'bar',
+      data: placeHolderData,
+      stack: 'a',
+      roundCap: true,
+      z: 1,
+      coordinateSystem: 'polar',
+      silent: true,
+    });
+  }
 }
 
-const setRadiusAxis = (baseOpt, data, type) => {
+const setRadiusAxis = (baseOpt, data, type, iChartOption) => {
+  const { labelContent = 'name', showBackground = true } = iChartOption;
   baseOpt.radiusAxis.z = 10;
   baseOpt.radiusAxis.data = [];
   if (type === 'process') return; // 进度图不展示左侧文本
   data.forEach((item, index) => {
     baseOpt.radiusAxis.data.push(item.name);
   });
-
-  // if (type === 'base') {
-  //   baseOpt.radiusAxis.axisLabel.rich = {
-  //     value: {
-  //       color: chartToken.labelValueColor,
-  //       padding: [0, chartToken.labelPadding, 0, 0]
-  //     },
-  //     ratio: chartToken.labelRatioColor
-  //   };
-  //   baseOpt.radiusAxis.axisLabel.formatter = (params, index) => {
-  //     let value;
-  //     baseOpt.series[index].data.forEach((dataItem) => {
-  //       if (dataItem.name === params) {
-  //         value = dataItem.beforeChangeValue;
-  //       }
-  //     });
-  //     if (value === undefined) {
-  //       value = data[index].value;
-  //     }
-  //     const ratio = (value / baseOpt.angleAxis.sum * 100).toFixed(2) + '%';
-  //     return `{value|${value}}{ratio|${ratio}}`;
-  //   };
-  // }
+  const getRatio = (params) => {
+    const index = params[1];
+    let value = 0;
+    let ratio = 0;
+    if (iChartOption.type === 'stack') {
+      if (!showBackground) {
+        baseOpt.series.forEach(val => {
+          value += val.data[index].value;
+        });
+      } else {
+        baseOpt.series.slice(0, -1).forEach(val => {
+          value += val.data[index].value;
+        });
+      }
+    } else {
+      value = baseOpt.series[index].data[index].beforeChangeValue ?? baseOpt.series[index].data[index].value;
+    }
+    ratio = value / baseOpt.angleAxis.sum;
+    return ratio;
+  };
+  const iChartLabelFormatter = iChartOption?.radiusAxis?.axisLabel?.formatter;
+  if (iChartLabelFormatter) {
+    baseOpt.radiusAxis.axisLabel.formatter = (...params) => iChartLabelFormatter(...params, getRatio(params));
+  } else {
+    if (labelContent === 'name') {
+      return;
+    } else if (labelContent === 'nameWithRatio') {
+      const iChartLabelRich = iChartOption?.radiusAxis?.axisLabel?.rich ?? {};
+      const defaultLabelRich = {
+        name: {
+          color: chartToken.labelValueColor,
+          padding: [0, chartToken.labelPadding, 0, 0]
+        },
+        ratio: {
+          color: chartToken.labelRatioColor,
+        }
+      };
+      baseOpt.radiusAxis.axisLabel.rich = merge(defaultLabelRich, iChartLabelRich);
+      baseOpt.radiusAxis.axisLabel.formatter = (...params) => `{name|${params[0]}} {ratio|${(getRatio(params) * 100).toFixed(0) + '%'}}`;
+    }
+  }
 };
 
 // 配置玉玦图的seriesData数据（value,name,color）
@@ -147,64 +197,62 @@ export function setSeriesData(iChartOption, baseOpt) {
   handleMinRatio(iChartOption, baseOpt, type);
 
   // 配置展示每项data的名称,及显示层级
-  setRadiusAxis(baseOpt, data, type);
+  setRadiusAxis(baseOpt, data, type, iChartOption);
 
   if (type === 'process') {
     baseOpt.series.forEach((item) => {
       item.showBackground = showBackground;
     });
   } else {
-    data.forEach(dataItem => {
-      let sum = 0;
-      // data中的每项如果没有children
-      if (type === 'base') {
-        // 是否显示柱条背景样式---补全75%数据及颜色
-        if (showBackground) {
-          // 当数据全为0时，手动设置sum和max使其不为0，避免视图丢失
-          if (baseOpt.angleAxis.sum === 0) {
-            baseOpt.angleAxis.sum = 1;
-            baseOpt.angleAxis.max = 4 / 3;
-          }
-          const newData = cloneDeep(data);
-          newData.forEach(newItem => {
-            newItem.itemStyle = {
-              color: chartToken.itemColor,
-            };
-            newItem.value = baseOpt.angleAxis.sum - newItem.value;
-            newItem.sum = 0;
-          });
-          baseOpt.series[data.length] = {
-            type: 'bar',
-            data: newData,
-            stack: 'a',
-            z: 1,
-            roundCap,
-            coordinateSystem: 'polar',
-            // 关闭灰色进度鼠标hover事件
-            silent: true,
-          };
+    let sum = 0;
+    // data中的每项如果没有children
+    if (type === 'base') {
+      // 是否显示柱条背景样式---补全75%数据及颜色
+      if (showBackground) {
+        // 当数据全为0时，手动设置sum和max使其不为0，避免视图丢失
+        if (baseOpt.angleAxis.sum === 0) {
+          baseOpt.angleAxis.sum = 1;
+          baseOpt.angleAxis.max = 4 / 3;
         }
-      } else {
-        // data中的value是数组类型，处理数据;配置初始数据及颜色;获取图例type，后续赋给series
-        let legendData = [];
-        data.forEach(dataItem => {
-          dataItem.children.forEach(child => {
-            sum += child.value;
-          });
-        });
-        data.forEach(dataItem => {
-          dataItem.children.forEach(child => {
-            child.sum = sum;
-            legendData.push(child.type);
-          });
+        const newData = cloneDeep(data);
+        newData.forEach(newItem => {
+          newItem.itemStyle = {
+            color: chartToken.itemColor,
+          };
+          newItem.value = baseOpt.angleAxis.sum - newItem.value;
+          newItem.sum = 0;
         });
-        // 添加series中的数据
-        legendData = Array.from(new Set(legendData));
-        createSeries(iChartOption, baseOpt, sum, legendData);
-        // 配置图例颜色
-        baseOpt.color = color;
+        baseOpt.series[data.length] = {
+          type: 'bar',
+          data: newData,
+          stack: 'a',
+          z: 1,
+          roundCap,
+          coordinateSystem: 'polar',
+          // 关闭灰色进度鼠标hover事件
+          silent: true,
+        };
       }
-    });
+    } else {
+      // data中的value是数组类型，处理数据;配置初始数据及颜色;获取图例type，后续赋给series
+      let legendData = [];
+      data.forEach(dataItem => {
+        dataItem.children.forEach(child => {
+          sum += child.value;
+        });
+      });
+      data.forEach(dataItem => {
+        dataItem.children.forEach(child => {
+          child.sum = sum;
+          legendData.push(child.type);
+        });
+      });
+      // 添加series中的数据
+      legendData = Array.from(new Set(legendData));
+      createSeries(iChartOption, baseOpt, sum, legendData);
+      // 配置图例颜色
+      baseOpt.color = color;
+    }
   }
 }
 
diff --git a/src/feature/token/factory/chartsToken/JadeJueChart.js b/src/feature/token/factory/chartsToken/JadeJueChart.js
@@ -10,14 +10,14 @@
  *
  */
 function JadeJueChart(aliasToken) {
-  const { colorBorder, colorBgEmpty, colorLabel, colorTextSecondary, paddingLG } = aliasToken;
+  const { colorBorder, colorBgEmpty, colorLabel, colorTextSecondary, padding } = aliasToken;
 
   return {
     itemBorderColor: colorBorder,
     itemColor: colorBgEmpty,
     labelValueColor: colorTextSecondary,
     labelRatioColor: colorLabel,
-    labelPadding: paddingLG
+    labelPadding: padding
   };
 
 };

Original file line number	Diff line number	Diff line change
`@@ -16,5 +16,6 @@ const option = {`
`16`	`16`
`17`	`17`	`}`
`18`	`18`	`}`
`19`		`- }`
	`19`	`+ },`
	`20`	`+ labelContent: 'nameWithRatio'`
`20`	`21`	`};`