<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图的数据的更多相关文章

  1. H5异步加载多图

    异步加载多图(可能没啥用,加载慢)(图片预加载,提前给浏览器缓存图片) 1. 用一个计数变量记录需要加载的图片个数 2. 用new Image()去加载,加载完给此对象的src赋值要加载的url路径( ...

  2. jquery异步加载json格式的数据

    1.直接使用$.getJSON()方法是加载不了与静态界面同级别的本地的json后缀的文件. 2.解决办法:将json后缀的文件改为js后缀,这样就相当于加载了一个js文件. 解决办法:用$.getS ...

  3. vue-awesome-swiper中的数据异步加载

    <template> <div> //第一个轮播 加了v-if 判断,可以实现 loop 轮循 <swiper v-if="gglist.length>1 ...

  4. Android学习笔记_36_ListView数据异步加载与AsyncTask

    一.界面布局文件: 1.加入sdcard写入和网络权限: <!-- 访问internet权限 --> <uses-permission android:name="andr ...

  5. android 之图片异步加载

    一.概述 本文来自"慕课网" 的学习,只是对代码做一下分析 图片异步加载有2种方式:  (多线程/线程池) 或者 用其实AsyncTask , 其实AsyncTask底层也是用的多 ...

  6. Android 之异步加载LoaderManager

    LoaderManager: Loader出现的背景: Activity是我们的前端页面展现,数据库是我们的数据持久化地址,那么正常的逻辑就是在展示页面的渲染页面的阶段进行数据库查询.拿到数据以后才展 ...

  7. ajax二次封装之异步加载

    ajax二次封装之异步加载 ajax异步加载会导致在数据未加载回来就读取数据,然后出现数据为空的报错.在ajax封装时,将ajax直接改为同步,虽然可以解决报错,但是会导致页面渲染被阻塞,接口反应时间 ...

  8. 小程序中使用ECharts 异步加载数据

    官网例子都是同步的,怎么引入及同步demo请移步官网 <view class="container"> <ec-canvas id="mychart-d ...

  9. H5+JS+JQuery+ECharts实现异步加载

    这几天,看了一下ECharts官网的API和Demo发现很有意思,于是就利用模型预测产生的数据做一个伪实时的动态数据显示 . 首先,创建一个index.html的文件,我用的vscode打开的,进行编 ...

随机推荐

  1. cssText基本使用及注意事项

    一.cssText之起步 那些年,我们是这样设置样式的: xxx.style.width = "233px"; xxx.style.position = "fixed&q ...

  2. Linux之防火墙与端口

    1.关闭所有的 INPUT FORWARD OUTPUT 只对某些端口开放.下面是命令实现: iptables -P INPUT DROPiptables -P FORWARD DROPiptable ...

  3. Go语言的并发和并行

    不知道你有没有注意到,这段代码如果我跑在两个goroutines里面的话: package main import ( "fmt" ) func loop(done chan bo ...

  4. 【BZOJ1085】【SCOI2005】骑士精神 [A*搜索]

    骑士精神 Time Limit: 10 Sec  Memory Limit: 162 MB[Submit][Status][Discuss] Description 在一个5×5的棋盘上有12个白色的 ...

  5. 【BZOJ】1589: [Usaco2008 Dec]Trick or Treat on the Farm 采集糖果

    [算法]基环树DP [题意]给定若干有向基环树,每个点能走的最远路径长度. [题解] 参考:[BZOJ1589]Trick or Treat on the Farm 基环树裸DP by 空灰冰魂 考虑 ...

  6. 【BZOJ】4147: [AMPPZ2014]Euclidean Nim

    [算法]博弈论+数论 [题意]给定n个石子,两人轮流操作,规则如下: 轮到先手操作时:若石子数<p添加p个石子,否则拿走p的倍数个石子.记为属性p. 轮到后手操作时:若石子数<q添加q个石 ...

  7. 【CC2530入门教程-01】CC2530微控制器开发入门基础

    [引言] 本系列教程就有关CC2530单片机应用入门基础的实训案例进行分析,主要包括以下6部分的内容:[1]CC2530微控制器开发入门基础.[2]通用I/O端口的输入和输出.[3]外部中断初步应用. ...

  8. java 错误: 找不到或无法加载主类解决方法

    1.配置好jdk与jre环境变量路径 https://www.cnblogs.com/xch-yang/p/7629351.html 2.在编译和运行的时候需要注意如下格式.

  9. Python 对象模型 -- (转)

    面向对象的纯粹性 在很久很久以前,C++还被称为面向对象语言(现在一般称为多范式通用语言),人们就对C++的面向对象的纯粹性提出了质疑,主要有以下几点: 并非所有的对象都是对象(很拗口?),比如指针本 ...

  10. web服务器和数据库服务器不在一台机器上

    把localhost改成数据库所在的IP就行了. $link=mysql_connect( "202.195.246.202 ", "root ", " ...