✨ feat(charts): 优化 Canvas 2D 像素处理并增强调试日志

- 统一 pixelRatio 计算逻辑，为所有平台使用系统实际像素比以支持 Canvas 2D 清晰渲染
- 调整 Canvas 2D 的 width/height 属性为实际像素尺寸（逻辑像素 * pixelRatio），style 保持为逻辑像素尺寸
- 在 canvasProps 计算中添加详细的调试日志，输出尺寸配置和平台信息
- 增强柱状图数据点计算日志，展示第一个数据点的详细计算步骤和中间值

mini-ui-packages/mini-charts/src/components/BaseChart.tsx

@@ -60,8 +60,12 @@ export const BaseChart: React.FC<BaseChartProps> = (props) => {
    */
   const { cWidth, cHeight, actualPixelRatio } = useMemo(() => {
     const sysInfo = Taro.getSystemInfoSync();
-    // 支付宝小程序需要使用实际的 pixelRatio，其他平台使用 1
-    const pr = pixelRatio ?? (Taro.getEnv() === Taro.ENV_TYPE.ALIPAY ? sysInfo.pixelRatio : 1);
+    console.debug('sysInfo.pixelRatio', sysInfo.pixelRatio)
+    // Canvas 2D 需要使用实际的 pixelRatio 来匹配设备像素
+    // 这样绘制的内容才不会模糊或被放大
+    const pr = pixelRatio ?? sysInfo.pixelRatio;
+    // width 和 height 是逻辑像素（CSS 像素）
+    // Canvas 2D 的实际像素尺寸 = 逻辑像素 * pixelRatio
     const cw = width ?? pr * sysInfo.windowWidth;
     const ch = height ?? (500 / 750 * cw);
     return { cWidth: cw, cHeight: ch, actualPixelRatio: pr };
@@ -71,6 +75,15 @@ export const BaseChart: React.FC<BaseChartProps> = (props) => {
    * Canvas props 根据 platform 动态计算
    */
   const canvasProps = useMemo(() => {
+    console.debug('[BaseChart] Canvas 尺寸配置:', {
+      inputWidth: width,
+      inputHeight: height,
+      cWidth,
+      cHeight,
+      actualPixelRatio,
+      platform: Taro.getEnv()
+    });
+
     if (Taro.getEnv() === Taro.ENV_TYPE.ALIPAY) {
       return {
         width: String(cWidth),
@@ -78,10 +91,15 @@ export const BaseChart: React.FC<BaseChartProps> = (props) => {
         style: { width: '100%', height: '100%' }
       };
     }
+    // Canvas 2D API:
+    // - width/height 属性：实际像素尺寸（逻辑像素 * pixelRatio），需要转为字符串
+    // - style.width/style.height：CSS 显示尺寸（逻辑像素）
     return {
+      width: String(cWidth * actualPixelRatio),
+      height: String(cHeight * actualPixelRatio),
       style: { width: `${cWidth}px`, height: `${cHeight}px` }
     };
-  }, [cWidth, cHeight]);
+  }, [cWidth, cHeight, actualPixelRatio]);
 
   /**
    * 初始化图表实例

mini-ui-packages/mini-charts/src/lib/charts-data/basic-charts.ts

@@ -392,13 +392,28 @@ export function getColumnDataPoints(
       point.y = opts.height - height - opts.area[2];
 
       if (index === 0) {
-        console.debug('[getColumnDataPoints] 第一个数据点:', {
+        console.debug('[getColumnDataPoints] 第一个数据点计算详情:', {
           index,
           value,
+          process,
+          minRange,
+          maxRange,
+          validHeight,
+          heightCalculation: {
+            valueMinusMin: value * process - minRange,
+            maxMinusMin: maxRange - minRange,
+            heightFormula: `validHeight(${validHeight}) * (value*process(${value * process}) - minRange(${minRange})) / (maxRange(${maxRange}) - minRange(${minRange}))`,
+            result: height
+          },
+          pointYCalculation: {
+            optsHeight: opts.height,
+            height: height,
+            area2: opts.area[2],
+            formula: `opts.height(${opts.height}) - height(${height}) - opts.area[2](${opts.area[2]})`,
+            result: point.y
+          },
           pointX: point.x,
-          pointY: point.y,
-          height,
-          xAxisPoint: xAxisPoints[index]
+          pointY: point.y
         });
       }