ECharts?formatter屬性設(shè)置的3種方法(字符串模板,函數(shù)模板,回調(diào)函數(shù))
1 字符串模板
1.1 x坐標(biāo)軸、y坐標(biāo)軸
示例:
// 使用字符串模板,模板變量為刻度默認(rèn)標(biāo)簽 {value} formatter: '{value} kg'
1.2 餅圖
模板變量:
(1){a}:系列名,series.name。
(2):數(shù)據(jù)名,series.data.name。
(3){c}:數(shù)據(jù)值,series.data.value。
(4)ublnpf9mb:百分比。
(5){@xxx}:數(shù)據(jù)中名為'xxx'的維度的值,如{@product}表示名為'product'` 的維度的值。
(6){@[n]}:數(shù)據(jù)中維度n的值,如{@[3]}` 表示維度 3 的值,從 0 開始計(jì)數(shù)。
示例:
formatter:":{c}(ublnpf9mb%)"
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 開始計(jì)數(shù)。
示例:
formatter:"{a}<br/>:{c}"
1.4 多個(gè)系列
示例:
formatter: '{b0}: {c0}<br />{b1}: {c1}'
2 函數(shù)模板
2.1 x坐標(biāo)軸、y坐標(biāo)軸
示例:
// 使用函數(shù)模板,函數(shù)參數(shù)分別為刻度數(shù)值(類目),刻度的索引 formatter:function (value, index) { return value; }
2.2 提示框(tooltip)
第二個(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, }
附:Echarts中數(shù)據(jù)顯示實(shí)現(xiàn)formatter
對(duì)于第一種橫縱坐標(biāo)數(shù)據(jù)顯示的格式問(wèn)題,如:對(duì)于一個(gè)縱坐標(biāo)用來(lái)展示占比率0.5要將這個(gè)值展示位50%,對(duì)于坐標(biāo)軸的x,y軸的設(shè)置分別對(duì)應(yīng)著xAxis和yAxis這兩這個(gè)屬性,我們要將縱軸的值變換成50%,只需要在原始數(shù)值的基礎(chǔ)上乘以100然后拼接上%就可以了,具體的實(shí)現(xiàn)代碼如下:
yAxis : [ { type : 'value', name : 'y軸名稱', axisLabel : { formatter : function(val){ return val*100+"%"; } } } ]
對(duì)于第二個(gè)問(wèn)題坐標(biāo)軸中柱狀圖或者折線圖的數(shù)據(jù),這個(gè)主要是用來(lái)滿足需求:要在坐標(biāo)軸的每個(gè)點(diǎn)上將各自對(duì)應(yīng)的數(shù)據(jù)顯示下來(lái),這塊主要用到的是series中的label屬性,主要實(shí)現(xiàn)的代碼如下:
series : [ { name : '和legend的某一項(xiàng)對(duì)應(yīng)', type : 'bar', label : { normal : { show : true, position : 'top' } } data : data } ]
series中的name對(duì)應(yīng)的值要是legend中的某一項(xiàng),type就是你的這個(gè)圖形是什么類型,可以是bar或者line等,label中的show是用來(lái)設(shè)置是否顯示,position用來(lái)設(shè)置數(shù)據(jù)顯示在圖形的位置,data就是要顯示的數(shù)據(jù)。
對(duì)于第三種問(wèn)題,鼠標(biāo)滑到指定區(qū)域時(shí)的數(shù)據(jù)展示問(wèn)題,這塊用來(lái)的屬性主要是tooltip,具體的代碼實(shí)現(xiàn)如下:
tooltip : { trigger : 'axis', axisPointer : { // 坐標(biāo)軸指示器,坐標(biāo)軸觸發(fā)有效 type : 'shadow' // 默認(rèn)為直線,可選為:'line' | 'shadow' }, formatter : '{a0}:{c0}<br />{a1}:{c1}' }
當(dāng)trigger為’item’時(shí)只會(huì)顯示該點(diǎn)的數(shù)據(jù),為’axis’時(shí)顯示該列下所有坐標(biāo)軸所對(duì)應(yīng)的數(shù)據(jù),重要的就是這個(gè)formatter屬性,這個(gè)屬性是具體用來(lái)操作顯示的數(shù)據(jù)格式的,對(duì)于官方文檔給的這個(gè)格式我最初是有點(diǎn)懵逼的,后來(lái)我再認(rèn)真的看了一下關(guān)于這個(gè)屬性的說(shuō)明才發(fā)現(xiàn)這種寫法是真的好用,模板變量有 {a}, ,{c},ublnpf9mb,分別表示系列名,數(shù)據(jù)名,數(shù)據(jù)值等。 在 trigger 為 ‘axis’ 的時(shí)候,會(huì)有多個(gè)系列的數(shù)據(jù),此時(shí)可以通過(guò) {a0}, {a1}, {a2} 這種后面加索引的方式表示系列的索引。 不同圖表類型下的 {a},,{c},ublnpf9mb 含義不一樣。 其中變量{a}, , {c}, ublnpf9mb在不同圖表類型下代表數(shù)據(jù)含義為:
- 折線(區(qū)域)圖、柱狀(條形)圖、K線圖 : {a}(系列名稱),(類目值),{c}(數(shù)值), ublnpf9mb(無(wú))
- 散點(diǎn)圖(氣泡)圖 : {a}(系列名稱),(數(shù)據(jù)名稱),{c}(數(shù)值數(shù)組), ublnpf9mb(無(wú))
- 地圖 : {a}(系列名稱),(區(qū)域名稱),{c}(合并數(shù)值), ublnpf9mb(無(wú))
- 餅圖、儀表盤、漏斗圖: {a}(系列名稱),(數(shù)據(jù)項(xiàng)名稱),{c}(數(shù)值), ublnpf9mb(百分比)
總的來(lái)說(shuō)這塊的abcd分別對(duì)應(yīng)著不同的名稱,如果不是很理解在顯示的時(shí)候可以自己多去嘗試幾次就發(fā)現(xiàn)規(guī)律了,當(dāng)然剛開始不理解的我是用如下方法實(shí)現(xiàn)的:
formatter(params){ console.log(params); }
通過(guò)這個(gè)寫法來(lái)輸出它的所有屬性,然后可以在里面找到所需要的幾個(gè)屬性,可以說(shuō)這是一種很笨的方法,不推薦去使用這個(gè)方式,最好就是采用上面那種{a0}的那種方法來(lái)實(shí)現(xiàn),最后加上官網(wǎng)配置項(xiàng)地址,所有的屬性都可以在這里找到說(shuō)明和使用方法。
總結(jié)
到此這篇關(guān)于ECharts formatter屬性設(shè)置的3種方法的文章就介紹到這了,更多相關(guān)ECharts formatter屬性設(shè)置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript 程序庫(kù)的比較(一)之DOM功能
javascript 程序庫(kù)的比較(一)之DOM功能2010-04-04

JS使用插件cryptojs進(jìn)行加密解密數(shù)據(jù)實(shí)例

javascript insertAfter()定義與用法示例

用javascript實(shí)現(xiàn)代替marquee的滾動(dòng)字幕效果代碼