在小程序中使用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之旅 对象的原型链之由来
Aug 25 Javascript
javascript 学习笔记(一)DOM基本操作
Apr 08 Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
Javascript Objects详解
Sep 04 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
Node 自动化部署的方法
Oct 17 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 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
PHP技术开发技巧分享
2010/03/23 PHP
PHP编程风格规范分享
2014/01/15 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
帝国cms常用标签汇总
2015/07/06 PHP
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
js 操作符汇总
2014/11/08 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
在Python的Django框架中创建语言文件
2015/07/27 Python
python for循环remove同一个list过程解析
2019/08/14 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
财务管理专业毕业生求职信范文
2013/09/21 职场文书
艺人经纪人岗位职责
2014/04/15 职场文书
环保倡议书范文
2014/05/12 职场文书
求职意向书
2014/07/29 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
2014年医院工作总结
2014/11/20 职场文书
2015年财务经理工作总结
2015/05/13 职场文书