在小程序中使用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中call与apply的学习笔记
Sep 22 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
微信小程序开发背景图显示功能
Aug 08 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 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
请离开include_once和require_once
2013/07/18 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
jQuery 表格工具集
2010/04/25 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
js传参数受特殊字符影响错误的解决方法
2013/10/21 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
python验证码识别的示例代码
2017/09/21 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
python中return的返回和执行实例
2019/12/24 Python
python实现在线翻译
2020/06/18 Python
详解python logging日志传输
2020/07/01 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
致垒球运动员加油稿
2014/02/16 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
离婚协议书样本
2015/01/26 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers