如何解决在uni-app使用mpvue-echarts报this.echarts.setCanvasCreator is not a function的错误

注意：:此方法本人仅用在微信小程序，其他端没有测试，h5测试用不了

1. 安装依赖
   npm install echarts mpvue-echarts

2. 找到mpvue-echarts模块里的echarts文件，找到相应代码覆盖即可，替换如下

   <template>  
   <canvas  
   v-if="canvasId"  
   class="ec-canvas"  
   :id="canvasId"  
   :canvasId="canvasId"  
   @touchstart="touchStart"  
   @touchmove="touchMove"  
   @touchend="touchEnd"  
   @error="error"  
   ></canvas>  
   </template>  
   <script>  
   import WxCanvas from "./wx-canvas";  
   export default {  
   props: {  
   canvasId: {  
     type: String,  
     default: "ec-canvas"  
   },  
   lazyLoad: {  
     type: Boolean,  
     default: false  
   },  
   disableTouch: {  
     type: Boolean,  
     default: false  
   },  
   throttleTouch: {  
     type: Boolean,  
     default: false  
   }  
   },  
   // #ifdef H5  
   mounted() {  
   if (!this.lazyLoad) this.init();  
   },  
   // #endif  
   // #ifndef H5  
   onReady() {  
   if (!this.lazyLoad) this.init();  
   },  
   // #endif  
   methods: {  
   setChart(chart) {  
     this.chart = chart;  
   },  
   init() {  
     const { canvasId } = this;  
     this.ctx = wx.createCanvasContext(canvasId, this);  
     this.canvas = new WxCanvas(this.ctx, canvasId);  
     const query = wx.createSelectorQuery().in(this);  
     query  
       .select(`#${canvasId}`)  
       .boundingClientRect(res => {  
         if (!res) {  
           setTimeout(() => this.init(), 50);  
           return;  
         }  
         this.$emit("onInit", {  
           width: res.width,  
           height: res.height  
         });  
       })  
       .exec();  
   },  
   canvasToTempFilePath(opt) {  
     const { canvasId } = this;  
     this.ctx.draw(true, () => {  
       wx.canvasToTempFilePath({  
         canvasId,  
         ...opt  
       });  
     });  
   },  
   touchStart(e) {  
     const { disableTouch, chart } = this;  
     if (disableTouch || !chart || !e.mp.touches.length) return;  
     const touch = e.mp.touches[0];  
     chart._zr.handler.dispatch("mousedown", {  
       zrX: touch.x,  
       zrY: touch.y  
     });  
     chart._zr.handler.dispatch("mousemove", {  
       zrX: touch.x,  
       zrY: touch.y  
     });  
   },  
   touchMove(e) {  
     const { disableTouch, throttleTouch, chart, lastMoveTime } = this;  
     if (disableTouch || !chart || !e.mp.touches.length) return;  
     if (throttleTouch) {  
       const currMoveTime = Date.now();  
       if (currMoveTime - lastMoveTime < 240) return;  
       this.lastMoveTime = currMoveTime;  
     }  
     const touch = e.mp.touches[0];  
     chart._zr.handler.dispatch("mousemove", {  
       zrX: touch.x,  
       zrY: touch.y  
     });  
   },  
   touchEnd(e) {  
     const { disableTouch, chart } = this;  
     if (disableTouch || !chart) return;  
     const touch = e.mp.changedTouches ? e.mp.changedTouches[0] : {};  
     chart._zr.handler.dispatch("mouseup", {  
       zrX: touch.x,  
       zrY: touch.y  
     });  
     chart._zr.handler.dispatch("click", {  
       zrX: touch.x,  
       zrY: touch.y  
     });  
   }  
   }  
   };  
   </script>  
   <style scoped>  
   .ec-canvas {  
   width: 100%;  
   height: 100%;  
   flex: 1;  
   }  
   </style>

   3.图表示例文件

   <template>  
   <view class="materials">  
   <view class="echarts-wrap">  
     <mpvue-echarts class="ec-canvas" @onInit="onInit" canvasId="demo-canvas" ref="chart1" />  
   </view>  
   <button @click="changeChart">更改</button>  
   </view>  
   </template>  
   
   <script>  
   import * as echarts from "echarts/dist/echarts.min";  
   import mpvueEcharts from "mpvue-echarts";  
   function getDate(date) {  
   return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;  
   }  
   let chart1 = null;  
   export default {  
   components: {  
   mpvueEcharts  
   },  
   data() {  
   return {};  
   },  
   onReady() {},  
   methods: {  
   changeChart() {  
     chart1.setOption(this.getOptions(10, 30));  
   },  
   getOptions(nan, nv) {  
     return {  
       title: {  
         text: "性别比例",  
         x: "center",  
         textStyle: {  
           fontSize: 16  
         }  
       },  
       backgroundColor: "#FFF",  
       tooltip: {  
         trigger: "axis",  
         axisPointer: {  
           // 坐标轴指示器，坐标轴触发有效  
           type: "shadow" // 默认为直线，可选为：'line' | 'shadow'  
         }  
       },  
       xAxis: { type: "value", splitNumber: 7 },  
       yAxis: { type: "category", show: false, data: [getDate(new Date())] },  
       series: [  
         {  
           name: "男",  
           type: "bar",  
           stack: "总量",  
           data: [nan],  
           barWidth: 50,  
           itemStyle: { normal: { color: "#00aaff" } }  
         },  
         {  
           name: "女",  
           type: "bar",  
           stack: "总量",  
           data: [nv],  
           itemStyle: { normal: { color: "#f4516c" } }  
         }  
       ]  
     };  
   },  
   onInit(e) {  
     let { width, height } = e;  
     let canvas = this.$refs.chart1.canvas;  
     echarts.setCanvasCreator(() => canvas);  
     chart1 = echarts.init(canvas, null, {  
       width: width,  
       height: height  
     });  
     canvas.setChart(chart1);  
     chart1.setOption(this.getOptions(50, 10));  
     this.$refs.chart1.setChart(chart1);  
   }  
   }  
   };  
   </script>  
   <style>  
   .echarts-wrap {  
   width: 100%;  
   height: 300px;  
   }  
   </style>