使用Echarts的時候ajax第二次請求的時候，圖表會等待請求完成後才重新整理出來

標籤：and   shadow   ges   src   代碼   條件   請求   導致   載入   

在使用echarts圖表的時候，選完條件後，ajax請求的過程中，因為請求的事件快慢的原因，導致圖表會消失，給人的體驗感賊差（雖然可以通過類似“資訊載入中。。”來處理），

查看自己的代碼中發現了原因：var myChart1 = echarts.init(document.getElementById(‘app1‘));這句代碼放在了function中，導致每次請求的時候每次都會聲明一個

mychart1的對象，導致圖形頁面有一段時間（請求的時間）的不顯示；

頁面展示如下：

部分代碼如下（不對應上面的圖表）：

var myChartPie = echarts.init(document.getElementById(‘myChartPie‘));

/* 餅狀圖 */
var optionPie = {
tooltip : {
trigger: ‘item‘,
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: ‘vertical‘,
x:‘right‘,
//top:‘50%‘,
data: [],
textStyle:{
color:‘#FFF‘
}
},
color:[‘#FE9B1A‘,‘#82DAE4‘,‘#19BCB0‘,‘#BDBF26‘],
series : [
{
name: ‘訪問來源‘,
type: ‘pie‘,
radius : ‘55%‘,
center: [‘40%‘, ‘50%‘],
data:[

],
labelLine:{
normal:{
length:1,
}
},
itemStyle: {
normal:{
label:{
show: true,
position: ‘null‘,
formatter: ‘{b} :‘+‘\n‘+‘ ({d}%)‘ ,
textStyle:{fontFamily:‘microsoft yahei‘,color:‘‘}
},
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: ‘rgba(0, 0, 0, 0.5)‘
}
}
}
]
};

function loadPie(){

$.ajax({
url:util.warpRandom("${ctx}/zj/scenicView/getScenicPie.do?&json"),
data : {date :date,endDate:endDate},
//async: false,
type: "POST",
dataType:‘json‘,
error:function(){top.jAlert("伺服器異常");},
success:function(data){
optionPie.legend.data = [];
optionPie.series[0].data = [];
myChartPie.clear;
if (typeof (data) != ‘undefined‘ && data.length!=0) {
console.log($.toJSON(data));
//alert($.toJSON(data));
optionPie.legend.data.push(data[0].user_type,data[1].user_type,data[2].user_type,data[3].user_type);
optionPie.series[0].data.push({value:data[0].users, name:data[0].user_type},
{value:data[1].users, name:data[1].user_type},
{value:data[2].users, name:data[2].user_type},
{value:data[3].users, name:data[3].user_type});
myChartPie.setOption(optionPie);
}
}
});
}

 

使用Echarts的時候ajax第二次請求的時候，圖表會等待請求完成後才重新整理出來