一、前言
使用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图表在微信小程序展示的效果
-
下载 基础的demo，可以在这个基础上修改或者自己搭建环境和项目。
-
基础demo的优化：
a. 需要根据自己的需求定制echarts.min.js，echarts在线构建（如果使用的不是min.js，要修改vue文件中的引用），版本选择参考b的信息
b. echart的版本比较老（是v4的），所以【日历图】不能使用（其他的没测试）
且为了避免更高版本出现下述问题，选择更新版本为 @5.2.2，npm i echarts@5.2.2 -S（此为解决下面问题的方法一，方法二见参考2）
参考：mpvue使用echarts,遇到t.addEventListener is not a function 错误解决。 -
其他常见问题文章来源：https://www.toymoban.com/news/detail-546183.html
- Q：echart报错: Component series.XXX not exists. Load it first
A：可能是定制包里没有下载对应的图表。
- Q：echart报错: Component series.XXX not exists. Load it first
参考：文章来源地址https://www.toymoban.com/news/detail-546183.html
- 自己配置的方法。不过也都要解决类似上面demo中遇到的问题。
uni-app微信小程序使用ECharts
uniapp在微信小程序中使用 ECharts - 小程序 uniapp使用echarts报错 t.addEventListener 未定义 （评论中说：echarts版本@5.3.2可行），我没试。通过改echarts.min.js里的对应方法解决该问题。
- uniapp和mpvue区别有哪些 简单做了下对比，不过mpvue好像没有怎么维护的样子。uniapp体感使用的人更多。
到了这里，关于【uniapp&微信小程序】跨平台使用echarts的方案选择&踩坑的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[MAUI程序设计] 用Handler实现自定义跨平台控件](https://imgs.yssmx.com/Uploads/2024/02/470935-1.png)
