ECharts 异步加载数据及loading 动画
异步加载
echarts 示例中的数据是在初始化后setOption
中直接填入的,但是很多时候可能数据需要异步加载后再填入。ECharts
中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption
填入数据和配置项就行。
var myChart = echarts.init(document.getElementById('main'));$.get('data.json').done(function (data) {myChart.setOption({title: {text: '异步数据加载示例'},tooltip: {},legend: {data:['销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]});
});
或者先设置完其它的样式,显示一个空的直角坐标轴,然后获取数据后填入数据。
var myChart = echarts.init(document.getElementById('main'));
// 显示标题,图例和空的坐标轴
myChart.setOption({title: {text: '异步数据加载示例'},tooltip: {},legend: {data:['销量']},xAxis: {data: []},yAxis: {},series: [{name: '销量',type: 'bar',data: []}]
});// 异步加载数据
$.get('data.json').done(function (data) {// 填入数据myChart.setOption({xAxis: {data: data.categories},series: [{// 根据名字对应到相应的系列name: '销量',data: data.data}]});
});
loading 动画
如果数据加载时间较长,一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了,因此需要一个 loading 的动画来提示用户数据正在加载。
ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。
myChart.showLoading({text: 'loading',color: '#4cbbff',textColor: '#4cbbff',maskColor: 'rgba(0, 0, 0, 0.9',
});
$.get('data.json').done(function (data) {myChart.hideLoading();myChart.setOption(...);
});
ECharts 异步加载数据及loading 动画相关推荐
- 学习下ECharts 异步加载数据
ECharts 通常数据设置在 setOption 中,如果我们需要异步加载数据,可以配合 jQuery等工具,在异步获取数据后通过 setOption 填入数据和配置项就行. ECharts 通常数 ...
- echarts异步加载数据
第一步,在项目中添加echarts库 第二步,使用json文件模拟后台数据,json文件如下: 第三步,详细看代码实现,柱形图 jquery的get()方法,请求jsonfile02.json文件 j ...
- 可视化 | Echarts基础异步加载数据交互组件数据集
目录 1. ECharts 简介 2. ECharts 安装 3. ECharts 配置语法 4. ECharts 图饼 5. ECharts 样式设置 6. ECharts 异步加载数据 7. EC ...
- Echarts 图表在异步加载数据时,增加loading动画,提升用户体验感
文章目录 一.简介 二.增加loading加载动效 2.1 实现原理 2.2 实现步骤 2.3 实现效果图 三.完整源代码及解析 一.简介 Echarts 图表在异步请求数据时,如果加载时间较长,一个 ...
- ajax实现向上正在加载,向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)
/**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...
- 新手教程:不写JS,在MIP页中实现异步加载数据
从需求谈起:在 MIP 页中异步加载数据 MIP(移动网页加速器) 的 加速原理 除了靠谱的 MIP-Cache CDN 加速外,最值得一提的就是组件系统.所有 JS 交互都需要使用 MIP 组件实现 ...
- JQuery Datatables 动态配置参数异步加载数据
背景需求 在前端动态设置datatables需要传递到后端的查询参数,异步加载返回的数据.点击这里进入datatables中文网异步加载数据说明 直接上代码 var table; var url = ...
- highcharts.js两种数据绑定方式和异步加载数据的使用
一,我们先来看看异步加载数据的写法(这是使用MVC的例子) 1>js写法 <script src="~/Scripts/jquery-2.1.4.min.js"> ...
- SharePoint 实现ajax异步加载数据的几种方式
初到公司,由原想的asp.net开发转向了SharePoint(简称SP)开发,个人感觉与之前差别不大,今天用sp实现异步加载数据的时候遇到点问题,之前在asp.net下一步都是用 jquery.aj ...
最新文章
- 功能实现了软件就做好了吗?
- 响应式布局框架 Pure-CSS 5.0 示例中文版-下
- 深入理解Spring Redis的使用 (一)、Spring Redis基本使用
- 时间同步绝对是一个大问题
- P2197 【模板】nim 游戏(python3实现)
- ZZULIOJ 1119: 一维数组排序
- JAVA设计模式 - 单例模式
- Linux正则表达式与grep
- 华为腾讯众安微众360大咖齐聚,2019中国区块链开发者大会首批议程曝光!
- 使用kubectl访问Kubernetes集群时的身份验证和授权
- python怎么做q检验_python – 如何检测pyside2中Qwebengine内部的按钮单击
- linux更改文件系统格式,只安装Linux系统,把硬盘全部格式化成Linux文件系统
- 以十年维度思考技术的发展
- 澳大利亚麦考瑞大学计算机系杨坚教授团队招收2022-2023年博士研究生
- Linux内核网络分层模型——skb核心操作
- ReactNative连接android模拟器
- 怎样提高平面设计色彩表现力
- 存储空间不足,无法完成此操作
- 成功的道路并不拥挤,别那么早放弃
- gyp ERR! stack Error: EACCES: permission denied, mkdir
热门文章
- 为什么要使用memcache?memcache有什么作用?
- python beautifulsoup库
- Spring核心思想,IoC与DI详解(如果还不明白,放弃java吧)
- 【测试】linux tc命令|Linux模拟网络延迟、丢包等|traffic control(流量控制)
- 全景视频拼接的关键技术与发展优势、作用、应用。
- 亚马逊云科技北京区域第二个EC2可用区帮助客户构建高可用架构
- e1000网络驱动分析
- 合作开发收费系统——临时表解决用户重复登录问题
- 计量经济学之时间序列的平稳性、单位根检验、协整检验、时间序列数据的一般处理流程
- python--爬虫--爬虫学习路线指南