异步加载 Echarts图的数据
<script src="~/Scripts/NewEcharts/echarts.js"></script>
<script type="text/javascript">
var myChart; $(function () { load();
}); function load() {
require.config({
paths: {
//echarts: '../Scripts/Echartsjs'
echarts: '../Scripts/NewEcharts'
}
});
require(
[
'echarts',
'echarts/chart/bar'
//'echarts/chart/line'
//'echarts/chart/map'
],
DrawEchart
);
} function DrawEchart(ec) { //--- 折柱 ---
myChart = ec.init(document.getElementById('EchartsDiv')); //图表显示提示信息
myChart.showLoading({
text: "图表数据正在努力加载..."
});
//定义图表
var option = {
tooltip: {
trigger: 'axis'
},
//color: '#66B3FF',
animation: false,
addDataAnimation: false,
calculable: true,
xAxis: [
{ type: 'value',
boundaryGap: [0, 0.01]
}
],
yAxis: [
{
splitLine: {
show: false
},//分隔线
//splitArea: { show: false },//分隔区域
type: 'category',
// data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
data:[]
}
],
series: [
{
name: '资源使用情况',
color: '#66B3FF ',
type: 'bar',
// data: [18203, 23489, 29034, 104970, 131744, 630230]
data:[]
}
]
}; //通过Ajax获取数据
$.ajax({
type: "post",
async: false, //同步执行
url: "/Report/GetVMUsedInfo",
dataType: "json", //返回数据形式为json
data: {rnd:Math.random()},
success: function(result) {
if (result) {
//将返回的category和series对象赋值给options对象内的category和series
//因为xAxis是一个数组 这里需要是xAxis[i]的形式
option.yAxis[0].data = result.yAxis;
option.series[0].data = result.series;
myChart.hideLoading();
myChart.setOption(option);
}
},
error: function(errorMsg) {
alert("图表请求数据失败啦!");
}
});
//myChart.hideLoading();
//myChart.setOption(option);
}
</script>
返回用的是 json数据;
后台使用的Asp.net MVC,使用了匿名类(主要是为了方便),
var newObj = new
{
yAxis =result.Data.DanweiList,
series= result.Data.ApplyVMEventList
}; return Json(newObj, JsonRequestBehavior.AllowGet);
异步加载 Echarts图的数据的更多相关文章
- H5异步加载多图
异步加载多图(可能没啥用,加载慢)(图片预加载,提前给浏览器缓存图片) 1. 用一个计数变量记录需要加载的图片个数 2. 用new Image()去加载,加载完给此对象的src赋值要加载的url路径( ...
- jquery异步加载json格式的数据
1.直接使用$.getJSON()方法是加载不了与静态界面同级别的本地的json后缀的文件. 2.解决办法:将json后缀的文件改为js后缀,这样就相当于加载了一个js文件. 解决办法:用$.getS ...
- vue-awesome-swiper中的数据异步加载
<template> <div> //第一个轮播 加了v-if 判断,可以实现 loop 轮循 <swiper v-if="gglist.length>1 ...
- Android学习笔记_36_ListView数据异步加载与AsyncTask
一.界面布局文件: 1.加入sdcard写入和网络权限: <!-- 访问internet权限 --> <uses-permission android:name="andr ...
- android 之图片异步加载
一.概述 本文来自"慕课网" 的学习,只是对代码做一下分析 图片异步加载有2种方式: (多线程/线程池) 或者 用其实AsyncTask , 其实AsyncTask底层也是用的多 ...
- Android 之异步加载LoaderManager
LoaderManager: Loader出现的背景: Activity是我们的前端页面展现,数据库是我们的数据持久化地址,那么正常的逻辑就是在展示页面的渲染页面的阶段进行数据库查询.拿到数据以后才展 ...
- ajax二次封装之异步加载
ajax二次封装之异步加载 ajax异步加载会导致在数据未加载回来就读取数据,然后出现数据为空的报错.在ajax封装时,将ajax直接改为同步,虽然可以解决报错,但是会导致页面渲染被阻塞,接口反应时间 ...
- 小程序中使用ECharts 异步加载数据
官网例子都是同步的,怎么引入及同步demo请移步官网 <view class="container"> <ec-canvas id="mychart-d ...
- H5+JS+JQuery+ECharts实现异步加载
这几天,看了一下ECharts官网的API和Demo发现很有意思,于是就利用模型预测产生的数据做一个伪实时的动态数据显示 . 首先,创建一个index.html的文件,我用的vscode打开的,进行编 ...
随机推荐
- [USACO09DEC] Cow Toll Paths
https://www.luogu.org/problem/show?pid=2966 题目描述 Like everyone else, FJ is always thinking up ways t ...
- LightOJ 1226 - One Unit Machine Lucas/组合数取模
题意:按要求完成n个任务,每个任务必须进行a[i]次才算完成,且按要求,第i个任务必须在大于i任务完成之前完成,问有多少种完成顺序的组合.(n<=1000 a[i] <= 1e6 mod ...
- LightOJ 1028 - Trailing Zeroes (I) 质因数分解/排列组合
题意:10000组数据 问一个数n[1,1e12] 在k进制下有末尾0的k的个数. 思路:题意很明显,就是求n的因子个数,本来想直接预处理欧拉函数,然后拿它减n就行了.但注意是1e12次方法不可行.而 ...
- MyBatis框架的使用及源码分析(二) 配置篇 SqlSessionFactoryBuilder,XMLConfigBuilder
在 <MyBatis框架中Mapper映射配置的使用及原理解析(一) 配置与使用> 的demo中看到了SessionFactory的创建过程: SqlSessionFactory sess ...
- jquery checkbox选中状态以及实现全选反选
jquery1.6以下版本获取checkbox的选中状态: $('.ck').attr('checked'); $('.ck').attr('checked',true);//全选 $('.ck'). ...
- Ajax请求Spring Mvc 时总是返回 302 Moved Temporarily
功能上主要是实现在前台点击保存按钮,单元格变成文本框,修改值后请求后台保存数据.但在做的过程中,ajax 请求总是不能请求到后.打开浏览器调试,查看到http状态码总是返回 http/1.1 302 ...
- UOJ#179. 线性规划[模板]
传送门 http://uoj.ac/problem/179 震惊,博主竟然还不会线性规划! 单纯形实在学不会啊……背个板子当黑盒用…… 学(chao)了NanoApe dalao的板子 #includ ...
- bzoj 1696: [Usaco2007 Feb]Building A New Barn新牛舍 ——中位数排序
Description 经过多年的积蓄,农夫JOHN决定造一个新的牛舍.他知道所有N(2 <= N <= 10,000)头牛的吃草位置,所以他想把牛舍造在最方便的地方. 每一头牛吃草的位置 ...
- 4.0docker部署
设置容器的端口映射 -P :容器暴露的所有端口映射 -p :指定映射容器暴露的端口 Nginx部暑流程 docker run -p 80 --name web -t -i ubuntu /bin/b ...
- python中range函数与列表中删除元素
一.range函数使用 range(1,5) 代表从1到4(不包含5),结果为:1,2,3,4 ,默认步长为1 range(1,5,2) 结果为:1, 3 (同样不包含5) ,步长为2 ...