Echarts扩展之ajax异步加载tooltip数据

最近做大数据可视化视图展现,随着业务的加深,正常的简单的echars里面的实例已经满足不了现有的需求;所以就需要对echarts进行更深一步的了解;

因为接触echars比较早,所以现在使用的是echarts的2.*版本;最新的echarts3添加了非常多的人性化的设计;非常好,但是还没来得及深入研究;

废话不多说;直角系视图包括折线图、柱状图 加载完页面之后点击数据的点会弹出相应的数据信息;在tooltip中设置可以实现基本的展现;

现在遇到的问题是需要判断当前周数,并且在tooltip中显示对应的周的起止时间;之前尝试过通过前台js函数来实现这一操作;但是最后发现这个耗时耗力,网上实例良莠不齐;最后还不如自己写,但是自己又不想写。

最后只能使用异步加载数据库的方式来实现这一需求;(数据库中存有日期和对应的周数的字段,查询周数可以得到对应的日期的集合0.0)

上代码:

option里面tooltip的设置:$("#custom_input")是一个隐藏的input;

 tooltip : {
                 	        trigger: 'axis',
                 	   	formatter:function(params,ticket,callback){
             	    		var data_week = params[0][1];
             	    		getdata_range(data_week);
             	    	    setTimeout(function (){
             	                // 仅为了模拟异步回调
             	                callback(ticket, '第'+data_week+'周 ' +$("#custom_input").val()+'<br/>'+params[0][0]+':'+params[0].data);
             	            }, 800)
             	    		return "Loading";
             	    	}
                 	    },

getdata_range方法:

function getdata_range(week){
              	  if(typeof(week)=="string"){
              			var ss=  $.ajax({
              		 type:"get",
              		 url:"getdata_range_custom",
              		 data:{week:week},
              		 success:function(data){
              			 console.log("返回的日期区间是"+data);
              			 $("#custom_input").val(data);
              			 return data;
              		 },
              	  });
              	  }
              	return ss;
                }


后台代码就不粘了 太繁琐;就是简单的查询数据返回结果的过程。


大体的逻辑就是:当用户点击对应的数据点的时候出发异步加载函数;返回值传给dom对象的input ;然后在调用function的回调函数获取input的value值。实现异步加载;


遇到的问题:

在使用function(params,trick,callback)方法之前;因为自定义过yAxis的显示数值,以为tooltip中的格式化数据也是相同的,所以走了很大的弯路,最后查询api才知道这个异步加载的方法;

第二个问题就是:当点击数据点的时候会触发两次事件(echarts内部的,不清楚为啥),一个是正常的week值,另一次是undefined;所以会请求两次数据库;浪费资源,存在不安全隐患。处理方法是if(typeof(week)=="string")  判断一下传入数据的类型。





评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值