一、前言
使用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图表在微信小程序展示的效果
-
下载 基础的demo,可以在这个基础上修改或者自己搭建环境和项目。
-
基础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 错误解决。 -
其他常见问题
- Q:echart报错: Component series.XXX not exists. Load it first
A:可能是定制包里没有下载对应的图表。
- Q:echart报错: Component series.XXX not exists. Load it first