小程序中使用|小程序中使用 ECharts 图表组件
小程序中如果只是简单地展示图表,那么可以使用小程序插件“ECharts 图表组件”,插件开发文档,使用示例小程序如下:
文章图片
ECharts Gallery 接入步骤
使用 “ECharts 图表” 插件,只需要三步即可
1、插件申请
首先要在小程序管理后台的 “设置-第三方服务-插件管理” 中添加插件。开发者可登录小程序管理后台,通过 wx1db9e5ab1149ea03
查找插件并添加。通过申请后,方可在小程序中使用相应的插件
2、引入插件配置
在 app.json
中插件如下代码,注意 AppId 为 wx1db9e5ab1149ea03
{
"plugins": {
"echarts": {
"version": "1.0.3",
"provider": "wx1db9e5ab1149ea03"
}
}
}
3、使用方式
在使用的页面中的 json 配置文件中,插件如下代码:
{
"usingComponents": {
"chart": "plugin://echarts/chart"
}
}
在 wxml 中需要展示图表的位置,插入如下代码:
【小程序中使用|小程序中使用 ECharts 图表组件】其中 chart-class 为样式类,option 为 ECharts 中的 option 配置对象,bindinstance 会回调 ECharts 实例对象,如果需要操作 ECharts 实例对象可以实现此方法。
图例
文章图片
ECharts Gallery 截图 注意
- 插件目前2.0版本使用的是全量的 ECharts 5.0.2 版本,总大小约 966KB,所以对包大小敏感的小程序慎重使用,当然可以通过拆包等方式改善此问题。
- 插件使用过程中有任何问题欢迎随时反馈给我。
推荐阅读
- 热闹中的孤独
- 一个小故事,我的思考。
- 家乡的那条小河
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 昨夜小楼听风
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate