在uniapp，微信小程序中使用echarts

一、使用npm或yarn安装mpvue-echars

npm install mpvue-echarts

二、可在echarts官网在线定制，下载echarts.min.js文件

ECharts 在线构建

三、在node_modules中找到mpvue-echarts，将src中的文件复制出来，作为组件，将第二步下载的echarts.min.js放进去

 四、改写echarts.vue文件

这里我直接把我项目中的代码放上来了

<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';  
import * as echarts from './echarts.min.js';
 
export default {  
  props: {  
    // echarts: {  
    //   required: true,  
    //   type: Object,  
    //   default() {  
    //     return echarts;  
    //   }  
    // },  
    onInit: {  
      required: true,  
      type: Function,  
      default: () => {}  
    },  
    canvasId: {  
      type: String,  
      default: 'ec-canvas'  
    },  
    lazyLoad: {  
      type: Boolean,  
      default: false  
    },  
    disableTouch: {  
      type: Boolean,  
      default: false  
    },  
    throttleTouch: {  
      type: Boolean,  
      default: false  
    }
  },  
  onReady() {  
    this.echarts = echarts;  
 
    if (!this.echarts) {  
      console.warn('组件需绑定 echarts 变量，例：<ec-canvas id="mychart-dom-bar" ' + 'canvas-id="mychart-bar" :echarts="echarts"></ec-canvas>');  
      return;  
    }  
 
    // console.log('echarts');  
    // console.log(this.onInit);  
 
    if (!this.lazyLoad) this.init();  
  },  
  methods: {  
    init() {  
      const version = wx.version.version.split('.').map(n => parseInt(n, 10));  
      const isValid = version[0] > 1 || (version[0] === 1 && version[1] > 9) || (version[0] === 1 && version[1] === 9 && version[2] >= 91);  
      if (!isValid) {  
        console.error('微信基础库版本过低，需大于等于 1.9.91。' + '参见：https://github.com/ecomfe/echarts-for-weixin' + '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82');  
        return;  
      }  
 
      if (!this.onInit) {  
        console.warn('请传入 onInit 函数进行初始化');  
        return;  
      }  
 
      const canvasId = this.canvasId;  
      this.ctx = wx.createCanvasContext(canvasId,this);  
 
      const canvas = new WxCanvas(this.ctx, canvasId);  
 
      this.echarts.setCanvasCreator(() => canvas);  
 
      const query = wx.createSelectorQuery().in(this);  
      query  
        .select(`#${canvasId}`)  
        .boundingClientRect(res => {  
          if (!res) {  
            //setTimeout(() => this.init(), 200);  
            return;  
          }  
 
          this.chart = this.onInit(canvas, res.width, 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>

五、引入该组件到页面中

import mpvueEcharts from "./mpvue-echarts/echarts"
import echarts from "./mpvue-echarts/echarts.min"

<mpvue-echarts id="order" canvasId="order" ref="order" :onInit="initOrder">
</mpvue-echarts>

六、在onInit回调中将echarts图标的参数以及数据渲染出来

initOrder(canvas, width, height) {
    let echar = echarts.init(canvas, null, {
        width: width,
        height: height
    });
    canvas.setChart(echar)
    // 此处为配置以及数据，可在echarts官网将图表绘制完成后，复制在此处
    let option = {} 
    echar.setOption(option)
    return echar
}

七、注意事项

1.由于this指向问题，在上图initOrder中使用this会报错，如果需要将option的数据放在函数外，可以单独创建一个js文件，放入option数据，再使用import { option } from 'xxxx'引入使用。

2.如果需要获取后台数据，使用async，await，获取到数据后放入option

3.由于该组件是在uniapp开发使用，语法是vue,如果是使用微信开发者工具直接开发，需要将本文中HTML语法，data中数据的改，查，以及函数的使用改为小程序的写法。

八、总结

前端内容更新速度都很快，也许目前能使用，可能几年，几个月甚至几天就行不通了，如果本文能够帮助到大家，希望可以得到一个关注+赞，如果有什么问题，也可以在下方留下评论。有时间就会回复。本人经验不足，有什么错误，不足之处，可以在评论区指出。