canvas2d

src/project/weiyang/AppPatrolReport/Statistics.vue

@@ -121,13 +121,19 @@ export default {
 
           console.log(this.finishData)
           if (this.showFinish) {
+            this.$nextTick(() => {
               this.finishChartInit('finish')
+            })
           }
           if (this.trendData.length) {
+            this.$nextTick(() => {
               this.trendChartInit('trend')
+            })
           }
           if (this.typeData.length) {
+            this.$nextTick(() => {
               this.typeChartInit('type')
+            })
           }
 
         }
@@ -146,18 +152,74 @@ export default {
       })
     },
     finishChartInit(id) {
-      console.log(this.finishData)
+      // console.log(this.finishData)
-      var ctx = uni.createCanvasContext(id, this);
+      // var ctx = uni.createCanvasContext(id, this);
+      // uChartsInstance[id] = new uCharts({
+      //   type: "ring",
+      //   width: 350,
+      //   height: 250,
+      //   context: ctx,
+      //   series: [
+      //     {
+      //       data: this.finishData
+      //     }
+      //   ],
+      //   animation: true,
+      //   rotate: false,
+      //   rotateLock: false,
+      //   background: "#FFFFFF",
+      //   color: ['#7E94F6', '#85E3D5', '#2891FF'],
+      //   padding: [5,5,5,5],
+      //   dataLabel: true,
+      //   enableScroll: false,
+      //   legend: {
+      //     show: true,
+      //     position: "bottom",
+      //     lineHeight: 25
+      //   },
+      //   title: {
+      //     name: "办结率",
+      //     fontSize: 12,
+      //     color: "#222"
+      //   },
+      //   subtitle: {
+      //     name: this.finshNum+'%',
+      //     fontSize: 20,
+      //     color: "#5C8FFA"
+      //   },
+      //   extra: {
+      //     ring: {
+      //       ringWidth: 40,
+      //       activeOpacity: 0.5,
+      //       activeRadius: 10,
+      //       offsetAngle: 0,
+      //       labelWidth: 5,
+      //       border: false,
+      //       borderWidth: 2,
+      //       borderColor: "#FFFFFF"
+      //     }
+      //   }
+      // })
+
+      const query = uni.createSelectorQuery().in(this);
+      query.select('#' + id).fields({ node: true, size: true }).exec(res => {
+        console.log(res)
+        if (res[0]) {
+          const canvas = res[0].node;
+          const ctx = canvas.getContext('2d');
+          canvas.width = 350
+          canvas.height = 250
           uChartsInstance[id] = new uCharts({
             type: "ring",
+            context: ctx,
             width: 350,
             height: 250,
-        context: ctx,
             series: [
               {
                 data: this.finishData
               }
             ],
+            pixelRatio: this.pixelRatio,
             animation: true,
             rotate: false,
             rotateLock: false,
@@ -193,10 +255,22 @@ export default {
                 borderColor: "#FFFFFF"
               }
             }
-      })
+          });
+        }else{
+          console.error("[uCharts]: 未获取到 context");
+        }
+      });
     },
     trendChartInit(id) {
-      const ctx = uni.createCanvasContext(id, this);
+      // const ctx = uni.createCanvasContext(id, this);
+      const query = uni.createSelectorQuery().in(this);
+      query.select('#' + id).fields({ node: true, size: true }).exec(res => {
+        console.log(res)
+        if (res[0]) {
+          const canvas = res[0].node;
+          const ctx = canvas.getContext('2d');
+          canvas.width = 350
+          canvas.height = 250
           uChartsInstance[id] = new uCharts({
             type: "line",
             context: ctx,
@@ -236,9 +310,21 @@ export default {
               },
             }
           });
+        }else{
+          console.error("[uCharts]: 未获取到 context");
+        }
+      });
     },
     typeChartInit(id) {
-      var ctx = uni.createCanvasContext(id, this);
+      // var ctx = uni.createCanvasContext(id, this);
+      const query = uni.createSelectorQuery().in(this);
+      query.select('#' + id).fields({ node: true, size: true }).exec(res => {
+        console.log(res)
+        if (res[0]) {
+          const canvas = res[0].node;
+          const ctx = canvas.getContext('2d');
+          canvas.width = 350
+          canvas.height = 250
           uChartsInstance[id] = new uCharts({
             type: "ring",
             width: 350,
@@ -275,6 +361,10 @@ export default {
               }
             }
           })
+        }else{
+          console.error("[uCharts]: 未获取到 context");
+        }
+      });
     },
     selectStatus(e) {
       this.statusInfo.name = e[0].label
@@ -427,8 +517,6 @@ export default {
       height: 500px;
       padding: 0 32px;
       box-sizing: border-box;
-      position: relative;
-      z-index: 1;
     }
 
     .num {