小程序中echarts图表的应用
程序员文章站
2022-03-11 16:41:08
最近由于需要,对echarts插件进行了学习,主要应用其来实现多种数据情况的一个图表展示,对用户有一个直观的视觉感受,下面我们就来看看应该具体怎样实现。1、引入echarts组件首先我们需要从git上将echarts插件下载下来,并将其装配到我们的小程序项目中,其次在项目中进行调用。下载ec-canvas: https://github.com/ecomfe/echarts-for-weixin将git项目中的ec-canvas文件夹引入到小程序的根目录下,如下所示:在我们要使用echarts页...
最近由于需要,对echarts插件进行了学习,主要应用其来实现多种数据情况的一个图表展示,对用户有一个直观的视觉感受,下面我们就来看看应该具体怎样实现。
1、引入echarts组件
首先我们需要从git上将echarts插件下载下来,并将其装配到我们的小程序项目中,其次在项目中进行调用。
下载ec-canvas: https://github.com/ecomfe/echarts-for-weixin
将git项目中的ec-canvas文件夹引入到小程序的根目录下,如下所示:
在我们要使用echarts页面的.json文件进行配置,即允许echarts组件的使用,配置如下:
在页面的.js文件下通过import * as echarts from ‘echarts在代码中的相对位置’,引入echarts插件,然后我们就可以在页面上直接应用ec-canvas了,效果如下:
2、echarts在页面使用的逻辑
- 定义图表数据
- 在页面首次加载的时候,通过ec-canvas的内部方法 this.selectComponent()来获取相关图表的dom节点
- 初始化图表的数据(在进入到初始化数据的这一part,我们会判断他是否是空数据,若是,则初始化图标;若不是,则将上一次渲染的图表数据进行删除,同时将本次请求的数据在图表中进行渲染)。
- 传入绘制图表创建的options数据(options具体使用参考echarts官方文档:https://echarts.apache.org/zh/option.html#title)
具体的流程图如下:
注:在图表数据渲染的时候,之前在onInit里面进行了图表的绘制,在onShow里面进行了接口数据的获取,在小程序页面显示的时候,会出现图表渲染为空的情况,也就是说接口获取数据的时间不确定,可能在onInit之前或者之后出现。最后改成了在onLoad时获取图表dom节点,在onShow的时候进行图表绘制,接口数据获取,确保能够正常显示。
3、页面效果如下:
4、demo
git源码链接为:https://github.com/remembergf/echarts-weixin
好了,感谢大家阅读。
本文地址:https://blog.csdn.net/rememberyf/article/details/107378068
推荐阅读