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

一、前言

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

二、方案对比

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

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

2. 【应用】：uniapp+app端

• renderjs-echarts-demo

  • 可参考的使用总结

• render.js+echarts
  

• echarts图表在移动端的应用
  

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

3. 【应用】uniapp+跨平台

• uCharts可以跨h5+app+微信，但只有常用图表（热力图这种就没有）

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 echarts@5.2.2 -S
   参考：mpvue使用echarts,遇到t.addEventListener is not a function 错误解决。

3. 其他常见问题

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