ECharts图表中级入门之formatter：夜谈关于ECharts图表内的数据格式化方法

来源于：http://www.ithao123.cn/content-3751220.html

格式化之所以存在，主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化，便于用户更好地理解内容。ECharts图表组件内的格式化方法formatter比起highcharts图表组件内的格式化方法差异还是有一些的，这里就不做它们之间的比较了。ECharts图表组件内的格式化常用的地方也不是很多，就来一起看看吧！

一、tooltip

图表内数据点的悬浮框提示框信息展现的时候我们可以加以数据格式化，以便于更好地观察数据和分析数据。

比如需要将当前数据点的值后面追加一个单位字符串，示例代码如下所示：

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.

},

效果图如下所示：



如果不太了解formatter方法内的参数，可以在function内设置debugger加入断点调试浏览数据结构。

二、axisLabel

坐标轴刻度上面的刻度格式化，比如一个很简单的例子，Y轴表示人的体重，我们往往需要在每一个刻度值后面带上kg的单位，我们应该如何进行刻度的格式化呢？

格式化Y轴刻度的示例代码如下：

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进行处理了的。效果图如下所示：



三、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

自己多琢磨，多练习很容易就上手的！