Echarts--异步数据加载和更新

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>异步数据加载和更新</title>
</head>
<body>
<div id="main" style="width:800px;height:600px;"></div>
<script src="jquery.min.js"></script>
<script src="echarts.js"></script>
<script>
$(function(){
myChart = echarts.init(document.querySelector(‘#main‘));
myChart.setOption({
title:{
text:‘异步数据加载示例‘
},
tooltip:{},
legend:{
data:[‘销量‘]
},
xAxis:{
data:[]
// data:[‘衬衫‘,‘羊毛衫‘,‘雪纺衫‘,‘裤子‘,‘高跟鞋‘,‘袜子‘]
},
yAxis:{},
series:[{
name:‘销量‘,
type:‘bar‘,
data:[]
// data:[12,45,32,61,24,11]/
}]
})
myChart.showLoading();
var json=[{name:‘衬衫‘,value:12},{name:‘羊毛衫‘,value:45},{name:‘雪纺衫‘,value:32},{name:‘裤子‘,value:61},{name:‘高跟鞋‘,value:24},{name:‘袜子‘,value:11}]
var dataName = [];
var dataVal = [];
for(var i=0;i< json.length; i++){
dataName[i] = json[i].name;
dataVal[i] = json[i].value;
}
var time = setTimeout(function(){
clearTimeout(time);
myChart.setOption({
xAxis:{
data:dataName
},
series:[{
name:‘销量‘,
data:dataVal
}]
})
},3000)
var time1 = setTimeout(function(){
myChart.hideLoading();
},2800)

})

</script>
</body>
</html>
时间: 2024-10-27 04:07:58

Echarts--异步数据加载和更新的相关文章

vue使用ECharts时的异步更新与数据加载

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "Helvetica Neue"; color: #404040 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "Helvetica Neue"; color: #737373 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco

Echarts通过Ajax实现动态数据加载

Echarts(3.x版)官网实例的数据都是静态的,实际使用中往往会要求从服务器端取数据进行动态显示,官网教程里给出的异步数据加载很粗略,下面就以官网最简单的实例为例子,详细演示如下过程:1.客户端通过ajax发送请求:2.服务器端Servlet接收请求:3.生成json数据并返回给客户端:4.客户端接收数据后显示. 1.客户端通过ajax发送请求 先绘制一个最简单的Echarts图表: (这里就直接贴上代码了,直接用的是官网教程里异步数据加载和更新里的代码) <!DOCTYPE html PU

使用异步任务加载网络上json数据并加载到ListView中

Android中使用网络访问来加载网上的内容,并将其解析出来加载到控件中,是一种很常见的操作.但是Android的UI线程(也就是主线程)中是不允许进行耗时操作的,因为耗时操作会阻塞主线程,影响用户体验.而访问网络同样是一个耗时操作,并且Android3.0以后是不允许在主线程中访问网络的,所以我们这里用Android封装好的AsyncTask类来完成这些耗时操作. 项目的目录结构如下: AsyncTask是一个抽象类,实际上他是封装好的一个类,底层也是用handler和thread来实现的,我

android异步任务加载数据界面实现

android 异步任务的一个后台方法本质是开启一个线程完成耗时操作,其他onPostExecute方法和onPreExecute方法运行在UI主线程用于更新UI界面.为了提高用户体验常见的异步任务加载方式现在总结如下: 1.异步加载界面效果如下: 关键代码如下所示: /** * 异步任务给列表加载数据 */ private void fillData(){ new AsyncTask<Void,Void,Void>(){ @Override protected void onPreExecu

安卓简历技术点——熟练掌握ListView的优化及异步任务加载网络数据。

对于面试,可能listview这个问题,永远高频出现,毕竟开发中,他出现的也是高频的. 我先说下基本优化 listview优化 1.复用减少内存消耗---->convertView进行判断是否为空,不为空的时候,直接重新使用.为空的时候给他一个布局 2.减少查找id的次数----->定义一个ViewHolder 存储控件,然后与convertView绑定起来 对于以上的两条如果说你能在项目中用到并且将Viewholder抽取到一个单独的类中进行复用,面试官对你看法会有所提高的. 继续吧 如果对

listview的数据加载

效果如图: listview的数据加载,主要用了Scroll监听来判断其位置是否需要加载信息,如果需要加载信息就先显示加载数据的view,然后进行数据的加载,加载完成后,设加载数据的view不可见,如果加载数据的时候数据位null,这时就移除这个view. listView.addFooterView(moreView); // 添加底部view(上图中的数据加载中...),一定要在setAdapter之前添加,否则会报错. listView.removeFooterView(moreView)

[Aaronyang] 写给自己的WPF4.5 笔记6[三巴掌-大数据加载与WPF4.5 验证体系详解 2/3]

我要做回自己--Aaronyang的博客(www.ayjs.net) 博客摘要: Virtualizing虚拟化DEMO 和 大数据加载的思路及相关知识 WPF数据提供者的使用ObjectDataProvider 和 XmlDataProvider WPF验证 第一:使用自带的属性SET抛出异常,前台捕捉到异常,描红 第二:我们可以自定义验证规则,替代刚开始的异常捕捉验证 第三:我们可以使用INotifyDataErrorInfo方式,增加异常,并实现了验证通知和还原非法值 第四:我们使用了Er

Android5.1图库Gallery2代码分析数据加载流程

图片数据加载流程. Gallery---->GalleryActivity------>AlbumSetPage------->AlbumPage--------->PhotoPage 相册集                        照片集                 某张图片 1,AlbumSetPage.java private void initializeData(Bundle data) { String mediaPath = data.getString(A

cocos2dx3.2 异步动态加载--------保卫萝卜开发总结(一)

半个月没有更新博客,从这个项目开始学习了很多细节的东西,都不太成系统,但是却是开发上线中必须经历的东西.比如超级玛丽系列(一)中的正确的异步加载,正确的分层.正确的合成和加载plist.及时的移除未使用的cache.按照关卡动态加载当前关卡所需的资源等. 本章只分享一下异步加载的逻辑,如有不对的地方还望大家及时指出. 目前我代码中需要异步加载的资源一共有四类: 1.png    单个png的情况比较少 2.plist和png一起的打包资源 3.plist和pvr.ccz一起的打包资源 4.Coc