更新记录

0.0.2(2020-10-31)

由于目前renderjs 的官方示例 在APP端互相通信困难, 组件不支持多个,echarts的回调函数不生效,echarts 事件没有预留 为解决这些问题, 故将echarts封装成组件,解决了 组件支持多个、echarts 回调函数不生效、 在H5和APP端可用。 由于个人能力有限,在此也只是提供了一些使用思路,如有更好的解决办法,欢迎提出。


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 2.9.5 app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
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);
},

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问