更新记录
0.0.2(2020-10-31)
由于目前renderjs 的官方示例 在APP端互相通信困难,
组件不支持多个,echarts的回调函数不生效,echarts 事件没有预留 为解决这些问题,
故将echarts封装成组件,解决了 组件支持多个、echarts 回调函数不生效、 在H5和APP端可用。
由于个人能力有限,在此也只是提供了一些使用思路,如有更好的解决办法,欢迎提出。
平台兼容性
HbuilderX/cli最低兼容版本 |
2.9.5 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
wozhi-echarts-renderjs
参考
本示例参考了 renderjs-echarts-demo 插件
注意事项
- 仅支持 app-vue、h5 端
- 要求 uni-app 2.5.5+ 以上版本
- APP端要求使用v3编译器
- 本例使用的echarts版本为4.8.0, 可自行替换 版本 测试
- 第一次使用uniapp,其中关于uniapp 语法或者其他有不太恰当的地方, 请自行修改 调整
解决的问题
- 以组件形式使用echarts
- 自定义echarts 事件 【未全部测试】
- 使用变通的方法解决echarts 回调函数不能使用的问题
回调方法不生效的解决办法
- 前提:HBuilderX版本2.7.14,app端
- 当前版本传入的回调方法到renderjs中就消失了。故目前解决方案是 现将函数转为字符串, 在rendjs中转回函数, 同时注入上下文变量
自定义事件
在 pages/components/uniEcharts/events.js 中修改 events变量, 参照 echarts api
const events = ['click', 'legendselectchanged'];
使用
<uniEcharts @echartsClick="xx" @echartsLegendselectchanged="xx">
echarts 回调函数
当传入组件中的option的 回调函数, 包含上下文变量时, 请将变量 设置在 option.contextVariable 中
// 上下文变量
contextVariable: {
testData: 'test1',
geoJson
},
当需要在设置变量前 引入地图资源时, 可以将函数内容写在 option.beforeSetOpiton 中
// 在设置数据前的回调函数
beforeSetOpiton(echarts) {
echarts.registerMap(420000, geoJson);
},