echarts图表经常需要ajax请求刷新,以下为使用实例:
在向图表option传递数据时,要使用函数传参的形式。
var units=[];
var cap=[];
function reChanNeng(){
$.ajax({
type : "post" ,
async : true , //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url : "UnitCNservlet" , //请求发送到UnitCNservlet处
data : {},
dataType : "json" , //返回数据形式为 json
success : function (result) {
for ( var i=0; i<result.length; i++)
{
switch (result[i].UNIT){
case '0101' :units[i]= '单元一' ; break ;
case '0102' :units[i]= '单元二' ; break ;
case '0103' :units[i]= '单元三' ; break ;
case '0104' :units[i]= '单元四' ; break ;
case '0105' :units[i]= '单元五' ; break ;
case '0106' :units[i]= '单元六' ; break ;
}
cap[i]=(result[i].CAP_SCORE);
}
setOption(units,cap); //将取得数据传递给 echarts
},
error : function (errorMsg) {
//请求失败时执行该函数
alert( "图表请求数据失败!" );
}
});
}
var channeng=document.getElementById( 'ChanNeng' );
var myChanNeng=echarts.init(document.getElementById( 'ChanNeng' ));
//需要使用传参的形式
function setOption(date1,date2){
var option={
color: [ '#3398DB' ],
title : {
text: '线体产能' ,
subtext: '数据来自MDS'
},
tooltip : {
trigger: 'axis' ,
formatter: "{a} <br/>{b} : {c} %"
},
legend: {
data:[ '线体产能' ]
},
toolbox: {
show : true ,
feature : {
dataView : {show: true , readOnly: false },
magicType : {show: true , type: [ 'line' , 'bar' ]},
restore : {show: true },
saveAsImage : {show: true }
}
},
calculable : true ,
xAxis : [
{
type : 'category' ,
data:date1
}
],
yAxis : [
{
type : 'value' ,
}
],
series : [
{
name: '线体产能' ,
type: 'bar' ,
data:date2,
barWidth: '50%'
},
]
};
myChanNeng.setOption(option);
};