update

pages/index/components/monthCharts.vue

@@ -88,6 +88,7 @@ export default {
       uni.canvasToTempFilePath({
         canvasId:id,
         complete:(res)=>{
+          console.log('res',res)
           if (res.tempFilePath){
             uni.getFileSystemManager().readFile({
               filePath: res.tempFilePath,

pages/revenue/component/otherCharts.vue

@@ -1,113 +1,123 @@
 <template>
-    <view style="width: 128rpx;height: 128rpx">
-      <image v-if="preferPath" style="width: 128rpx;height: 128rpx" :src="preferPath"></image>
-        <canvas v-else style="width: 128rpx;height: 128rpx" canvas-id="month" id="month"/>
-    </view>
+  <view class="main">
+    <image v-if="preferPath" style="width: 128rpx;height: 128rpx" :src="preferPath"></image>
+    <canvas v-else class="month" canvas-id="month" id="month"/>
+  </view>
 </template>
 
 <script>
 import uCharts from '@/components/u-charts.js';
-
 var uChartsInstance = {};
 export default {
-    name: "OtherCharts",
-    data() {
-        return {
-          preferPath:''
-        }
-    },
-    props: {
-        success: {
-            type: Number,
-            default: 0
-        },
-        colorList:{
-            type: Array,
-            default:[]
-        }
-    },
-    watch: {
-        success: {
-            handler(value) {
-                console.log('value111', value)
-                let success = Number(value) > 100 ? 100 : Number(value)
-                let error = Number(100 - value) < 0 ? 0 : Number(100 - value)
-                let res = {
-                    series: [{
-                        data: [{name: '已完成', value: success}, {name: '未完成', value: error}]
-                    }]
-                }
-                console.log('res',res)
-                this.drawCharts('month', res)
-            }
-        }
-    },
-    methods: {
-        drawCharts(id, data) {
-            const ctx = uni.createCanvasContext(id, this);
-            let _this = this
-            uChartsInstance[id] = new uCharts({
-                type: "ring",
-                context: ctx,
-                width: 64,
-                height: 64,
-                series: data.series,
-                animation: false,
-                rotate: false,
-                rotateLock: false,
-                background: "#FFFFFF",
-                color: _this.colorList,
-                padding: [0,0,0,0],
-                dataLabel: false,
-                enableScroll: false,
-                legend: {
-                    show: false,
-                    position: "right",
-                    lineHeight: 25
-                },
-                title: {
-                    name: "完成率",
-                    fontSize: 12,
-                    color: "#A69E9F"
-                },
-                extra: {
-                    ring: {
-                        ringWidth: 8,
-                        activeOpacity: 0.5,
-                        activeRadius: 10,
-                        offsetAngle: -90,
-                        labelWidth: 0,
-                        border: false,
-                        borderWidth: 3,
-                        customRadius: 32,
-                        borderColor: "#FFFFFF"
-                    }
-                }
-            });
-          setTimeout( ()=>{
-            this.canvasToTempImage('month')
-          },100)
-        },
-      canvasToTempImage(id){
-        uni.canvasToTempFilePath({
-          canvasId:id,
-          complete:(res)=>{
-            if (res.tempFilePath){
-              uni.getFileSystemManager().readFile({
-                filePath: res.tempFilePath,
-                encoding: 'base64',
-                success: res => {
-                  let base64 = 'data:image/png;base64,' + res.data;
-                  this.preferPath = base64
-                }
-              })
-            }
-          }
-        },this)
-      },
+  name: "otherCharts",
+  data(){
+    return {
+      preferPath:''
     }
+  },
+  props:{
+    success:{
+      type: Number,
+      default: 0
+    },
+    colorList:{
+      type: Array,
+      default:[]
+    }
+  },
+  watch:{
+    success:{
+      handler(value){
+        this.preferPath = ''
+        console.log('value111',value)
+        let success = Number(value)>100?100:Number(value)
+        let error = Number(100 - value)<0?0:Number(100 - value)
+        let res = {
+          series:[{
+            data:[{name:'已完成',value:success},{name:'未完成',value:error}]
+          }]
+        }
+
+        this.drawCharts('month',res)
+      }
+    }
+  },
+  methods:{
+    drawCharts(id,data){
+      const ctx = uni.createCanvasContext(id, this);
+      let _this = this
+      uChartsInstance[id] = new uCharts({
+        type: "ring",
+        context: ctx,
+        width: 64,
+        height: 64,
+        series: data.series,
+        animation: false,
+        rotate: false,
+        rotateLock: false,
+        background: "#FFFFFF",
+        color: _this.colorList,
+        padding: [0,0,0,0],
+        dataLabel: false,
+        enableScroll: false,
+        legend: {
+          show: false,
+          position: "right",
+          lineHeight: 25
+        },
+        title: {
+          name: "完成率",
+          fontSize: 12,
+          color: "#A69E9F"
+        },
+        extra: {
+          ring: {
+            ringWidth: 8,
+            activeOpacity: 0.5,
+            activeRadius: 10,
+            offsetAngle: -90,
+            labelWidth: 0,
+            border: false,
+            borderWidth: 3,
+            customRadius: 32,
+            borderColor: "#FFFFFF"
+          }
+        }
+      });
+      setTimeout( ()=>{
+        _this.canvasToTempImage('month')
+      },500)
+    },
+    canvasToTempImage(id){
+      let _this = this
+      uni.canvasToTempFilePath({
+        canvasId:id,
+        complete:(res)=>{
+          console.log('res',res)
+          if (res.tempFilePath){
+            uni.getFileSystemManager().readFile({
+              filePath: res.tempFilePath,
+              encoding: 'base64',
+              success: res => {
+                let base64 = 'data:image/png;base64,' + res.data;
+                _this.preferPath = base64
+              }
+            })
+          }
+        }
+      },_this)
+    },
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+.main{
+  width: 128rpx;
+  height: 128rpx;
+  .month{
+    width: 128rpx;
+    height: 128rpx;
+  }
+}
 </style>

pages/revenue/component/yearCharts.vue

@@ -1,7 +1,7 @@
 <template>
   <view style="width: 68rpx;height: 68rpx">
     <image v-if="preferPath" style="width: 68rpx;height: 68rpx" :src="preferPath"></image>
-    <canvas v-else style="width: 68rpx;height: 68rpx" canvas-id="month" id="month"/>
+    <canvas  v-else style="width: 68rpx;height: 68rpx" canvas-id="month" id="month"/>
   </view>
 </template>
 
@@ -76,10 +76,12 @@ export default {
         }
       });
       setTimeout( ()=>{
-        this.canvasToTempImage('month')
-      },100)
+        console.log('变成图片')
+        _this.canvasToTempImage('month')
+      },500)
     },
     canvasToTempImage(id){
+      let _this = this
       uni.canvasToTempFilePath({
         canvasId:id,
         complete:(res)=>{
@@ -89,12 +91,13 @@ export default {
               encoding: 'base64',
               success: res => {
                 let base64 = 'data:image/png;base64,' + res.data;
-                this.preferPath = base64
+                _this.preferPath = base64
+                console.log('this.preferPath',_this.preferPath)
               }
             })
           }
         }
-      },this)
+      },_this)
     },
   }
 }