Просмотр исходного кода

fix: 修复图表 X 轴刻度显示问题

- 修复 util.toFixed() 函数,正确处理 limit=0 的情况
- 添加 xAxis.splitNumber 配置支持,控制 X 轴刻度数量
- 统计页面图表配置优化,X 轴现在只显示必要的刻度值

问题:
- 修复前:X 轴显示 1、1.2、1.4、1.6、1.8、2(6个刻度)
- 修复后:X 轴显示 1、2(2个刻度)

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
yourname 3 недель назад
Родитель
Сommit
f2634f297b

+ 21 - 3
mini-ui-packages/mini-charts/src/components/BaseChart.tsx

@@ -133,14 +133,32 @@ const BaseChartInner: React.FC<BaseChartProps> = (props) => {
             enableScroll: false,
             legend: {},
             xAxis: {
-              disableGrid: true
+              disableGrid: true,
+              ...config.xAxis,  // 合并用户传入的 xAxis 配置
             },
             yAxis: {
-              data: [{ min: 0 }]
+              data: [{ min: 0 }],
+              ...config.yAxis,  // 合并用户传入的 yAxis 配置
             },
-            ...config,
+            extra: {
+              ...config.extra,  // 合并 extra 配置
+            },
+            ...config,  // 展开其他配置(排除 xAxis, yAxis, extra)
           };
 
+          // 再次覆盖 xAxis, yAxis, extra 确保用户配置优先
+          if (config.xAxis) {
+            console.log('[BaseChart] config.xAxis:', JSON.stringify(config.xAxis));
+            chartConfig.xAxis = { ...chartConfig.xAxis, ...config.xAxis };
+          }
+          console.log('[BaseChart] 最终传递给 uCharts 的 xAxis:', JSON.stringify(chartConfig.xAxis));
+          if (config.yAxis) {
+            chartConfig.yAxis = { ...chartConfig.yAxis, ...config.yAxis };
+          }
+          if (config.extra) {
+            chartConfig.extra = { ...chartConfig.extra, ...config.extra };
+          }
+
           chartRef.current = new uChartsClass(chartConfig);
           console.log('[BaseChart] 图表初始化完成:', canvasId, {
             cWidth, cHeight,

+ 2 - 1
mini-ui-packages/mini-charts/src/lib/config.ts

@@ -134,7 +134,8 @@ export interface Util {
  */
 export const util: Util = {
   toFixed: function toFixed(num: number, limit: number = 2): number | string {
-    limit = limit || 2;
+    // 修复: 当 limit 为 0 时,不应使用默认值 2
+    limit = limit !== undefined ? limit : 2;
     if (this.isFloat(num)) {
       num = Number(num.toFixed(limit));
     }

+ 8 - 2
mini-ui-packages/mini-charts/src/lib/data-processing/axis-calculator.ts

@@ -163,13 +163,19 @@ export function calXAxisData(
     eachSpacing: 0
   };
   result.ranges = getXAxisTextList(series, opts, config, columnstyle.type || '');
+  // 调试:打印 opts.xAxis 完整内容
+  console.log('[axis-calculator] opts.xAxis 完整内容:', JSON.stringify(opts.xAxis));
+  console.log('[axis-calculator] opts.xAxis.tofix:', (opts.xAxis as any)?.tofix);
+  // 支持 xAxis.tofix 配置来控制小数位数(默认 0 位,即整数)
+  const xAxisTofix = (opts.xAxis as any)?.tofix ?? 0;
+  console.log('[axis-calculator] 最终使用的 xAxisTofix:', xAxisTofix);
   result.rangesFormat = result.ranges.map(function(item) {
     const numItem = Number(item);
-    return String(util.toFixed(numItem, 2));
+    return String(util.toFixed(numItem, xAxisTofix));
   });
   const xAxisScaleValues = result.ranges.map(function(item) {
     const numItem = Number(item);
-    return util.toFixed(numItem, 2);
+    return util.toFixed(numItem, xAxisTofix);
   });
   Object.assign(result, getXAxisPoints(xAxisScaleValues as any, opts, config));
   const eachSpacing = result.eachSpacing;

+ 20 - 7
mini-ui-packages/mini-charts/src/lib/u-charts-original.ts

@@ -60,7 +60,11 @@ var assign = function(target, ...varArgs) {
 
 var util = {
   toFixed: function toFixed(num, limit) {
-    limit = limit || 2;
+    // 修复: 当 limit 为 0 时,不应使用默认值 2
+    limit = limit !== undefined ? limit : 2;
+    if (limit === 0) {
+      return String(Math.round(num));
+    }
     if (this.isFloat(num)) {
       num = num.toFixed(limit);
     }
@@ -1206,6 +1210,10 @@ function getXAxisTextList(series, opts, config, stack) {
 
 function calXAxisData(series, opts, config, context) {
   //堆叠图重算Y轴
+  console.log('[u-charts-original] calXAxisData ===== 开始 =====');
+  console.log('[u-charts-original] calXAxisData - opts.xAxis 完整内容:', JSON.stringify(opts.xAxis));
+  console.log('[u-charts-original] calXAxisData - opts.xAxis.tofix 原始值:', opts.xAxis.tofix);
+
   var columnstyle = assign({}, {
     type: ""
   }, opts.extra.bar);
@@ -1214,18 +1222,23 @@ function calXAxisData(series, opts, config, context) {
     xAxisHeight: opts.xAxis.lineHeight * opts.pix + opts.xAxis.marginTop * opts.pix
   };
   result.ranges = getXAxisTextList(series, opts, config, columnstyle.type);
+  console.log('[u-charts-original] calXAxisData - result.ranges 原始数据:', result.ranges);
+
+  // 支持 xAxis.tofix 配置来控制小数位数(默认 2 位小数,保持向后兼容)
+  var xAxisTofix = opts.xAxis.tofix !== undefined ? opts.xAxis.tofix : 2;
+  console.log('[u-charts-original] calXAxisData - 最终使用 xAxisTofix:', xAxisTofix);
+
   result.rangesFormat = result.ranges.map(function(item) {
-    //item = opts.xAxis.formatter ? opts.xAxis.formatter(item) : util.toFixed(item, 2);
-    item = util.toFixed(item, 2);
+    item = util.toFixed(item, xAxisTofix);
     return item;
   });
+  console.log('[u-charts-original] calXAxisData - result.rangesFormat 格式化后:', result.rangesFormat);
+
   var xAxisScaleValues = result.ranges.map(function(item) {
-    // 如果刻度值是浮点数,则保留两位小数
-    item = util.toFixed(item, 2);
-    // 若有自定义格式则调用自定义的格式化函数
-    //item = opts.xAxis.formatter ? opts.xAxis.formatter(Number(item)) : item;
+    item = util.toFixed(item, xAxisTofix);
     return item;
   });
+  console.log('[u-charts-original] calXAxisData - xAxisScaleValues 最终刻度值:', xAxisScaleValues);
   result = Object.assign(result, getXAxisPoints(xAxisScaleValues, opts, config));
   // 计算X轴刻度的属性譬如每个刻度的间隔,刻度的起始点\结束点以及总长
   var eachSpacing = result.eachSpacing;

+ 12 - 6
mini/src/pages/yongren/statistics/index.tsx

@@ -364,6 +364,10 @@ const Statistics: React.FC<StatisticsProps> = () => {
                     config={{
                       color: ['#3b82f6'],
                       dataLabel: true,
+                      yAxis: {
+                        min: 0,
+                        format: (val: number) => Number.isInteger(val) ? val.toString() : '',
+                      },
                     }}
                   />
                 </View>
@@ -395,6 +399,10 @@ const Statistics: React.FC<StatisticsProps> = () => {
                     config={{
                       color: ['#3b82f6', '#ec4899'],
                       dataLabel: true,
+                      yAxis: {
+                        min: 0,
+                        format: (val: number) => Number.isInteger(val) ? val.toString() : '',
+                      },
                     }}
                   />
                 </View>
@@ -477,9 +485,8 @@ const Statistics: React.FC<StatisticsProps> = () => {
                         dataLabel: true,
                         xAxis: {
                           disableGrid: true,
-                          // 确保横轴刻度为整数
-                          min: 0,
-                          format: (val: number) => Number.isInteger(val) ? val.toString() : '',
+                          tofix: 0,  // X 轴显示整数(人数)
+                          splitNumber: 1,  // 只生成 2 个刻度(min 和 max)
                         },
                         extra: {
                           bar: {
@@ -558,9 +565,8 @@ const Statistics: React.FC<StatisticsProps> = () => {
                         dataLabel: true,
                         xAxis: {
                           disableGrid: true,
-                          // 确保横轴刻度为整数
-                          min: 0,
-                          format: (val: number) => Number.isInteger(val) ? val.toString() : '',
+                          tofix: 0,  // X 轴显示整数(人数)
+                          splitNumber: 1,  // 只生成 2 个刻度(min 和 max)
                         },
                         extra: {
                           bar: {