uniapp中使用mpvue-ehcarts遇到的问题

背景：在使用uniapp转微信小程序中需要图表展示，但是图表需要使用自定义图形。因此使用了mpvue-echarts插件。

1. 在uniapp小程序中报:this.echarts.setCanvasCreator 找不到响应的函数。

解决方法：替换最新的 mpvue-echarts 组件， 源码地址：链接: https://github.com/dcloudio/hello-uniapp/blob/master/components/mpvue-echarts/src/echarts.vue .拷贝代码替换掉mpvue-echarts目录下的echarts.js中的内容

由于修改的文件在node_modules中，会导致修改后文件只能在本机生效，其他同事或者用户依然会报错。以下有两种方法可解决：
  1.可以将node_modules中mpvue-echarts文件拷贝到项目的组件目录中，修改后，引用组件目录中的插件也可以，但是这种方法会造成打包后文件体积过大。故不推荐。
  2. 可以将node_modules中mpvue-echarts文件拷贝出来，按照上面的方法修改后，再上传到npm上，使用你修改后上传的插件即可。推荐该方法。

2.调用方式：

<template>
    // 调用方式
    <mpvue-echarts canvasId="chat1" @onInit="onInit" ref="chart1" class="ec_canvas"/>
</template>
// onInit方法

<script>
// diy_echart.js是在Echarts官网上按照所需要的模块定制的js,体积会小很多。
import echarts from './diy_echart.js'
import mpvueEcharts from 'uni-mpvue-echarts'
export default {
    //...

    methods: {
        onInit (e) {
            let canvas = this.$refs.chart1.canvas;  
            var option = {
            // 这里参考echarts官网option的配置
            };
            echarts.setCanvasCreator(() => canvas);  
            chart1 = echarts.init(canvas, null, {  
                width: 300,  //width和height根据自己的需求设置
                height: 300  
            });  
            canvas.setChart(chart1);

            chart1.setOption(option);  
            this.$refs.chart1.setChart(chart1);  
        }
    }

}

</script>

3. 小程序中，若包含原生组件如canvas的元素结构需要可滚动，则原生组件的所有父组件不能使用overflow:hidden或者设置height。否则在安卓上会有canvas悬浮在页面上，不跟随滚动的情况。

image

4. 在uniapp中使用mpvue-echarts组件，若在该组件外层有scroll-view，在安卓真机上会存在tooltip失效的情况。去掉scroll-view即可。

5. 在安卓真机上可能会出现cover-view不能覆盖原生的canvas的情况，原因是canvas比cover-view慢。将cover-view延时处理，或者在canvas绘制完成后，再显示cover-view内容即可。