小程序快速接入 ECharts 图表插件功能

您所在的位置:网站首页 echarts好用吗 小程序快速接入 ECharts 图表插件功能

小程序快速接入 ECharts 图表插件功能

2023-08-13 23:50| 来源: 网络整理| 查看: 265

ECharts 图表组件插件可以让小程序轻松使用 ECharts 图表功能,不用担心接入成本以及占用较大体积的问题,以及较为复杂的接入使用问题。详细接入文档:https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx1db9e5ab1149ea03

接入步骤1、插件申请

首先要在小程序管理后台的“设置-第三方服务-插件管理”中添加插件。开发者可登录小程序管理后台,通过 wx1db9e5ab1149ea03 查找插件并添加。通过申请后,方可在小程序中使用相应的插件

2、引入插件配置

在 app.json 中插件如下代码,注意 AppId 为 wx1db9e5ab1149ea03

{   "plugins": {     "echarts": {       "version": "1.0.2",       "provider": "wx1db9e5ab1149ea03"     }   } } 3、使用方式

在使用的页面中的 json 配置文件中,插件如下代码:

{   "usingComponents": {     "chart": "plugin://echarts/chart"   } }

在 wxml 中需要展示图表的位置,插入如下代码:

其中 chart-class 为样式类,option 为 ECharts 中的 option 配置对象,bindinstance 会回调 ECharts 实例对象,如果需要操作 ECharts 实例对象可以实现此方法

4、效果展示

注意事项

如果需要兼容低于 2.6.1 的小程序,在更新 option 的时候需要手动 setOption,具体代码如下:

// 支持 observers 的版本可以直接修改 option if (echarts.isSupportObservers()) {   this.setData({     option,   }); } else if (this.instance) { // 在不支持 observers 的小程序版本中需要手动通过 ECharts 实例更新 option 配置   this.instance.setOption(option, true); }

如果你的小程序最低支持版本大于 2.6.1,或者你不会动态改变 option 配置,那么你不需要关系这段代码,也不需要处理 bindinstance 回调。

关于

使用中遇到任何问题可以添加微信反馈,添加微信时可以备注 ECharts。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3