最近做大資料視覺化檢視展現，隨著業務的加深，正常的簡單的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";
             	    	}
                 	    },
 

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")  判斷一下傳入資料的型別。