Echarts 数据绑定

简单的统计表已经可以生成，不过之前图标数据都是直接写在参数里面的，而实际使用中，我们的数据一般都是异步读取的。EChart.js对于数据异步读取这块提供了异步加载的方法。

绑定多组数据

很多时候需要展示的数据不单单是一组数据，很多时候会进行一个数据对比。这个时候只需要在series中增加一组数据，legend中添加一下这个数据组的name

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>ECharts.js 数据绑定</title>
  5.     <meta charset="utf-8">
  6.     <script type="text/javascript" src="js/echarts.js"></script>
  7. </head>
  8. <body>
  9.     <div id="chartmain" style="width:600px; height: 400px;"></div>
  10.     <script type="text/javascript">
  11.         //指定图标的配置和数据
  12.         var option = {
  13.             title:{
  14.                 text:'ECharts 数据统计'
  15.             },
  16.             legend:{
  17.                 data:['访问量','用户量']
  18.             },
  19.             xAxis:{
  20.                 data:["Android","IOS","PC","Other"]
  21.             },
  22.             yAxis:{},
  23.             series:[
  24.             {
  25.                 name:'访问量',
  26.                 type:'bar',
  27.                 data:[180,420,333,83]
  28.             },
  29.             {
  30.                 name:'用户量',
  31.                 type:'bar',
  32.                 data:[125,330,230,60]
  33.             }
  34.             ]
  35.         };
  36.         //初始化echarts实例
  37.         var myChart = echarts.init(document.getElementById('chartmain'));
  38.  
  39.         //使用制定的配置项和数据显示图表
  40.         myChart.setOption(option);
  41.     </script>
  42. </body>
  43. </html>

效果展示

数据异步加载

EChart中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。

绑定数据的方式有两种，一种是写写好一些图表参数，然后数据留空，然后在异步读取数据的时候，绑定数据。还有一种就是直接异步读取数据的时候同时设置图表参数和数据绑定。

首先我们准备一份需要加载的数据文件data.json，数据内容：

  1. {"name":["Android","IOS","PC","Other"],"data":[420,200,360,100]}

第一种异步加载的时候设置图表参数和绑定数据

  1.     <script type="text/javascript">
  2.         //初始化echarts实例
  3.         var myChart = echarts.init(document.getElementById('chartmain'));
  4.         //异步加载的配置项和数据显示图表
  5.         $.get('data.json').done(function (data) {
  6.             data = eval('('+data+')');
  7.             myChart.setOption({
  8.                 title:{
  9.                     text:'ECharts 异步加载数据'
  10.                 },
  11.                 tooltip:{},
  12.                 legend:{
  13.                     data:['访问量']
  14.                 },
  15.                 xAxis:{
  16.                     data:data.name
  17.                 },
  18.                 yAxis:{},
  19.                 series:[
  20.                     {
  21.                         name:'访问量',
  22.                         type:'bar',
  23.                         data:data.data
  24.                     }
  25.                 ]
  26.             })
  27.         })
  28.  
  29.     </script>

第二种先设置图表参数，后绑定数据

  1. <script type="text/javascript">
  2.         //初始化echarts实例
  3.         var myChart = echarts.init(document.getElementById('chartmain'));
  4.         //设置图标配置项
  5.         myChart.setOption({
  6.             title:{
  7.                 text:'ECharts 异步加载数据'
  8.             },
  9.             tooltip:{},
  10.             legend:{
  11.                 data:['访问量']
  12.             },
  13.             xAxis:{
  14.                 data:[]
  15.             },
  16.             yAxis:{},
  17.             series:[
  18.                 {
  19.                     name:'访问量',
  20.                     type:'bar',
  21.                     data:[]
  22.                 }
  23.             ]
  24.         })
  25.         //异步加载数据
  26.         $.get('data.json').done(function (data) {
  27.             data = eval('('+data+')');
  28.             myChart.setOption({
  29.                 xAxis:{
  30.                     data:data.name
  31.                 },
  32.                 series:[
  33.                     {
  34.                         //根据名字对应到相应的系列
  35.                         name:"访问量",
  36.                         data:data.data
  37.                     }
  38.                 ]
  39.             })
  40.         })
  41.     </script>

效果展示

因为是异步加载，所以有时候数据加载会慢，或者延迟。在数据没有加载前，图表这样的。面对这样的图表，肯定会觉得这是没有数据吗，还是图表有问题.对于这块ECharts增加了一个加载动画。

Loading动画加载

  1.         //打开loading动画
  2.         myChart.showLoading();
  3.         //加载数据函数
  4.         function bindData(){
  5.             //为了效果明显，我们做了延迟读取数据
  6.             setTimeout(function(){
  7.                 //异步加载数据
  8.                 $.get('data.json').done(function (data) {
  9.                     //获取数据后，隐藏loading动画
  10.                     myChart.hideLoading();
  11.                     data = eval('('+data+')');
  12.                     myChart.setOption({
  13.                         xAxis:{
  14.                             data:data.name
  15.                         },
  16.                         series:[
  17.                             {
  18.                                 //根据名字对应到相应的系列
  19.                                 name:"访问量",
  20.                                 data:data.data
  21.                             }
  22.                         ]
  23.                     })
  24.                 })
  25.             },2000)
  26.         }
  27.  
  28.         bindData();

效果展示

数据动态实时更新

  1. <script type="text/javascript">
  2.     //初始化echarts实例
  3.     var myChart = echarts.init(document.getElementById('chartmain'));
  4.     var base = + new Date(2017,3,8);
  5.     var oneDay = 24*3600*1000;
  6.     var date = [];
  7.     var data = [Math.random()*150];
  8.     var now = new Date(base);
  9.     var day = 30;
  10.     function addData(shift){
  11.         now = [now.getFullYear(),now.getMonth()+1,now.getDate()].join('/');
  12.         date.push(now);
  13.         data.push((Math.random()-0.5)*10+data[data.length-1]);
  14.         if (shift) {
  15.             console.log(data);
  16.             date.shift();
  17.             data.shift();
  18.         }
  19.         now = new Date(+new Date(now)+oneDay);
  20.     }
  21.  
  22.     for (var i = 0; i < day; i++) {
  23.         addData();
  24.     }
  25.     //设置图标配置项
  26.     myChart.setOption({
  27.         title:{
  28.             text:'ECharts 30天内数据实时更新'
  29.         },
  30.         xAxis:{
  31.             type:"category",
  32.             boundaryGap:false,
  33.             data:date
  34.         },
  35.         yAxis:{
  36.             boundaryGap:[0,'100%'],
  37.             type:'value'
  38.         },
  39.         series:[{
  40.             name:'成交',
  41.             type:'line',
  42.             smooth:true, //数据光滑过度
  43.             symbol:'none', //下一个数据点
  44.             stack:'a',
  45.             areaStyle:{
  46.                 normal:{
  47.                     color:'red'
  48.                 }
  49.             },
  50.             data:data
  51.         }]
  52.     })
  53.     setInterval(function(){
  54.         addData(true);
  55.         myChart.setOption({
  56.             xAxis:{
  57.                 data:date
  58.             },
  59.             series:[{
  60.                 name:'成交',
  61.                 data:data
  62.             }]
  63.         });
  64.     },1000)
  65. </script>

效果展示

ECharts.js学习（二）动态数据绑定的更多相关文章

  1. 图表工具--- ECharts.js学习（一） 简单入门

    ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...

  2. ECharts.js学习（一） 简单入门

    EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Visual Studio里的自带控件,使用比 ...

  3. ECharts.js学习（三）交互组件

    ECharts.js 交互组件 ECharts.js有很多的交互组件,一般经常用到的组件有这些: title:标题组件,包含主标题和副标题. legend:图例组件,展现了不同系列的标记(symbol ...

  4. ECharts.js学习动态数据绑定

    https://my.oschina.net/brillantzhao/blog/1541702https://www.cnblogs.com/leoxuan/p/6513591.htmlhttps: ...

  5. JS学习之动态加载script和style样式

    前提:我们可以把一个网页里面的内容理解为一个XML或者说网页本身也就是一个XML文档,XML文档都有很特殊的象征:"标签"也叫"节点".我们都知道一个基本的网页 ...

  6. JS学习二（循环）

    JS中的循环结构 [循环结构的执行步骤] 1.声明循环变量: 2.判断循环条件: 3.执行循环体操作: 4.更新循环变量: 然后,循环执行2~4,知道条件不成立.跳出循环. [while 循环] wh ...

  7. node.js学习二---------------------同步API和异步API的区别

    /** * node.js大部分api都有同步的方法,同步方法名后面都会带有Sync,js编译的时候,同步代码会立即执行,异步代码会先存到异步池中,等同步代码执行完后它才会执行异步:不会阻塞线程,没有 ...

  8. 网页3D效果库Three.js学习[二]-了解照相机

    camera 上篇大致了解了three.js ,并可以创建一个简单的可动的立方体.下来我们着重了解下camera (照相机),照相机其实就是视角,就像你的眼睛.Three.js有两种不同的相机模式:直 ...

  9. 02.VUE学习二之数据绑定

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

随机推荐

  1. 经典实用的iptables shell脚本

    先解释一下iptables里的参数意思:A: 添加 (跟链)-I: 插入-p: 跟协议-s: 源IP-d: 目标IP-j: 操作行为-t: 加表--to-source:SNAT用,表示改成的SNAT源 ...

  2. Apache mod_rewrite

    mod_rewrite是Apache的一个非常强大的功能,它可以实现伪静态页面.下面我详细说说它的使用方法!对初学者很有用的哦! 1.检测Apache是否支持mod_rewrite phpinfo() ...

  3. C# 创建、部署、调用WebService

    webservice 可以用于分布式应用程序之间的交互,和不同程序之间的交互. 概念性的东西就不说太多,下面开始创建一个简单的webservice的例子.这里我用的是Visual Studio 201 ...

  4. T4模板的一些配置(从EF数据更新)

    <#@ template debug="false" hostspecific="false" language="C#" #> ...

  5. 十三、栅栏CyclicBarrier

    一.简介 栅栏CyclicBarrier的作用就是等待一组线程都准备好了,然后执行某个任务.这与CountDownLatch很相似. 但是CyclicBarrier和CountDownLatch是有区 ...

  6. 四、闭锁之CountDownLatch

    一.简介 闭锁是Java的一种同步工具类.我们在程序运行过程中,某个任务需要等待其它一个到多个的任务全部完成才会执行,这个等待的期间就叫做闭锁. CountDownLatch是闭锁的一种实现,它支持一 ...

  7. 撩课-Java每天5道面试题第25天

    156.mvc:view-controller有什么作用? 当我们发送一个请求时,如果没有找到对应的mapping 则会对配置文件当中匹配mvc:view-controller 注意点:使用时要添加后 ...

  8. Mysql分布式部署高可用集群方案

    HAproxy+Mycat +MySQL主从集群高可用方案 1.         HAproxy高可用方案: haproxy+keepalived,利用keepalived的VIP浮动能力,(多台ha ...

  9. csharp: Double Convert To String

    /// <summary> /// /// </summary> /// <param name="fl"></param> /// ...

  10. sql:Mysql create view,function,procedure

    create database Liber; use Liber; #顯示數据庫 20150210 Geovin Du 涂聚文 SHOW DATABASES; drop table BookKindL ...