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

来源:互联网 发布:民可使由之 不可使知之 编辑:程序博客网 时间:2024/05/18 05:19


最近做大数据可视化视图展现,随着业务的加深,正常的简单的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.                             var data_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.                         },  
  1. function getdata_range(week){  
  2.                   if(typeof(week)=="string"){  
  3.                         var ss=  $.ajax({  
  4.                      type:"get",  
  5.                      url:"getdata_range_custom",  
  6.                      data:{week:week},  
  7.                      success:function(data){  
  8.                          console.log("返回的日期区间是"+data);  
  9.                          $("#custom_input").val(data);  
  10.                          return data;  
  11.                      },  
  12.                   });  
  13.                   }  
  14.                 return ss;  
  15.                 }  

原创粉丝点击