当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 小程序中echarts图表的应用

小程序中echarts图表的应用

2020年07月17日  | 移动技术网IT编程  | 我要评论

最近由于需要，对echarts插件进行了学习，主要应用其来实现多种数据情况的一个图表展示，对用户有一个直观的视觉感受，下面我们就来看看应该具体怎样实现。
1、引入echarts组件
首先我们需要从git上将echarts插件下载下来，并将其装配到我们的小程序项目中，其次在项目中进行调用。
下载ec-canvas: https://github.com/ecomfe/echarts-for-weixin
将git项目中的ec-canvas文件夹引入到小程序的根目录下，如下所示：
引入ec-canvas文件夹
在我们要使用echarts页面的.json文件进行配置，即允许echarts组件的使用，配置如下：
json配置
在页面的.js文件下通过import * as echarts from ‘echarts在代码中的相对位置’，引入echarts插件，然后我们就可以在页面上直接应用ec-canvas了，效果如下：
.wxml的引用
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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网