最近在做一个项目的时候由于需要将数据用echarts关系图展示到前端,最开始的想法是一次性将数据全部查出来,然后展示到前端,
但是后面发现,在数据量很大的情况下,一次查询将花费很长的时间,于是后面就想,为什么不按需来查呢,下面就是我通过ajax异步获取数据实现的按需查询,不得不说,效率大大的提高。
前面的初始化什么的就不说了,直奔主题
首先要知道echarts3.0点击事件的添加,很简单
第一个参数代表是点击,第二个代表的是点击之后要做的事情
mycharts.on('click',function choose(param){
var option = myChart.getOption();//获取已生成图形的option
var nodesOption = option.series[0].nodes;//获得所有节点数组
var linksOption = option.series[0].links;//获得所有连接的数组
var data = param.data;//表示当前选择的某一节点
var first= nodesOption[0].id
//添加点击事件
if (typeof param.seriesIndex == 'undefined') {
return;
}
if (param.type == 'click'&¶m.name!=first&¶m.data.flag==true) {
//当点击事件发生并且满足条件的时候
var jadata=[]; 定义数据数组
var jlink=[]; 定义关系数组
var index=0;
for(i=0;i<nodesOption.length;i++){
if(nodesOption[i].id==data.id){
index=i; //找出当前点击的节点的索引
}
}
$.ajax({
url:"getNextData", //服务器的地址
data:"name="+param.name, //参数
dataType:"text", //返回数据类型
type:"POST", //请求类型
success:function(ja){ //从服务器端接受json字符串数据
var result =JSON.parse(ja);//转化为json对象
nodesOption[index].flag=false;//当前节点标记为已点击
nodesOption= mergeArray(nodesOption,result)//数组合并
//这里数组合并的方法就不贴出来了,就是将一个数组与另一个数组比较,删除共有的,然后合并
myChart.setOption(option);//重新绘制
},
});
$.ajax({
url:"getNextLink", //服务器的地址
data:"name="+param.name, //参数
dataType:"text", //返回数据类型
type:"POST", //请求类型
success:function(jalink){
var result =JSON.parse(jalink);
linksOption= mergeArray(linksOption,result)//数组合并
myChart.setOption(option);//重新绘制
},
});
}
})
这样做之后就不用一次性过去全部数据了,而是点击哪里就根据哪个节点获取后面的部分数据,大大的减少了查询时间