1.legend圖例

先看效果圖：

lengend中有一個屬性formatter，是圖例的形式，用來格式化圖例文字。

formatter有兩種形式： 
- 模板 
- 回撥函式

示例：

// 使用字串模板，模板變數為圖例名稱 {name}
formatter: 'Legend {name}'
// 使用回撥函式
formatter: function (name) {
    return 'Legend ' + name;
}

實現最開始的效果圖程式碼：

var data1=[
                {value:335, name:'直接訪問'},
                {value:310, name:'郵件營銷'},
                {value:234, name:'聯盟廣告'},
                {value:135, name:'視訊廣告'},
                {value:1548, name:'搜尋引擎'}
            ]
var option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        formatter:  function(name){
                        var res = "";
                        for(var i=0;i<data1.length;i++) {
                           if (data1[i].name == name) {  
                            res=data1[i].value;
                           }
                        }
                        return name+'  '+res;
                    }
    },
    series: [
        {
            name:'訪問來源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:data1
        }
    ]
};
 

2. tooltip

效果圖：

tooltip.formatter提示框浮層內容格式器，支援字串模板和回撥函式兩種形式。

（1）字串模板

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

• 折線（區域）圖、柱狀（條形）圖、K線圖 : {a}（系列名稱），{b}

  （類目值），{c}（數值）, {d}（無）

• 散點圖（氣泡）圖 : {a}（系列名稱），{b}（資料名稱），{c}（數值陣列）, {d}（無）

• 地圖 : {a}（系列名稱），{b}（區域名稱），{c}（合併數值）, {d}（無）

• 餅圖、儀表盤、漏斗圖: {a}（系列名稱），{b}（資料項名稱），{c}（數值）, {d}（百分比）

示例：

formatter: '{b0}: {c0}<br />{b1}: {c1}'

（2） 回撥函式

回撥函式格式：

(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
 

第一個引數 params 是 formatter 需要的資料集。第二個引數 ticket 是非同步回撥標識，配合第三個引數 callback 使用。 第三個引數 callback 是非同步回撥，在提示框浮層內容是非同步獲取的時候，可以通過 callback 傳入上述的 ticket 和 html 更新提示框浮層內容。

示例：

formatter: function (params, ticket, callback) {
    $.get('detail?name=' + params.name, function (content) {
        callback(ticket, toHTML(content));
    });
    return 'Loading';
}

效果圖實現程式碼：

 tooltip: {
            trigger: 'item',
            formatter: function (params) {
                console.log(params);
                var res = "";
                var percentage = "";
                if (params.data.name == params.name) {
                    res = params.data.ranking;
                    percentage = params.data.percentage * 100;
                }
                return params.name + '<br>' + percentage + '%<br>' + '排名：' + res;
            }
        },