数据异步加载

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

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

准备要加载的数据文件data.json假数据实际项目中数据是由后台传递过来的,数据内容:

{
"name":["iso","english","china","ufo","seo"],
"data":[400,200,300,100,11]
}

  


第一种异步加载的时候设置图表参数和绑定数据,JavaScript中的代码如下:

var container = document.getElementById('container');
// 初始化echarts对象
var myContainer = echarts.init(container);
$.get('echarts.json', function(data) {//与服务器连接成功
console.log(data);//获取到的json数据是个对象
myContainer.setOption(option = {
title:{
text:'ECharts 异步加载数据'
},
tooltip:{},
legend:{
data:['访问量']
},
xAxis:{
data:data.name
},
yAxis:{},
series:[
{
name:'访问量',
type:'line',
data:data.data
}
]
});
});

  

运行结果为

第二种先设置图表参数,后绑定数据。  JavaScript中的代码如下:

// 初始化echarts对象
var myContainer = echarts.init(document.getElementById('container'));
myContainer.setOption(option = {
title:{
text:'echarts异步加载数据'
},
tooltip:{},
legend:{},
xAxis:{
data:[]
},
yAxis:{},
series:[
{
name:'访问量',
type:'bar',
data:[]
}
]
});
$.get('echarts.json',function(res){
// console.log(res);
myContainer.setOption({
xAxis:{
data:res.name
},
series:[{
data:res.data
}
]
});
});

  

运行结果为:

Loading动画加载

//打开loading动画
myContainer.showLoading();
//加载数据函数
function bindData(){
//为了效果明显,我们做了延迟读取数据
setTimeout(function(){
//异步加载数据
$.get('echarts.json',function(res){
//获取数据后,隐藏loading动画
myContainer.hideLoading();
myContainer.setOption(option = {
title:{
text:'echartsLoading加载'
},
tooltip:{},
legend:{},
xAxis:{
data:res.name
},
yAxis:{},
series:[
{
name:'访问量',
type:'bar',
data:res.data
}
]
});
})
},2000)
} bindData();

由于运行的动态图上传有点麻烦,在这里我截图两张图片,分别是加载前与加载后:

加载后图片:

数据动态实时更新

数据实时更新的代码:

    var container = document.getElementById('container');
// 初始化echarts对象
var myContainer = echarts.init(container);
var base = + new Date(2018,9,30);
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();
}
//设置图标配置项
myContainer.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:'pink'
}
},
data:data
}]
})
setInterval(function(){
addData(true);
myContainer.setOption({
xAxis:{
data:date
},
series:[{
name:'成交',
data:data
}]
});
},1000)

  

运行图

改代码是上面数据加载方式的所有页面代码,可以直接复制,编辑查看运行效果。

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts-异步加载数据</title>
<link rel="stylesheet" href="11.scss">
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<style>
#container{
width: 500px;
height: 400px;
border: 1px solid #ccc;
/*background-color: #ccc;*/
}
</style>
</head>
<body>
<div id="container"></div>
<!-- -->
<script type="text/javascript">
var container = document.getElementById('container');
// 初始化echarts对象
var myContainer = echarts.init(container); // 第一种异步加载的时候设置图表参数和绑定数据
// 异步加载配置项与数据显示图表
/*$.get('echarts.json', function(data) {//与服务器连接成功
console.log(data);//获取到的json数据是个对象
myContainer.setOption(option = {
title:{
text:'ECharts 异步加载数据'
},
tooltip:{},
legend:{
data:['访问量']
},
xAxis:{
data:data.name
},
yAxis:{},
series:[
{
name:'访问量',
type:'line',
data:data.data
}
]
});
});*/ // 第二种先设置图表参数,后绑定数据
/*myContainer.setOption(option = {
title:{
text:'echarts异步加载数据'
},
tooltip:{},
legend:{},
xAxis:{
data:[]
},
yAxis:{},
series:[
{
name:'访问量',
type:'bar',
data:[]
}
]
});
$.get('echarts.json',function(res){
// console.log(res);
myContainer.setOption({
xAxis:{
data:res.name
},
series:[{
data:res.data
}
]
});
});*/
/* //打开loading动画
myContainer.showLoading();
//加载数据函数
function bindData(){
//为了效果明显,我们做了延迟读取数据
setTimeout(function(){
//异步加载数据
$.get('echarts.json',function(res){
//获取数据后,隐藏loading动画
myContainer.hideLoading();
myContainer.setOption(option = {
title:{
text:'echartsLoading加载'
},
tooltip:{},
legend:{},
xAxis:{
data:res.name
},
yAxis:{},
series:[
{
name:'访问量',
type:'bar',
data:res.data
}
]
});
})
},2000)
} bindData(); */ //初始化echarts实例
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();
}
//设置图标配置项
myContainer.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);
myContainer.setOption({
xAxis:{
data:date
},
series:[{
name:'成交',
data:data
}]
});
},1000)
</script>
</body>
</html>

echarts动态添加数据的更多相关文章

  1. echarts动态添加数据(饼图为例)

    $.ajax({type : "POST",async : false,url : '${ctx}/basic/bsAllPictureGuarantee/pictJson',da ...

  2. js表单动态添加数据并提交

    情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...

  3. 【javascript 动态添加数据到 HTML 页面】

    今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...

  4. 第27讲 UI组件之 ScrollView与底部动态添加数据

    第27讲 UI组件之 ScrollView与底部动态添加数据 1. ScrollView(滚动视图) ScrollView(滚动视图)是实现滚动的一个控件,只需要将需要滚动的控件添加到ScrollVi ...

  5. Android之ListView动态添加数据(SQLiteOpenHelper类添加数据)

    一.SQLiteOpenHelper类: 这次我们通过sqlite来动态添加数据,接下来我们创建一个openHelper.java,在前面sqlite博客中我们已经详细的讲了SQLite的创建及使用等 ...

  6. Jquery+Ajax实现Select动态添加数据

    https://blog.csdn.net/zhengxiangwen/article/details/46480687 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框 ...

  7. ASP.NET网页动态添加数据行

    一看到这标题<ASP.NET网页动态添加数据行>,想起来似乎有点难实现.因为网页的周期性原因,往往在PostBack之后,状态难于有所保留.但Insus.NET又想实现这样的效果,用户点击 ...

  8. 关于devexpress报表XtraReport,动态修改报表样式(.repx格式),动态添加数据并使用的理解

    一.基本概念: XtraReports 中的每个报表都由 XtraRepot 类的一个实例表示,或者由该类的子类来表示(这种情况更常见). 因此,每个报表都作为带区的容器使用,而每个带区中都包含报表控 ...

  9. silverlight RadGridView 动态添加数据列

    public void BindFaultGridInfo(IList<HealthStatusApp.Web.Models.FaultMajorModel> list) { rg_Fau ...

随机推荐

  1. .NET Framework 类库——C#命名空间大全

    引用地址:https://msdn.microsoft.com/zh-cn/library/gg145045.aspx C# using引用时,不知道有哪些命名空间,这下转载收集一篇,方面查找使用. ...

  2. Linux网络编程目录

    基本TCP套接字编程 1. 套接字API 简单的回射服务器 TCP:IO多路复用 1. 函数select.poll 2.函数epoll

  3. [转] JavaScript 之 ArrayBuffer

    JS里的ArrayBuffer 还记得某个晚上在做 canvas 像素级操作,发现存储像素的数据格式并不是Array类型,而是ArrayBuffer,心想这是什么鬼?后来查了一些资料,发现自己这半年来 ...

  4. .net core 发布后提示Start error

    纪录篇: 发布Core版本的项目后一直提示error,通过网络查询资料后确认梳理问题的逻辑   1.验证环境是否支持,开发环境及server环境        参考:https://docs.micr ...

  5. NEST - Elasticsearch 的高级客户端

    NEST - High level client Version:5.x 英文原文地址:NEST - High level client 个人建议:学习 NEST 的官方文档时,按照顺序进行,不宜跳来 ...

  6. python基础——list和tuple(列表和元组)

    1.list的定义,插入insert,append,按位置索引. >>> name = ['Macal','lily','lucy','bob']  --初始化>>> ...

  7. python 将列表(也可以是file.readlines())输出多个文件

    open_diff = open('yanggao.txt', 'r',encoding='utf-8')diff_line = open_diff.readlines() diff_match_sp ...

  8. 2018牛客网暑假ACM多校训练赛(第四场)B Interval Revisited 动态规划

    原文链接https://www.cnblogs.com/zhouzhendong/p/NowCoder-2018-Summer-Round4-B.html 题目传送门 - https://www.no ...

  9. 068 mapWithState函数的讲解

    1.问题 主要是updateStateByKey的问题 有的值不需要变化的时候,还会再打印出来. 每个批次的数据都会出现,如果向redis保存更新的时候,会把不需要变化的值也更新,这个不是我们需要的, ...

  10. CSS选择器 + Xpath + 正则表达式整理(有空再整理)

    选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstna ...