前言：formatter格式化方法。格式化之所以存在，主要是因?yàn)槲覀兿氚岩恍┎粔蛉诵曰膬?nèi)容通過處理讓其變成我們想要的樣子，便于用戶更好地理解內(nèi)容殴玛。
首先ECharts官網(wǎng)API提供了一些formatter格式化參數(shù)模板：
- 字符串模板
模板變量有 {a}, 添祸，{c}滚粟，jfzbzrb，{e}刃泌，分別表示系列名凡壤，數(shù)據(jù)名，數(shù)據(jù)值等蔬咬。 在 trigger 為'axis' 的時候鲤遥，會有多個系列的數(shù)據(jù)，此時可以通過{a0}, {a1}, {a2} 這種后面加索引的方式表示系列的索引林艘。 不同圖表類型下的{a}盖奈，狐援，{c}钢坦，frt7rvn含義不一樣。 其中變量{a}, 啥酱, {c}, xbvzrjd在不同圖表類型下代表數(shù)據(jù)含義為：
折線（區(qū)域）圖爹凹、柱狀（條形）圖、K線圖: {a}（系列名稱）镶殷，禾酱（類目值），{c}（數(shù)值）, f7blnvh（無）
散點(diǎn)圖（氣泡）圖 : {a}（系列名稱），颤陶（數(shù)據(jù)名稱）颗管，{c}（數(shù)值數(shù)組）, 7nxjttd（無）
地圖 : {a}（系列名稱），滓走（區(qū)域名稱）垦江，{c}（合并數(shù)值）, 9zb97fb（無）
餅圖、儀表盤搅方、漏斗圖: {a}（系列名稱）比吭，（數(shù)據(jù)項(xiàng)名稱）姨涡，{c}（數(shù)值）, vxj5tff（百分比）
- 回調(diào)函數(shù)
回調(diào)函數(shù)格式：(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
ECharts圖表組件內(nèi)的格式化常用的地方：
- tooltip
圖表內(nèi)數(shù)據(jù)點(diǎn)的懸浮框提示框信息展現(xiàn)的時候我們可以加以數(shù)據(jù)格式化衩藤，以便于更好地觀察數(shù)據(jù)和分析數(shù)據(jù)。
比如：在數(shù)值后加一個單位字符串
tooltip: {
trigger:'item',
padding:[20,10,20,10],
formatter:'{a} </br>涛漂:{c}%'
},
- axisLabel
坐標(biāo)軸刻度上面的刻度格式化慷彤，比如Y表示長度，我們往往需要在每一個刻度值后面帶上“m”的單位怖喻，Y軸意義不同，加不同的單位岁诉。
格式化Y軸刻度的示例代碼如下：
yAxis: [
{
type: 'value',
axisLabel: {
show:true,
formatter:'{value} m'
},
boundaryGap: ['0','20%']
}
],
- series內(nèi)的label
series: [
{
name:'常駐城市人數(shù)比例',
type:'bar',
barWidth:'45',
data:[10,15,20,25,30],
// data:citiesRate,
itemStyle: {
normal: {
color:new echarts.graphic.LinearGradient(
0,0,0,1,
[
{offset:0,color:'#7EDBFD'},
{offset:1,color:'#3169c7'}
]
),
label: {
show:true,
position:'top',
formatter:'{c}%'
}
},
emphasis: {
barBorderWidth:1,
shadowBlur:10,
shadowOffsetX:0,
shadowOffsetY:0,
shadowColor:'rgba(0,0,0,0.7)'
}
}
}
]
注意點(diǎn)：formatter格式化不但可以用echarts提供的模板锚沸，還可使用function。例如：
label:{
normal:{
formatter:function(v){
vartext=v.name;
returntext.length>10?text.substr(0,10)+"...":text;
}
}
}
