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）wppm3vysvbp：百分比。

（5）{@xxx}：數(shù)據(jù)中名為'xxx'的維度的值，如{@product}表示名為'product'` 的維度的值。

（6）{@[n]}：數(shù)據(jù)中維度n的值，如{@[3]}` 表示維度 3 的值，從 0 開始計數(shù)。

示例：

formatter:"：{c}(wppm3vysvbp%)"

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}"

1.4 多個系列

示例：

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） 

第二個參數(shù) ticket 是異步回調(diào)標(biā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
    // 坐標(biāo)軸 encode 映射信息，
    // key 為坐標(biāo)軸（如 '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 ...
    // 僅在雷達(dá)圖中使用。
    dimensionIndex: number,
    // 數(shù)據(jù)圖形的顏色
    color: string,
 
    // 百分比
    percent: number,
 
}

附：Echarts中數(shù)據(jù)顯示實現(xiàn)formatter

對于第一種橫縱坐標(biāo)數(shù)據(jù)顯示的格式問題，如：對于一個縱坐標(biāo)用來展示占比率0.5要將這個值展示位50%，對于坐標(biāo)軸的x，y軸的設(shè)置分別對應(yīng)著xAxis和yAxis這兩這個屬性，我們要將縱軸的值變換成50%，只需要在原始數(shù)值的基礎(chǔ)上乘以100然后拼接上%就可以了，具體的實現(xiàn)代碼如下：

yAxis : [
    {
        type : 'value',
        name : 'y軸名稱',
        axisLabel : {
            formatter : function(val){
                return val*100+"%";
            }
        }
    }
]

對于第二個問題坐標(biāo)軸中柱狀圖或者折線圖的數(shù)據(jù)，這個主要是用來滿足需求：要在坐標(biāo)軸的每個點上將各自對應(yīng)的數(shù)據(jù)顯示下來，這塊主要用到的是series中的label屬性，主要實現(xiàn)的代碼如下：

series ： [
    {
        name : '和legend的某一項對應(yīng)',
        type : 'bar',
        label : {
            normal : {
                show : true,
                position : 'top'
            }
        }
        data : data
    }
]

series中的name對應(yīng)的值要是legend中的某一項，type就是你的這個圖形是什么類型，可以是bar或者line等，label中的show是用來設(shè)置是否顯示，position用來設(shè)置數(shù)據(jù)顯示在圖形的位置，data就是要顯示的數(shù)據(jù)。

對于第三種問題，鼠標(biāo)滑到指定區(qū)域時的數(shù)據(jù)展示問題，這塊用來的屬性主要是tooltip，具體的代碼實現(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ù)據(jù)，為’axis’時顯示該列下所有坐標(biāo)軸所對應(yīng)的數(shù)據(jù)，重要的就是這個formatter屬性，這個屬性是具體用來操作顯示的數(shù)據(jù)格式的，對于官方文檔給的這個格式我最初是有點懵逼的，后來我再認(rèn)真的看了一下關(guān)于這個屬性的說明才發(fā)現(xiàn)這種寫法是真的好用，模板變量有 {a}, ，{c}，wppm3vysvbp，分別表示系列名，數(shù)據(jù)名，數(shù)據(jù)值等。 在 trigger 為 ‘axis’ 的時候，會有多個系列的數(shù)據(jù)，此時可以通過 {a0}, {a1}, {a2} 這種后面加索引的方式表示系列的索引。 不同圖表類型下的 {a}，，{c}，wppm3vysvbp 含義不一樣。 其中變量{a}, , {c}, wppm3vysvbp在不同圖表類型下代表數(shù)據(jù)含義為：

• 折線（區(qū)域）圖、柱狀（條形）圖、K線圖 : {a}（系列名稱），（類目值），{c}（數(shù)值）, wppm3vysvbp（無）
• 散點圖（氣泡）圖 : {a}（系列名稱），（數(shù)據(jù)名稱），{c}（數(shù)值數(shù)組）, wppm3vysvbp（無）
• 地圖 : {a}（系列名稱），（區(qū)域名稱），{c}（合并數(shù)值）, wppm3vysvbp（無）
• 餅圖、儀表盤、漏斗圖: {a}（系列名稱），（數(shù)據(jù)項名稱），{c}（數(shù)值）, wppm3vysvbp（百分比）

總的來說這塊的abcd分別對應(yīng)著不同的名稱，如果不是很理解在顯示的時候可以自己多去嘗試幾次就發(fā)現(xiàn)規(guī)律了，當(dāng)然剛開始不理解的我是用如下方法實現(xiàn)的：

formatter(params){
    console.log(params);
}

通過這個寫法來輸出它的所有屬性，然后可以在里面找到所需要的幾個屬性，可以說這是一種很笨的方法，不推薦去使用這個方式，最好就是采用上面那種{a0}的那種方法來實現(xiàn)，最后加上官網(wǎng)配置項地址，所有的屬性都可以在這里找到說明和使用方法。

總結(jié)

到此這篇關(guān)于ECharts formatter屬性設(shè)置的3種方法的文章就介紹到這了,更多相關(guān)ECharts formatter屬性設(shè)置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論