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

如何解决在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;  
}  
 </style>
1 关注 分享
wanghexu

要回复文章请先登录注册

y***@yinjing.vip

y***@yinjing.vip

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

wanghexu

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