码迷,mamicode.com
首页 > Web开发 > 详细

使用Echarts的时候ajax第二次请求的时候,图表会等待请求完成后才刷新出来

时间:2017-02-27 14:58:49      阅读:2157      评论:0      收藏:0      [点我收藏+]

标签: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第二次请求的时候,图表会等待请求完成后才刷新出来

标签:and   shadow   ges   src   代码   条件   请求   导致   加载   

原文地址:http://www.cnblogs.com/ljx563884657/p/6474137.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!