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

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

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

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

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

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

上代码：

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

1. tooltip:{
2. trigger:'axis',
3. formatter:function(params,ticket,callback){
4. vardata_week=params[0][1];
5. getdata_range(data_week);
6. setTimeout(function(){
7. //仅为了模拟异步回调
8. callback(ticket,'第'+data_week+'周'+$("#custom_input").val()+'<br/>'+params[0][0]+':'+params[0].data);
9. },800)
10. return"Loading";
11. }
12. },

functiongetdata_range(week){
1. if(typeof(week)=="string"){
2. varss=$.ajax({
3. type:"get",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> url:"getdata_range_custom",
4. data:{week:week},108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> success:function(data){
5. console.log("返回的日期区间是"+data);
6. $("#custom_input").val(data);
7. returndata;
8. });
9. returnss;
10. }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!