Echarts圖表中formatter的基本用法示例
1. 字符串模板
1.1 x軸y軸
//適應(yīng)字符串模板,模板變量為刻度默認(rèn)標(biāo)簽{value}
formatter:"{valur} %"
1.2 餅圖
(1){a}:系列名,series.name。
(2):數(shù)據(jù)名,series.data.name。
(3){c}:數(shù)據(jù)值,series.data.value。
(4)4cskqwy:百分比。
(5){@xxx}:數(shù)據(jù)中名為'xxx'的維度的值,如{@product}表示名為'product'` 的維度的值。
(6){@[n]}:數(shù)據(jù)中維度n的值,如{@[3]}` 表示維度 3 的值,從 0 開(kāi)始計(jì)數(shù)。
示例
formatter:":{c}(04ecwes%)"
//數(shù)據(jù)名 數(shù)據(jù)值 百分比1.3折線圖,柱狀圖
(1){a}:系列名,series.name。
(2):數(shù)據(jù)名,xAxis.data。
(3){c}:數(shù)據(jù)值,yAxis.data。
(5){@xxx}:數(shù)據(jù)中名為'xxx'的維度的值,如{@product}表示名為'product'` 的維度的值。
(6){@[n]}:數(shù)據(jù)中維度n的值,如{@[3]}` 表示維度 3 的值,從 0 開(kāi)始計(jì)數(shù)。
示例
formatter:"{a}<br/>{c}"
//系列名 數(shù)據(jù)名 數(shù)值值1.4多個(gè)屬性
formatter:"{b0}:{c0}<br/>{b1}:{c1}"2 函數(shù)模板
2.1 x軸,y軸
示例
// 使用函數(shù)模板,函數(shù)參數(shù)分別為刻度數(shù)值(類目),刻度的索引
formatter:function (value, index) {
return value;
}2.2提示框(tooptip)
第二個(gè)參數(shù) ticket 是異步回調(diào)標(biāo)識(shí),配合第三個(gè)參數(shù) callback 使用。 第三個(gè)參數(shù) callback 是異步回調(diào),在提示框浮層內(nèi)容是異步獲取的時(shí)候,可以通過(guò) callback 傳入上述的 ticket 和 html 更新提示框浮層內(nèi)容。
formatter: function (params, ticket, callback) {
$.get('detail?name=' + params.name, function (content) {
callback(ticket, toHTML(content));
});
return 'Loading';
}3 回調(diào)函數(shù)
語(yǔ)法:(params:Object | Array)=>string
參數(shù) params:
{
componentType: 'series',
// 系列類型
seriesType: string,
// 系列在傳入的 option.series 中的 index
seriesIndex: number,
// 系列名稱
seriesName: string,//series.name
// 數(shù)據(jù)名,類目名
name: string,
// 數(shù)據(jù)在傳入的 data 數(shù)組中的 index
dataIndex: number,
// 傳入的原始數(shù)據(jù)項(xiàng)
data: Object,
// 傳入的數(shù)據(jù)值。在多數(shù)系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)
value: number|Array|Object,//series.data
// 坐標(biāo)軸 encode 映射信息,
// key 為坐標(biāo)軸(如 'x' 'y' 'radius' 'angle' 等)
// value 必然為數(shù)組,不會(huì)為 null/undefied,表示 dimension index 。
// 其內(nèi)容如:
// {
// x: [2] // dimension index 為 2 的數(shù)據(jù)映射到 x 軸
// y: [0] // dimension index 為 0 的數(shù)據(jù)映射到 y 軸
// }
encode: Object,
// 維度名列表
dimensionNames: Array<String>,
// 數(shù)據(jù)的維度 index,如 0 或 1 或 2 ...
// 僅在雷達(dá)圖中使用。
dimensionIndex: number,
// 數(shù)據(jù)圖形的顏色
color: string,
// 百分比
percent: number,
}模板變量有 {a}, ,{c},qwc4yq4,{e},分別表示系列名,數(shù)據(jù)名,數(shù)據(jù)值等。 在 trigger 為'axis' 的時(shí)候,會(huì)有多個(gè)系列的數(shù)據(jù),此時(shí)可以通過(guò){a0}, {a1}, {a2} 這種后面加索引的方式表示系列的索引。 不同圖表類型下的{a},,{c},kuskkay含義不一樣。 其中變量{a}, , {c}, 0wyeuca在不同圖表類型下代表數(shù)據(jù)含義為:
u 折線(區(qū)域)圖、柱狀(條形)圖、K線圖: {a}(系列名稱),(類目值),{c}(數(shù)值), cmk4m4y(無(wú))
u 散點(diǎn)圖(氣泡)圖 : {a}(系列名稱),(數(shù)據(jù)名稱),{c}(數(shù)值數(shù)組), a444qek(無(wú))
u 地圖 : {a}(系列名稱),(區(qū)域名稱),{c}(合并數(shù)值), ausqay4(無(wú))
u 餅圖、儀表盤、漏斗圖: {a}(系列名稱),(數(shù)據(jù)項(xiàng)名稱),{c}(數(shù)值), soi4kiw(百分比)
2. 回調(diào)函數(shù)
回調(diào)函數(shù)格式:(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
ECharts圖表組件內(nèi)的格式化常用的地方:
1. tooltip
圖表內(nèi)數(shù)據(jù)點(diǎn)的懸浮框提示框信息展現(xiàn)的時(shí)候我們可以加以數(shù)據(jù)格式化,以便于更好地觀察數(shù)據(jù)和分析數(shù)據(jù)。
比如:在數(shù)值后加一個(gè)單位字符串
tooltip: {
trigger:'item',
padding:[20,10,20,10],
formatter:'{a} </br>:{c}%'
},2. axisLabel
坐標(biāo)軸刻度上面的刻度格式化,比如Y表示長(zhǎng)度,我們往往需要在每一個(gè)刻度值后面帶上“m”的單位,Y軸意義不同,加不同的單位。
格式化Y軸刻度的示例代碼如下:
yAxis: [
{
type: 'value',
axisLabel: {
show:true,
formatter:'{value} m'
},
boundaryGap: ['0','20%']
}
],3. 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;
}
}
}參考文章
ECharts formatter屬性設(shè)置3種方式(字符串模板,函數(shù)模板,回調(diào)函數(shù))
總結(jié)
到此這篇關(guān)于Echarts圖表中formatter的基本用法的文章就介紹到這了,更多相關(guān)Echarts圖表formatter用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript的9個(gè)陷阱及評(píng)點(diǎn)分析
以下是JavaScript容易犯錯(cuò)的九個(gè)陷阱。雖然不是什么很高深的技術(shù)問(wèn)題,但注意一下,會(huì)使您的編程輕松些,即所謂make life easier. 筆者對(duì)某些陷阱會(huì)混雜一些評(píng)點(diǎn)。2008-05-05
微信小程序云開(kāi)發(fā)實(shí)現(xiàn)分頁(yè)刷新獲取數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了微信小程序云開(kāi)發(fā)實(shí)現(xiàn)分頁(yè)刷新獲取數(shù)據(jù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08
頁(yè)面加載完畢后滾動(dòng)條自動(dòng)滾動(dòng)一定位置
希望頁(yè)面加載完畢后向左自動(dòng)滾動(dòng)一定位置,下面有個(gè)不錯(cuò)的方法可以輕松幫大家實(shí)現(xiàn)下2014-02-02
JavaScript實(shí)現(xiàn)找出數(shù)組中最長(zhǎng)的連續(xù)數(shù)字序列
這篇文章主要介紹了JavaScript實(shí)現(xiàn)找出數(shù)組中最長(zhǎng)的連續(xù)數(shù)字序列的方法,需要的朋友可以參考下2014-09-09
javascript 中select框觸發(fā)事件過(guò)程的分析
這篇文章主要介紹了javascript 中select框觸發(fā)事件過(guò)程的分析的相關(guān)資料,這里對(duì)select 觸發(fā)過(guò)程進(jìn)行了深入分析,幫助大家理解這部分內(nèi)容,需要的朋友可以參考下2017-08-08
移動(dòng)端網(wǎng)頁(yè)開(kāi)發(fā)調(diào)試神器Eruda的介紹與使用技巧
在日常的移動(dòng)端開(kāi)發(fā)時(shí),一般都是試用chrome瀏覽器的移動(dòng)端模式進(jìn)行開(kāi)發(fā)和調(diào)試,只有在chrome調(diào)試完成,而最近發(fā)現(xiàn)了一個(gè)新的調(diào)試方法,所以這篇文章主要給大家介紹了關(guān)于移動(dòng)端網(wǎng)頁(yè)開(kāi)發(fā)調(diào)試神器Eruda的基本資料,以及其使用的一些技巧,需要的朋友可以參考下。2017-10-10
JavaScript實(shí)現(xiàn)256色轉(zhuǎn)灰度圖
本文主要介紹了JavaScript實(shí)現(xiàn)256色轉(zhuǎn)灰度圖的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02
關(guān)于微信公眾號(hào)開(kāi)發(fā)無(wú)法支付的問(wèn)題解決
這篇文章主要介紹了關(guān)于微信公眾號(hào)開(kāi)發(fā)無(wú)法支付的問(wèn)題解決,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12

