qdintc/fishery-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
tianyongbao
2026-01-18 23:42:16 +08:00
parent 314f060359
commit 2b60a33440
1 changed files with 107 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
src/components/other/index.vue
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,83 +1442,109 @@ function createCharts(x, series, ids) {
console.log('✅ H5 图表创建完成');
}, 300);
} else {
// 小程序环境
console.log('📱 小程序环境，使用 canvasId 方式');
// 小程序环境 - 使用 canvas 2d 模式
console.log('📱 小程序环境，使用 canvas 2d 获取 context');
uChartsOp.value[ids] = new uCharts({
type: "line",
canvasId: ids,
canvas2d: false,
width: cWidth * pixelRatio,
height: cHeight * pixelRatio,
categories: x,
series: series,
pixelRatio: pixelRatio,
dataPointShape: false,
animation: true,
background: "#FFFFFF",
color: ["#17B4B2", "#5470c6", "#fac858"],
padding: [15, 30, 35, 45],
enableScroll: false,
boundaryGap: "justify",
update: true,
legend: {
fontColor: "#222222",
itemGap: 10,
position: "top",
},
dataLabel: false,
xAxis: {
disableGrid: true,
axisLine: true,
type: "grid",
gridType: "dash",
itemCount: 0,
scrollShow: false,
scrollAlign: "left",
labelCount: 7,
rotateLabel: true,
rotateAngle: 25,
},
yAxis: {
disableGrid: false,
gridType: "dash",
tofix: 2,
},
extra: {
tooltip: {
showBox: true,
showArrow: true,
showCategory: true,
borderWidth: 0,
borderRadius: 0,
borderColor: "#000000",
borderOpacity: 0.7,
bgColor: "#000000",
bgOpacity: 0.7,
gridType: "solid",
dashLength: 4,
gridColor: "#CCCCCC",
boxPadding: 3,
fontSize: 13,
lineHeight: 20,
fontColor: "#FFFFFF",
legendShow: true,
legendShape: "auto",
splitLine: true,
labelBgColor: "#FFFFFF",
labelBgOpacity: 0.7,
labelFontColor: "#666666",
},
line: {
type: "curve",
width: 1,
activeType: "hollow",
},
},
});
console.log('✅ 小程序图表创建完成');
// 通过 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",
context: ctx,
width: cWidth * pixelRatio,
height: cHeight * pixelRatio,
categories: x,
series: series,
pixelRatio: pixelRatio,
dataPointShape: false,
animation: true,
background: "#FFFFFF",
color: ["#17B4B2", "#5470c6", "#fac858"],
padding: [15, 30, 35, 45],
enableScroll: false,
boundaryGap: "justify",
update: true,
legend: {
fontColor: "#222222",
itemGap: 10,
position: "top",
},
dataLabel: false,
xAxis: {
disableGrid: true,
axisLine: true,
type: "grid",
gridType: "dash",
itemCount: 0,
scrollShow: false,
scrollAlign: "left",
labelCount: 7,
rotateLabel: true,
rotateAngle: 25,
},
yAxis: {
disableGrid: false,
gridType: "dash",
tofix: 2,
},
extra: {
tooltip: {
showBox: true,
showArrow: true,
showCategory: true,
borderWidth: 0,
borderRadius: 0,
borderColor: "#000000",
borderOpacity: 0.7,
bgColor: "#000000",
bgOpacity: 0.7,
gridType: "solid",
dashLength: 4,
gridColor: "#CCCCCC",
boxPadding: 3,
fontSize: 13,
lineHeight: 20,
fontColor: "#FFFFFF",
legendShow: true,
legendShape: "auto",
splitLine: true,
labelBgColor: "#FFFFFF",
labelBgOpacity: 0.7,
labelFontColor: "#666666",
},
line: {
type: "curve",
width: 1,
activeType: "hollow",
},
},
});
console.log('✅ 小程序图表创建完成');
});
}
});
}