fix: 微信小程序曲线图不显示问题修复。

This commit is contained in:
tianyongbao
2026-01-18 23:42:16 +08:00
parent 314f060359
commit 2b60a33440

View File

@@ -330,27 +330,20 @@
</view>
<canvas
class="charts"
type="2d"
:id="
'GdHQcFQYzLhfeEvZbEJnhDxJzBlbCxhE' +
String(doDev) +
String(prDev) +
String(dayDev)
"
:canvas-id="
'GdHQcFQYzLhfeEvZbEJnhDxJzBlbCxhE' +
String(doDev) +
String(prDev) +
String(dayDev)
"
@TouchEnd="touchEnd"
@TouchStart="touchCandle"
@TouchMove="moveCandle"
@touchend="touchEnd"
@touchstart="touchCandle"
@touchmove="moveCandle"
:style="{
width: chartConf.cWidth,
width: chartConf.cWidth + 'px',
height: chartConf.cHeight + 'px',
}"
:ontouch="true"
:disableScroll="false"
></canvas>
<!-- <nut-empty description="暂无数据" v-show="chartsDatas.r.length == 0">
<template #image>
@@ -1449,13 +1442,38 @@ function createCharts(x, series, ids) {
console.log('✅ H5 图表创建完成');
}, 300);
} else {
// 小程序环境
console.log('📱 小程序环境,使用 canvasId 方式');
// 小程序环境 - 使用 canvas 2d 模式
console.log('📱 小程序环境,使用 canvas 2d 获取 context');
// 通过 createSelectorQuery 获取 canvas 2d 节点
const query = Taro.createSelectorQuery();
query.select('#' + ids)
.fields({ node: true, size: true })
.exec((res) => {
console.log('📝 canvas 节点查询结果:', res);
if (!res || !res[0] || !res[0].node) {
console.error('❌ 无法获取 canvas 节点');
return;
}
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
if (!ctx) {
console.error('❌ 无法获取 canvas context');
return;
}
// 设置 canvas 实际尺寸
canvas.width = cWidth * pixelRatio;
canvas.height = cHeight * pixelRatio;
console.log('✅ 获取 canvas 2d context 成功');
uChartsOp.value[ids] = new uCharts({
type: "line",
canvasId: ids,
canvas2d: false,
context: ctx,
width: cWidth * pixelRatio,
height: cHeight * pixelRatio,
categories: x,
@@ -1526,6 +1544,7 @@ function createCharts(x, series, ids) {
});
console.log('✅ 小程序图表创建完成');
});
}
});
}