來源於：http://www.ithao123.cn/content-3751220.html
格式化之所以存在，主要是因為我們想把一些不夠人性化的內容通過某種處理讓其變得人性化，便於用戶更好地理解內容。ECharts圖表組件內的格式化方法formatter比起highcharts圖表組件內的格式化方法差異還是有一些的，這里就不做它們之間的比較了。ECharts圖表組件內的格式化常用的地方也不是很多，就來一起看看吧！
一、tooltip
圖表內數據點的懸浮框提示框信息展現的時候我們可以加以數據格式化，以便於更好地觀察數據和分析數據。
比如需要將當前數據點的值后面追加一個單位字符串，示例代碼如下所示：
01.
tooltip : {
02.
trigger: 'axis',
03.
formatter:function(a)
04.
{
05.
var relVal = "";
06.
relVal = a[0]+"°C<br/>";
07.
relVal += a[1]+"°C";
08.
return relVal;
09.
}
10.
},
效果圖如下所示：
如果不太了解formatter方法內的參數，可以在function內設置debugger加入斷點調試瀏覽數據結構。
二、axisLabel
坐標軸刻度上面的刻度格式化，比如一個很簡單的例子，Y軸表示人的體重，我們往往需要在每一個刻度值后面帶上kg的單位，我們應該如何進行刻度的格式化呢？
格式化Y軸刻度的示例代碼如下：
01.
yAxis : [
02.
{
03.
type : 'value',
04.
axisLabel : {
05.
formatter: function(value)
06.
{
07.
return value+"kg";
08.
}
09.
},
10.
splitArea : {show : true}
11.
}
12.
],
如果是X軸那么就是在xAxis內的axisLabel內的格式化方法formatter進行處理了的。效果圖如下所示：
三、series內的label
也就是顯示數據標簽值得時候我們往往也需要對其數據進行格式化，比如我們想給數據值后面追加一個單位或者進行一個簡單的計算。示例代碼如下所示：
01.
series : [
02.
{
03.
name:'蒸發量',
04.
type:'bar',
05.
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
06.
itemStyle:{
07.
normal:{
08.
label:{
09.
show:true,
10.
position:'top',
11.
textStyle:{
12.
fontSize:12,
13.
color:"green"
14.
},
15.
formatter:function(a,b,c){
16.
return c+"%";
17.
}
18.
}
19.
}
20.
}
21.
22.
}]
效果如下所示：
關於更多地方需要使用格式化方法可以繼續瀏覽更多精彩文章，同時也可以進入官網查看API文檔。這里補充一下formatter格式化方法的參數說明：
{string}，模板（Template），其變量為：
{a} | {a0}
{b} | {b0}
{c} | {c0}
{d} | {d0} （部分圖表類型無此項）
多值下則存在多套{a1}, {b1}, {c1}, {d1}, {a2}, {b2}, {c2}, {d2}, ...
其中變量a、b、c在不同圖表類型下代表數據含義為：
折線（區域）圖、柱狀（條形）圖: a（系列名稱），b（類目值），c（數值）, d（無）
散點圖（氣泡）圖 : a（系列名稱），b（數據名稱），c（數值數組）, d（無）
餅圖、雷達圖 : a（系列名稱），b（數據項名稱），c（數值）, d（百分比）
弦圖 : a（系列名稱），b（項1名稱），c（項1-項2值），d（項2名稱)， e(項2-項1值)
力導向圖 :
節點 : a（類目名稱），b（節點名稱），c（節點值）
邊 : a（系列名稱），b（源名稱-目標名稱），c（邊權重）， d（如果為true的話則數據來源是邊）
{Function}，傳遞參數列表如下：
<Array> params : 數組內容同模板變量，[[a, b, c, d], [a1, b1, c1, d1], ...]
<String> ticket : 異步回調標識
<Function> callback : 異步回調，回調時需要兩個參數，第一個為前面提到的ticket，第二個為填充內容html
自己多琢磨，多練習很容易就上手的！