欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

小程序中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图表的应用
在我们要使用echarts页面的.json文件进行配置,即允许echarts组件的使用,配置如下:
小程序中echarts图表的应用
在页面的.js文件下通过import * as echarts from ‘echarts在代码中的相对位置’,引入echarts插件,然后我们就可以在页面上直接应用ec-canvas了,效果如下:
小程序中echarts图表的应用
2、echarts在页面使用的逻辑

  • 定义图表数据
  • 在页面首次加载的时候,通过ec-canvas的内部方法 this.selectComponent()来获取相关图表的dom节点
  • 初始化图表的数据(在进入到初始化数据的这一part,我们会判断他是否是空数据,若是,则初始化图标;若不是,则将上一次渲染的图表数据进行删除,同时将本次请求的数据在图表中进行渲染)。
  • 传入绘制图表创建的options数据(options具体使用参考echarts官方文档:https://echarts.apache.org/zh/option.html#title

具体的流程图如下:
小程序中echarts图表的应用
注:在图表数据渲染的时候,之前在onInit里面进行了图表的绘制,在onShow里面进行了接口数据的获取,在小程序页面显示的时候,会出现图表渲染为空的情况,也就是说接口获取数据的时间不确定,可能在onInit之前或者之后出现。最后改成了在onLoad时获取图表dom节点,在onShow的时候进行图表绘制,接口数据获取,确保能够正常显示。

3、页面效果如下:
小程序中echarts图表的应用
小程序中echarts图表的应用
4、demo
git源码链接为:https://github.com/remembergf/echarts-weixin
好了,感谢大家阅读。
小程序中echarts图表的应用

本文地址:https://blog.csdn.net/rememberyf/article/details/107378068

相关标签: 小程序 小程序