ECharts圖表中級入門之formatter：夜談關於ECharts圖表內的數據格式化方法

來源於：http://www.ithao123.cn/content-3751220.htmlhtml

格式化之因此存在，主要是由於咱們想把一些不夠人性化的內容經過某種處理讓其變得人性化，便於用戶更好地理解內容。ECharts圖表組件內的格式化方法formatter比起highcharts圖表組件內的格式化方法差別仍是有一些的，這裏就不作它們之間的比較了。ECharts圖表組件內的格式化經常使用的地方也不是不少，就來一塊兒看看吧！數組

1、tooltip數據結構

圖表內數據點的懸浮框提示框信息展示的時候咱們能夠加以數據格式化，以便於更好地觀察數據和分析數據。異步

好比須要將當前數據點的值後面追加一個單位字符串，示例代碼以下所示：spa

    view sourceprint? 
  
   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. 
   },

效果圖以下所示：debug

若是不太瞭解formatter方法內的參數，能夠在function內設置debugger加入斷點調試瀏覽數據結構。調試

2、axisLabelcode

座標軸刻度上面的刻度格式化，好比一個很簡單的例子，Y軸表示人的體重，咱們每每須要在每個刻度值後面帶上kg的單位，咱們應該如何進行刻度的格式化呢？orm

格式化Y軸刻度的示例代碼以下：htm

    view sourceprint? 
  
   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進行處理了的。效果圖以下所示：

3、series內的label

也就是顯示數據標籤值得時候咱們每每也須要對其數據進行格式化，好比咱們想給數據值後面追加一個單位或者進行一個簡單的計算。示例代碼以下所示：

    view sourceprint? 
  
   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

本身多琢磨，多練習很容易就上手的！