echarts关系图动态获取数据

最近在做一个项目的时候由于需要将数据用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;iif(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);//重新绘制
                    },    
                }); 
            }    
})

这样做之后就不用一次性过去全部数据了,而是点击哪里就根据哪个节点获取后面的部分数据,大大的减少了查询时间

你可能感兴趣的:(echarts)