在談 formatter 之前，先來說說 grid。在官方文件中，grid 介紹的很詳細。

grid 為直角座標系內繪圖網格，可以設定 x y x2 y2 等值。這在控制圖表擺放位置上，起了重要的作用。 

如圖所示，

x 為直角座標系內繪圖網格左上角橫座標，數值單位px，支援百分比（字串），如'50%'(顯示區域橫向中心)

y 為左上縱座標，x2為右下橫座標，y2為右下縱座標。

需要設定的話，就按照tooltip 或 legend 的格式設定就行。

接下來就是 formatter 了。為了彌補 echarts 在時間或計量單位上格式的不足，echarts 暫時利用 formatter 來加上需要個格式，對資料呈現方式進行修改。

在設定 formatter 的時候可以用在 tooltip 和 y 軸上。

• {Function}，傳遞引數列表如下：
  • <Array> params : 陣列內容同模板變數，[[a, b, c, d, e, data], [a1, b1, c1, d1, e1, data1], ...]，不同的是當trigger為item時最後一項返回option中的完整data
  • <String> ticket : 非同步回撥標識
  • <Function> callback : 非同步回撥，回撥時需要兩個引數，第一個為前面提到的ticket，第二個為填充內容html
  • *函式回撥時this指標指向當前圖表例項（myChart）

這裡舉個例子：

1. tooltip : {  
2.     trigger: 'axis',  
3.     formatter: function(params,ticket,callback){  
4.         var res = params[0][0] + '<br/>';  
5.         for (var i = 0; i < params.length; i++) {  
6.             if (params[i][2]==1)   
7.                 {var rank="B"}  
8.             else
   if (params[i][2]==2)   
9.                 {rank="A"}  
10.             elseif (params[i][2]==3)   
11.                 {rank="C"};  
12.             res += params[i][1] + ": " + rank;  
13.         };  
14.         return res;  
15.     }  
16. },  

1. axisLabel:{  
2.     formatter : function(v) {  
3.         if (v == 1) {return'B'}  
4.         elseif (v ==2 ) {return'A'}  
5.         elseif (v ==3 ) {return'C'};  
6.     }  
7. },