大钱mr
大钱mr
  • 发布:2019-08-16 17:24
  • 更新:2021-08-24 11:39
  • 阅读:5052

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

分类:uni-app

注意::此方法本人仅用在微信小程序,其他端没有测试,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;  
    }
1 关注 分享
wanghexu

要回复文章请先登录注册

y***@yinjing.vip

y***@yinjing.vip

救救我 仪表盘没有出来
2021-08-24 11:39
wanghexu

wanghexu

优秀啊兄弟,我也遇到了这个问题
2021-07-24 11:20