uni-app引用Echarts的踩坑记录

在uni-app项目引用Echarts

effect.gif

demo附件： https://github.com/chellel/echarts-uniapp

按照 uni-app中使用Echarts的实践总结的步骤引用echarts
先在uni-app新建项目，然后在命令行管理中进入到该目录下，执行

npm init

然后安装依赖。

npm install echarts mpvue-echarts --save

将下载后的三个库从node_modules剪切到项目的根目录下。
开始在项目中使用echarts。
page/index/index.vue

第一个坑

出现报错： this.echarts.setCanvasCreator is not a function

image.png

尝试将manifest.json - 源码视图中的小程序配置usingComponents删除

 "mp-weixin": { /* 小程序特有相关 */
       "usingComponents":true
    }

修改为

 "mp-weixin": { /* 小程序特有相关 */
  }

停止微信开发者工具后重新运行，虽然显示图表，但是这不应该是正确的处理方式。
于是寻找另外一种解决办法。根据处理方法 #插件讨论# 【 ECharts页面模板 - DCloud 】APP中报错 this.echarts.setCanvasCreator is not a function，
替换最新的 mpvue-echarts 组件echarts.vue，源码地址：https://github.com/dcloudio/hello-uniapp/blob/master/components/mpvue-echarts/src/echarts.vue
替换后查看echarts.vue，可以看到init()通过$emit将onInit事件和数据发出

init() {
...
this.$emit('onInit', {
    width: res.width,
    height: res.height
});
...
},

因此在index.vue将

修改为

page/index/index.vue添加

methods:{
    initChart:initChart
}

修改initChart function

function initChart(e) {
        let {
            width,
            height
        } = e;
        
        let canvas = this.$refs.pieChart.canvas;
        echarts.setCanvasCreator(() => canvas);
        const chart = echarts.init(canvas, null, {
            width: width,
            height: height
        })
        canvas.setChart(chart)

        var option = {
            ...
        };
        chart.setOption(option)
        this.$refs.pieChart.setChart(chart)
        //return chart
    }

第二个坑

console不报错，但是页面也不显示图表。
原因是外框的height为0，需要设置外框的高度。同时要注意page的css
page{display:flex;}会同样无法显示图表。

完整代码：

在最新的echart.vue小作修改

init() {
...
this.$emit('onInit', {
    canvas: this.canvas,
    width: res.width,
    height: res.height
});
...
},

page/index/index.vue

完成。

接下来解决引用uni-app引用mpvue echarts超过小程序大小限制

在小程序开发工具中编译和预览时，提示Error:源码包超出最大限制,source size 3905KB exceed max limit 2MB

参考：https://www.npmjs.com/package/mpvue-echarts

FAQ:打包结果超过小程序大小限制？

使用自定义版 echarts，官网定制

FAQ:文件太大怎么办？

本项目默认提供的 ECharts 文件是最新版本的包含所有组件文件，为了便于开发，提供的是未压缩的版本。远程调试或预览可以下载 echarts.min.js 压缩版本。
发布时，如果对文件大小要求更高，可以在 ECharts 在线定制网页下载仅包含必要组件的包，并且选择压缩。

定制按需选择后得到echarts.min.js
将echarts.min.js文件复制到echarts目录下。
并修改引用：

    import * as echarts from 'echarts/echarts.min.js'
    import mpvueEcharts from 'mpvue-echarts/src/echarts.vue'

重新运行后文件得到精简，小程序端可以正常编译和预览。

h5 运行到浏览器时，控制台报错：TypeError: t.addEventListener is not a function