|
@@ -104,21 +104,33 @@ const BaseChartInner: React.FC<BaseChartProps> = (props) => {
|
|
|
const canvas = res[0].node;
|
|
const canvas = res[0].node;
|
|
|
const ctx = canvas.getContext('2d');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
|
|
|
|
- console.debug('[BaseChartOriginal2D] canvas.width', canvas.width);
|
|
|
|
|
- console.debug('[BaseChartOriginal2D] canvas.height', canvas.height);
|
|
|
|
|
-
|
|
|
|
|
// 将 Taro CanvasContext 转换为 uCharts 需要的 CanvasContext
|
|
// 将 Taro CanvasContext 转换为 uCharts 需要的 CanvasContext
|
|
|
const extendedCtx = ctx as ExtendedCanvasContext;
|
|
const extendedCtx = ctx as ExtendedCanvasContext;
|
|
|
|
|
|
|
|
- // Canvas 2D: 使用 canvas 的实际 width/height
|
|
|
|
|
- // 基础配置
|
|
|
|
|
|
|
+ // 获取设备像素比,用于高清屏适配
|
|
|
|
|
+ const pixelRatio = sysInfo.pixelRatio || 1;
|
|
|
|
|
+ console.debug('[BaseChart] pixelRatio', pixelRatio);
|
|
|
|
|
+ console.debug('[BaseChart] CSS 宽度 cw (逻辑像素)', cw);
|
|
|
|
|
+ console.debug('[BaseChart] CSS 高度 ch (逻辑像素)', ch);
|
|
|
|
|
+
|
|
|
|
|
+ // 方案 A:设置 Canvas 物理像素 = 逻辑像素 × pixelRatio
|
|
|
|
|
+ // 这样在高分屏上有足够的物理像素,图表更清晰
|
|
|
|
|
+ const physicalWidth = cw * pixelRatio;
|
|
|
|
|
+ const physicalHeight = ch * pixelRatio;
|
|
|
|
|
+ canvas.width = physicalWidth;
|
|
|
|
|
+ canvas.height = physicalHeight;
|
|
|
|
|
+ console.debug('[BaseChart] 设置后 canvas.width (物理像素)', canvas.width);
|
|
|
|
|
+ console.debug('[BaseChart] 设置后 canvas.height (物理像素)', canvas.height);
|
|
|
|
|
+
|
|
|
|
|
+ // u-charts 接收物理像素尺寸,pixelRatio 设为 1 避免双重缩放
|
|
|
const chartConfig: ChartsConfig = {
|
|
const chartConfig: ChartsConfig = {
|
|
|
type,
|
|
type,
|
|
|
context: extendedCtx,
|
|
context: extendedCtx,
|
|
|
categories,
|
|
categories,
|
|
|
series,
|
|
series,
|
|
|
- width: canvas.width,
|
|
|
|
|
- height: canvas.height,
|
|
|
|
|
|
|
+ width: physicalWidth, // 物理像素(等于 canvas.width)
|
|
|
|
|
+ height: physicalHeight, // 物理像素(等于 canvas.height)
|
|
|
|
|
+ pixelRatio: 1, // 设为 1,让 u-charts 知道这是最终物理像素
|
|
|
animation: true,
|
|
animation: true,
|
|
|
background: '#FFFFFF',
|
|
background: '#FFFFFF',
|
|
|
color: ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444'],
|
|
color: ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444'],
|