在小程序中使用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 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
Javascript 自定义类型方法小结
Mar 02 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
浅析微信扫码登录原理(小结)
Oct 29 Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
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
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
php下使用iconv需要注意的问题
2010/11/20 PHP
php调用mysql数据 dbclass类
2011/05/07 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
PHP中的类型约束介绍
2015/05/11 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
分享php多功能图片处理类
2016/05/15 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
javascript基本类型详解
2014/11/28 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
小程序实现单选多选功能
2018/11/04 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
初步理解Python进程的信号通讯
2015/04/09 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
Python中如何添加自定义模块
2020/06/09 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
Unix里面如何在后台运行程序
2016/10/14 面试题
总经理秘书的岗位职责
2013/12/27 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
小学班主任研修日志
2015/11/13 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers