echarts學習筆記(4) ---- 如何使用 formatter 和 grid 這兩把利器

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

見網址： http://echarts.baidu.com/doc/doc.html#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）

這裏舉個例子：

            tooltip : {
                trigger: 'axis',
                formatter: function(params,ticket,callback){
                    var res = params[0][0] + '<br/>';
                    for (var i = 0; i < params.length; i++) {
                        if (params[i][2]==1) 
                            {var rank="B"}
                        else if (params[i][2]==2) 
                            {rank="A"}
                        else if (params[i][2]==3) 
                            {rank="C"};
                        
                        res += params[i][1] + ": " + rank;
                    };
                    return res;
                }
            },

如果用 console 來看到 params 其實是一組模板中的變量，這裏都可以加到 variable res 中，然後將某些數字的變量變成我們想要的格式，然後 return 就行了。

                    axisLabel:{
                        formatter : function(v) {
                            if (v == 1) {return 'B'}
                            else if (v ==2 ) {return 'A'}
                            else if (v ==3 ) {return 'C'};
                        }
                    },

還有 y 軸的使用，就更加簡單，直接一個 function 搞定。