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

src/components/other/index.vue

@@ -330,27 +330,20 @@
               </view>
               <canvas
                 class="charts"
+                type="2d"
                 :id="
                   'GdHQcFQYzLhfeEvZbEJnhDxJzBlbCxhE' +
                   String(doDev) +
                   String(prDev) +
                   String(dayDev)
                 "
-                :canvas-id="
+                @touchend="touchEnd"
-                  'GdHQcFQYzLhfeEvZbEJnhDxJzBlbCxhE' +
+                @touchstart="touchCandle"
-                  String(doDev) +
+                @touchmove="moveCandle"
-                  String(prDev) +
-                  String(dayDev)
-                "
-                @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 {
-      // 小程序环境
+      // 小程序环境 - 使用 canvas 2d 模式
-      console.log('📱 小程序环境，使用 canvasId 方式');
+      console.log('📱 小程序环境，使用 canvas 2d 获取 context');
       
-      uChartsOp.value[ids] = new uCharts({
+      // 通过 createSelectorQuery 获取 canvas 2d 节点
-        type: "line",
+      const query = Taro.createSelectorQuery();
-        canvasId: ids,
+      query.select('#' + ids)
-        canvas2d: false,
+        .fields({ node: true, size: true })
-        width: cWidth * pixelRatio,
+        .exec((res) => {
-        height: cHeight * pixelRatio,
+          console.log('📝 canvas 节点查询结果:', res);
-        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('✅ 小程序图表创建完成');
+          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('✅ 小程序图表创建完成');
+        });
     }
   });
 }