echarts异步数据加载MySQL_异步加载 Echarts图的数据

varmyChart;

$(function() {

load();

});functionload() {

require.config({

paths: {//echarts: '../Scripts/Echartsjs'

echarts:'../Scripts/NewEcharts'}

});

require(

['echarts','echarts/chart/bar'

//'echarts/chart/line'

//'echarts/chart/map'

],

DrawEchart

);

}functionDrawEchart(ec) {//--- 折柱 ---

myChart=ec.init(document.getElementById('EchartsDiv'));//图表显示提示信息

myChart.showLoading({

text:"图表数据正在努力加载..."});//定义图表

varoption={

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);

}