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'&&param.name!=first&&param.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);//重新绘制
                    },    
                }); 
            }    
})

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

  • 7
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值