在小程序中使用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 相关文章推荐
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
详解Bootstrap插件
Apr 25 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
微信小程序自定义弹出层效果
May 26 Javascript
elementui实现预览图片组件二次封装
Dec 29 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
使用phpQuery获取数组的实例
2017/03/13 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
$("").click与onclick的区别示例介绍
2014/09/25 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
python 简单的多线程链接实现代码
2016/08/28 Python
浅析使用Python操作文件
2017/07/31 Python
python 删除非空文件夹的实例
2018/04/26 Python
Python登录注册验证功能实现
2018/06/18 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
客户代表实习人员自我鉴定
2013/09/27 职场文书
十佳青年事迹材料
2014/08/21 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
出差报告格式模板
2014/11/06 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
MYSQL 运算符总结
2021/11/11 MySQL