在小程序中使用Echart图表的示例代码


Posted in Javascript onAugust 02, 2018

在小程序中使用Echart图表

  1. Echart UI构建(柱状图)
  2. Echart 假数据
  3. Echart 动态设置数据

柱状图UI示例

// Echart config,包括init data 和style及数据类型
  var option = {
   animation: false,//提高页面加载速度,关闭echart的动画
   grid: [
    //grid section UI
     ...
   ],
   xAxis: [
    //xAxis section UI
     ...
   ],
   yAxis: [
    //yAxis section UI
     ...
   ],
   series: [
    {
    //左侧坐标轴UI 
     ...
     data: [100, 100, 100, 100, 100],
    },
    {
    //左侧柱状图 UI 及数据
     ...
     data: [66, 54, 87, 78, 87],
    },
    {
    //右侧坐标轴UI
     ...
     data: [100, 100, 100, 100, 100],
    },
    {
     //右侧柱状图 UI 及数据
     ...
     data: [84, 87, 86, 76, 76],
    },
   ]
  }
  // 初始化Echart图表UI
  function initChart(canvas, width, height) {
   const chart = echarts.init(canvas, null, {
    width: width,
    height: height
   })
   canvas.setChart(chart)
   chart.setOption(option)
   return chart
  }

以上就是利用echart图表插件在小程序中生成一个我们需要的柱状图用以展示我们需要表达给用户的数据表。

当然,在实际的开发中,所有的数据都是通过获取数据库中的数据,然后根据数据生成,而不是写死在series[]中,那么如何将ajax或者其他方式获取到的数据传入我们的UI中呢?

Echart的文档告诉我们:

数据的动态更新

ECharts 由数据驱动,数据的改变驱动图表展现的改变,因此动态数据的实现也变得异常简单。

所有数据的更新都通过 setOption实现,你只需要定时获取数据,setOption 填入数据,而不用考虑数据到底产生了那些变化,ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

也就是上面示例代码中的这个方法

chart.setOption(option)

ok直接看代码:

var hostTeamInfo = []//获取的数据
option.series[1].data = hostTeamInfo//根据前文,设置左侧的数据

根据小程序的指导文档,这部分代码需要在page()生命周期中完成,至于是在onLoad还是onReady中,需要各位根据实际情况来决定

效果图:

在小程序中使用Echart图表的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
Node.js Buffer用法解读
May 18 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
Vue实现附件上传功能
May 28 Javascript
详解Webpack4多页应用打包方案
Jul 16 Javascript
详解vue身份认证管理和租户管理
May 25 Vue.js
node.js读取Excel数据(下载图片)的方法示例
Aug 02 #Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 #Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 #Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 #Javascript
深入浅出理解JavaScript高级定时器原理与用法
Aug 02 #Javascript
解决vue router组件状态刷新消失的问题
Aug 01 #Javascript
Promise.all中对于reject的处理方法
Aug 01 #Javascript
You might like
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
axios学习教程全攻略
2017/03/26 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
工程招投标邀请书
2014/01/30 职场文书
党校培训自我鉴定
2014/02/01 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
护士辞职信怎么写
2015/02/27 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
消防宣传标语大全
2015/08/03 职场文书
趣味运动会标语口号
2015/12/26 职场文书
成人成长感言如何写?
2019/08/16 职场文书
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android