欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Echarts圖表中formatter的基本用法示例

 更新時(shí)間:2023年02月14日 14:24:03   作者:學(xué)習(xí)吖  
formatter 提示框浮層內(nèi)容格式器,支持字符串模板和回調(diào)函數(shù)兩種形式,下面這篇文章主要給大家介紹了關(guān)于Echarts圖表中formatter的基本用法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

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)文章

最新評(píng)論