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);
};
3762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
