【uniapp&微信小程序】跨平台使用echarts的方案选择&踩坑

一、前言

使用Uniapp（vue）开发微信小程序，想用echarts图表实现类似github热力图的效果。
简要列一些可行或不可行的方案。

二、方案对比

1. 【应用】：微信小程序原生开发

• 有echarts官网提供的跨平台方案：在微信小程序中使用 ECharts
• 简单易用，图表齐全

2. 【应用】：uniapp+app端

• renderjs-echarts-demo

  • 可参考的使用总结

• render.js+echarts
  

• echarts图表在移动端的应用
  

  • 支持的图表种类比较少，没试过

3. 【应用】uniapp+跨平台（h5+app+小程序）

• uCharts但只有常用图表（热力图这种就没有）
• 定制打包要收费= =

4. 【应用】（Vue）uniapp+微信小程序

• 引用mpvue-charts

mpvue是一个使用 Vue.js 开发小程序的前端框架，由美团点评技术团队开发在2018年3月开源。（支持转化为h5）

• 不知道为啥要又用uniapp（跨平台）又引入mpvue= =有点奇怪。实际使用的时候，这种方案也是只能实现微信小程序的图表效果

三、方案4的实现与更新

• 总之可实现hbuilder平台开发+使用mpvue-charts实现echarts图表在微信小程序展示的效果

1. 下载 基础的demo，可以在这个基础上修改或者自己搭建环境和项目。

2. 基础demo的优化：
   a. 需要根据自己的需求定制echarts.min.js，echarts在线构建（如果使用的不是min.js，要修改vue文件中的引用），版本选择参考b的信息
   b. echart的版本比较老（是v4的），所以【日历图】不能使用（其他的没测试）
   且为了避免更高版本出现下述问题，选择更新版本为 @5.2.2，npm i [email protected] -S （此为解决下面问题的方法一，方法二见参考2）
   参考：mpvue使用echarts,遇到t.addEventListener is not a function 错误解决。

3. 其他常见问题

   1. Q：echart报错: Component series.XXX not exists. Load it first
      A：可能是定制包里没有下载对应的图表。

参考：

1. 自己配置的方法。不过也都要解决类似上面demo中遇到的问题。
   uni-app微信小程序使用ECharts
   uniapp在微信小程序中使用 ECharts
2. 小程序 uniapp使用echarts报错 t.addEventListener 未定义 （评论中说：echarts版本@5.3.2可行），我没试。通过改echarts.min.js里的对应方法解决该问题。
3. uniapp和mpvue区别有哪些 简单做了下对比，不过mpvue好像没有怎么维护的样子。uniapp体感使用的人更多。