ECharts.js学习（二）动态数据绑定
Echarts 数据绑定
简单的统计表已经可以生成，不过之前图标数据都是直接写在参数里面的，而实际使用中，我们的数据一般都是异步读取的。EChart.js对于数据异步读取这块提供了异步加载的方法。
绑定多组数据
很多时候需要展示的数据不单单是一组数据，很多时候会进行一个数据对比。这个时候只需要在series中增加一组数据，legend中添加一下这个数据组的name
<!DOCTYPE html>
<html>
<head>
<title>ECharts.js 数据绑定</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/echarts.js"></script>
</head>
<body>
<div id="chartmain" style="width:600px; height: 400px;"></div>
<script type="text/javascript">
//指定图标的配置和数据
var option = {
title:{
text:'ECharts 数据统计'
},
legend:{
data:['访问量','用户量']
},
xAxis:{
data:["Android","IOS","PC","Other"]
},
yAxis:{},
series:[
{
name:'访问量',
type:'bar',
data:[180,420,333,83]
},
{
name:'用户量',
type:'bar',
data:[125,330,230,60]
}
]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('chartmain')); //使用制定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
效果展示
数据异步加载
EChart中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。
绑定数据的方式有两种，一种是写写好一些图表参数，然后数据留空，然后在异步读取数据的时候，绑定数据。还有一种就是直接异步读取数据的时候同时设置图表参数和数据绑定。
首先我们准备一份需要加载的数据文件data.json，数据内容：
{"name":["Android","IOS","PC","Other"],"data":[420,200,360,100]}
第一种异步加载的时候设置图表参数和绑定数据
<script type="text/javascript">
//初始化echarts实例
var myChart = echarts.init(document.getElementById('chartmain'));
//异步加载的配置项和数据显示图表
$.get('data.json').done(function (data) {
data = eval('('+data+')');
myChart.setOption({
title:{
text:'ECharts 异步加载数据'
},
tooltip:{},
legend:{
data:['访问量']
},
xAxis:{
data:data.name
},
yAxis:{},
series:[
{
name:'访问量',
type:'bar',
data:data.data
}
]
})
}) </script>
第二种先设置图表参数，后绑定数据
<script type="text/javascript">
//初始化echarts实例
var myChart = echarts.init(document.getElementById('chartmain'));
//设置图标配置项
myChart.setOption({
title:{
text:'ECharts 异步加载数据'
},
tooltip:{},
legend:{
data:['访问量']
},
xAxis:{
data:[]
},
yAxis:{},
series:[
{
name:'访问量',
type:'bar',
data:[]
}
]
})
//异步加载数据
$.get('data.json').done(function (data) {
data = eval('('+data+')');
myChart.setOption({
xAxis:{
data:data.name
},
series:[
{
//根据名字对应到相应的系列
name:"访问量",
data:data.data
}
]
})
})
</script>
效果展示
因为是异步加载，所以有时候数据加载会慢，或者延迟。在数据没有加载前，图表这样的。面对这样的图表，肯定会觉得这是没有数据吗，还是图表有问题.对于这块ECharts增加了一个加载动画。
Loading动画加载
//打开loading动画
myChart.showLoading();
//加载数据函数
function bindData(){
//为了效果明显，我们做了延迟读取数据
setTimeout(function(){
//异步加载数据
$.get('data.json').done(function (data) {
//获取数据后，隐藏loading动画
myChart.hideLoading();
data = eval('('+data+')');
myChart.setOption({
xAxis:{
data:data.name
},
series:[
{
//根据名字对应到相应的系列
name:"访问量",
data:data.data
}
]
})
})
},2000)
} bindData();
效果展示
数据动态实时更新
<script type="text/javascript">
//初始化echarts实例
var myChart = echarts.init(document.getElementById('chartmain'));
var base = + new Date(2017,3,8);
var oneDay = 24*3600*1000;
var date = [];
var data = [Math.random()*150];
var now = new Date(base);
var day = 30;
function addData(shift){
now = [now.getFullYear(),now.getMonth()+1,now.getDate()].join('/');
date.push(now);
data.push((Math.random()-0.5)*10+data[data.length-1]);
if (shift) {
console.log(data);
date.shift();
data.shift();
}
now = new Date(+new Date(now)+oneDay);
} for (var i = 0; i < day; i++) {
addData();
}
//设置图标配置项
myChart.setOption({
title:{
text:'ECharts 30天内数据实时更新'
},
xAxis:{
type:"category",
boundaryGap:false,
data:date
},
yAxis:{
boundaryGap:[0,'100%'],
type:'value'
},
series:[{
name:'成交',
type:'line',
smooth:true, //数据光滑过度
symbol:'none', //下一个数据点
stack:'a',
areaStyle:{
normal:{
color:'red'
}
},
data:data
}]
})
setInterval(function(){
addData(true);
myChart.setOption({
xAxis:{
data:date
},
series:[{
name:'成交',
data:data
}]
});
},1000)
</script>
效果展示
ECharts.js学习（二）动态数据绑定的更多相关文章
- 图表工具--- ECharts.js学习（一） 简单入门
ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...
- ECharts.js学习（一） 简单入门
EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
- ECharts.js学习（三）交互组件
ECharts.js 交互组件 ECharts.js有很多的交互组件,一般经常用到的组件有这些: title:标题组件,包含主标题和副标题. legend:图例组件,展现了不同系列的标记(symbol ...
- ECharts.js学习动态数据绑定
https://my.oschina.net/brillantzhao/blog/1541702https://www.cnblogs.com/leoxuan/p/6513591.htmlhttps: ...
- JS学习之动态加载script和style样式
前提:我们可以把一个网页里面的内容理解为一个XML或者说网页本身也就是一个XML文档,XML文档都有很特殊的象征:"标签"也叫"节点".我们都知道一个基本的网页 ...
- JS学习二（循环）
JS中的循环结构 [循环结构的执行步骤] 1.声明循环变量: 2.判断循环条件: 3.执行循环体操作: 4.更新循环变量: 然后,循环执行2~4,知道条件不成立.跳出循环. [while 循环] wh ...
- node.js学习二---------------------同步API和异步API的区别
/** * node.js大部分api都有同步的方法,同步方法名后面都会带有Sync,js编译的时候,同步代码会立即执行,异步代码会先存到异步池中,等同步代码执行完后它才会执行异步:不会阻塞线程,没有 ...
- 网页3D效果库Three.js学习[二]-了解照相机
camera 上篇大致了解了three.js ,并可以创建一个简单的可动的立方体.下来我们着重了解下camera (照相机),照相机其实就是视角,就像你的眼睛.Three.js有两种不同的相机模式:直 ...
- 02.VUE学习二之数据绑定
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
随机推荐
- 深入redis内部--实现字符串
redis字符串的定义和实现在Ssd.h和Ssd.c中. 1.定义 typedef char *sds; //本质是字符char的指针 2.字符串的操作 sds sdsnew(const char * ...
- java爬虫爬取https协议的网站时，SSL报错， java.lang.IllegalArgumentException TSLv1.2 报错
目前在广州一家小公司实习,这里的学习环境还是挺好的,今天公司从业十几年的大佬让我检查一下几年前的爬虫程序是否还能使用…… 我从myeclipse上check out了大佬的程序,放到workspace ...
- SQL基本操作（工作中够用了）
以下文章内容都是我自己从平时学习SQL语言时整理而来,写这篇文章是希望我或大家在使用能更方便的查询. 如果有不完整或不正确的地方请大家指出~谢谢大家 基本SQL操作 创建数据库 CREATE DA ...
- text-align真的只是让文本居中吗？
很多教程上说text-align属性只是让文本水平居中.但text-align的功能远不止如此. 对于具有文本类属性的元素,text-align属性也可以使其水平居中显示. 具有文本类属性的元素有:行 ...
- REDIS与MEMCACHED的区别 8大点
如果简单地比较Redis与Memcached的区别,大多数都会得到以下观点:1 Redis不仅仅支持简单的k/v类型的数据,同时还提供list,set,hash等数据结构的存储.2 Redis支持数据 ...
- MyBatis中插入并返回主键
开发过程中经常遇到需要插入一条数据,并且返回这条数据自增的主键,在MyBatis中只需要在mapper中添加keyProperty属性即可 在mapper中添加keyProperty属性 <in ...
- Java中名词的解释
在上一篇中说到了Java的四大特性,里面出现了很多名次,包括以后学习Java中也会出现很多常用到的名次,对初学者来说可能不知道是什么意思,或者是对这些刺耳的理解不是特别透彻,这里我就我自己的理解来解释 ...
- java：模拟栈操作
import java.util.ArrayList; public class MyStack { private ArrayList<Object> arrayList; public ...
- ubuntu 配置dns访问外网
我新建了一个虚拟机后采用的net模式 一 先配置虚拟机ip使其能在局域网内通信 1.vmware 编辑->虚拟网络编辑器 可以看到网关.掩码等信息 可以看到我们配置的ip应该在192.168.1 ...
- JPA 实体映射
一.实体基本映射 /* * @Entity:将领域对象标注为一个实体,表示保存到数据库中 * @@Table:保存到数据库中表名,默认表名为类名,可通过name属性命名 * * */ @Entity ...