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

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

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

1. 字符串模板

1.1 x軸y軸

//適應(yīng)字符串模板,模板變量為刻度默認標簽{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 開始計數(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 開始計數(shù)。
示例

formatter:"{a}<br/>{c}"
//系列名 數(shù)據(jù)名 數(shù)值值

1.4多個屬性

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)

第二個參數(shù) ticket 是異步回調(diào)標識，配合第三個參數(shù) callback 使用。 第三個參數(shù) callback 是異步回調(diào)，在提示框浮層內(nèi)容是異步獲取的時候，可以通過 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ù)

語法:(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ù)項
    data: Object,
    // 傳入的數(shù)據(jù)值。在多數(shù)系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
    value: number|Array|Object,//series.data
    // 坐標軸 encode 映射信息，
    // key 為坐標軸（如 'x' 'y' 'radius' 'angle' 等）
    // value 必然為數(shù)組，不會為 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 ...
    // 僅在雷達圖中使用。
    dimensionIndex: number,
    // 數(shù)據(jù)圖形的顏色
    color: string,
 
    // 百分比
    percent: number,
 
}

模板變量有 {a}, ，{c}，vvxyksv9kd，{e}，分別表示系列名，數(shù)據(jù)名，數(shù)據(jù)值等。 在 trigger 為'axis' 的時候，會有多個系列的數(shù)據(jù)，此時可以通過{a0}, {a1}, {a2} 這種后面加索引的方式表示系列的索引。 不同圖表類型下的{a}，，{c}，vvxyksv9kd含義不一樣。 其中變量{a}, , {c}, vvxyksv9kd在不同圖表類型下代表數(shù)據(jù)含義為：

u 折線（區(qū)域）圖、柱狀（條形）圖、K線圖: {a}（系列名稱），（類目值），{c}（數(shù)值）, vvxyksv9kd（無）

u 散點圖（氣泡）圖 : {a}（系列名稱），（數(shù)據(jù)名稱），{c}（數(shù)值數(shù)組）, vvxyksv9kd（無）

u 地圖 : {a}（系列名稱），（區(qū)域名稱），{c}（合并數(shù)值）, vvxyksv9kd（無）

u 餅圖、儀表盤、漏斗圖: {a}（系列名稱），（數(shù)據(jù)項名稱），{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ù)點的懸浮框提示框信息展現(xiàn)的時候我們可以加以數(shù)據(jù)格式化，以便于更好地觀察數(shù)據(jù)和分析數(shù)據(jù)。

比如：在數(shù)值后加一個單位字符串

  tooltip: {
            trigger:'item',
            padding:[20,10,20,10],
            formatter:'{a} </br>:{c}%'
        },

2. axisLabel

坐標軸刻度上面的刻度格式化，比如Y表示長度，我們往往需要在每一個刻度值后面帶上“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)'
                    }
                }
            }
        ]

注意點：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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論