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)vvxyksv9kd:百分比。
(5){@xxx}:數(shù)據(jù)中名為'xxx'的維度的值,如{@product}表示名為'product'` 的維度的值。
(6){@[n]}:數(shù)據(jù)中維度n的值,如{@[3]}` 表示維度 3 的值,從 0 開(kāi)始計(jì)數(shù)。
示例
formatter:":{c}(vvxyksv9kd%)" //數(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ù)值(類(lèi)目),刻度的索引 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', // 系列類(lèi)型 seriesType: string, // 系列在傳入的 option.series 中的 index seriesIndex: number, // 系列名稱(chēng) seriesName: string,//series.name // 數(shù)據(jù)名,類(lèi)目名 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},vvxyksv9kd,{e},分別表示系列名,數(shù)據(jù)名,數(shù)據(jù)值等。 在 trigger 為'axis' 的時(shí)候,會(huì)有多個(gè)系列的數(shù)據(jù),此時(shí)可以通過(guò){a0}, {a1}, {a2} 這種后面加索引的方式表示系列的索引。 不同圖表類(lèi)型下的{a},,{c},vvxyksv9kd含義不一樣。 其中變量{a}, , {c}, vvxyksv9kd在不同圖表類(lèi)型下代表數(shù)據(jù)含義為:
u 折線(區(qū)域)圖、柱狀(條形)圖、K線圖: {a}(系列名稱(chēng)),(類(lèi)目值),{c}(數(shù)值), vvxyksv9kd(無(wú))
u 散點(diǎn)圖(氣泡)圖 : {a}(系列名稱(chēng)),(數(shù)據(jù)名稱(chēng)),{c}(數(shù)值數(shù)組), vvxyksv9kd(無(wú))
u 地圖 : {a}(系列名稱(chēng)),(區(qū)域名稱(chēng)),{c}(合并數(shù)值), vvxyksv9kd(無(wú))
u 餅圖、儀表盤(pán)、漏斗圖: {a}(系列名稱(chēng)),(數(shù)據(jù)項(xiàng)名稱(chēng)),{c}(數(shù)值), vvxyksv9kd(百分比)
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)文章
JS實(shí)現(xiàn)PC手機(jī)端和嵌入式滑動(dòng)拼圖驗(yàn)證碼三種效果
這篇文章主要介紹了JS實(shí)現(xiàn)PC手機(jī)端和嵌入式滑動(dòng)拼圖驗(yàn)證碼三種效果,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02小程序如何在不同設(shè)備上自適應(yīng)生成海報(bào)的實(shí)現(xiàn)方法
這篇文章主要介紹了小程序如何在不同設(shè)備上自適應(yīng)生成海報(bào)的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08如何在JavaScript中實(shí)現(xiàn)私有屬性的寫(xiě)類(lèi)方式(一)
這篇文章主要介紹了如何在JavaScript中實(shí)現(xiàn)私有屬性的寫(xiě)類(lèi)方式。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12bootstrapValidator自定驗(yàn)證方法寫(xiě)法
這篇文章主要為大家詳細(xì)介紹了bootstrapValidator自定驗(yàn)證方法寫(xiě)法,研究bootstrapValidator驗(yàn)證,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12Chart.js 輕量級(jí)HTML5圖表繪制工具庫(kù)(知識(shí)整理)
這篇文章主要介紹了Chart.js 輕量級(jí)HTML5圖表繪制工具庫(kù),Chart.js基于HTML5 canvas技術(shù)支持所有現(xiàn)代瀏覽器,并且針對(duì)IE7/8提供了降級(jí)替代方案,感興趣的小伙伴們可以參考一下2018-05-05Express實(shí)現(xiàn)前端后端通信上傳圖片之存儲(chǔ)數(shù)據(jù)庫(kù)(mysql)傻瓜式教程(一)
這篇文章主要介紹了Express實(shí)現(xiàn)前端后端通信上傳圖片存儲(chǔ)數(shù)據(jù)庫(kù)(mysql)傻瓜式教程(一),需要的朋友可以參考下2015-12-12詳解javascript對(duì)數(shù)組和json數(shù)組的操作
這篇文章主要介紹了javascript對(duì)數(shù)組和json數(shù)組的操作,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04js實(shí)現(xiàn)文章文字大小字號(hào)功能完整實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)文章文字大小字號(hào)功能的實(shí)現(xiàn)方法,可根據(jù)用戶習(xí)慣調(diào)整顯示文字的大小.詳細(xì)講述了實(shí)現(xiàn)這一功能的完整步驟.是非常實(shí)用的技巧,需要的朋友可以參考下2014-11-11詳解微信小程序獲取當(dāng)前時(shí)間及日期的方法
這篇文章主要介紹了微信小程序獲取當(dāng)前時(shí)間及日期的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04