Echarts 自定義tooltip

需求背景：

柱狀圖中每個不同的類目可以有多個數據柱，從不同維度來展示數據，可有的數據柱的tooltip還需要體現出特定數據，這時默認的tooltip就無法滿足，因此我們要自定義tooltip，不僅要讓特殊的數據柱體現出需要的數據，還不能影響其它數據柱正常tooltip展示。

tooltip分類：

1. 全局tooltip屬性是與title、xAxis、yAxis、series等屬性同級別；對其配置會影響到所有數據圖表的展示。
2. 局部tooltip屬性屬於series里每項欄的，對其配置只會影響當前欄目數據圖表的展示。

tooltip特點：

1. 局部tooltip的配置會與全局tooltip的配置進行合並，因此全局tooltip可以不用過多的配置。
2. 不同版本的Echarts，tooltip API不同。

自定義tooltip核心API：

1. 全局tooltip.trigger
2. 局部tooltip.padding、局部tooltip.formatter

代碼清單：

var myChart = echarts.init(document.getElementById("main"));
let ratio = ['1%','2%','3%','4%','5%','6%']
let option = {
    //圖表標題
    title: {
        text: "ECharts自定義tooltip",
    },
    //全局tooltip配置
    tooltip: {
    //item鼠標移到類目上每條數據柱都有自己的tooltip，axis鼠標移到類目會把所有數據柱整合到tooltip顯示
        trigger:'item'
    },
    //圖表x軸
    xAxis: {
        type: 'category',
        data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"],
    },
    //圖表y軸
    yAxis: {},
    //圖表x軸每項類目，此例表示每條類目有兩個柱狀圖，因此可知類目數據會根據xAxis類目數據合並
    series: [
        {
            //數據柱的標題
            name: "銷量",
            //圖類型
            type: "bar",
            //數據柱的數據
            data: [5, 20, 36, 10, 10, 20],
        },
        {
            name: "利潤",
            type: "bar",
            data: [10, 20, 36, 10, 10, 20],
            //局部tooltip配置
            tooltip:{
                //內邊距
                padding:[5,20,5,10],
                //params 傳入進來的每個類目數據及echarts屬性，ticket異步的類目名稱，callback回調函數
                formatter(params, ticket, callback){
                    //自定義模板
                    let html = ` 
                        <div>${params.seriesName}</div>
                        <span style="display:inline-block;margin-right:4px;
						border-radius:10px;width:10px;height:10px;
						background-color:#91cc75;"></span>
                        <span style="margin-right:10%;">${params.name}</span>
                        <span>${params.data} ${ratio[params.dataIndex]}</span>
                        `
                    callback(ticket, html) //返回自定義內容
                }
            }
        },
    ],
};
myChart.setOption(option);

提示：Echarts 4.2.1版本tooltip.formatter函數方式，參數只有params，同時通過return來返回內容；以上代碼是Echarts 5.1.2 。

tooltip.formatter 常用屬性：

屬性	示例中的取值	說明
data	36	傳入的原始數據項
dataIndex	2	數據在data數組中的index
name	"雪紡衫"	類目名稱
marker	“<span>....</span>”	標記模板
value	36	傳入的數據，多少情況和data相同
seriesName	"利潤"	series每項的名稱
seriesType	"bar"	series每項的類型
seriesIndex	1	series每項的索引
color	#91cc75	字體顏色
borderColor	無	背景顏色