ECharts折線圖tooltip提示框格式自定義

tooltip.formatter

提示框浮層內容格式器，支持字符串模板和回調函數兩種形式。

1、字符串模板

模板變量

• 折線（區域）圖、柱狀（條形）圖、K線圖 : {a}（系列名稱），{b}（類目值），{c}（數值）, {d}（無）

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

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

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

2、回調函數

回調函數格式：

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

第一個參數params是formatter需要的數據集，格式如下：

{
    componentType: 'series',
    // 系列類型
    seriesType: string,
    // 系列在傳入的 option.series 中的 index
    seriesIndex: number,
    // 系列名稱
    seriesName: string,
    // 數據名，類目名
    name: string,
    // 數據在傳入的 data 數組中的 index
    dataIndex: number,
    // 傳入的原始數據項
    data: Object,
    // 傳入的數據值
    value: number|Array,
    // 數據圖形的顏色
    color: string,

    // 餅圖的百分比
    percent: number,

}

自定義實例：

1、

formatter : '{b}<br/>{a} : {c}%',

2、

formatter : function(params) {
		var result = params[0].name;
		params.forEach(function(item) {
				if (item.data) {
					result += '<br/>' + item.seriesName + ' : ' + item.data + '%';
				}
			});
		return result;
	}

3、

formatter: function(params) {
		var result = params[0].name+'<br>';
		params.forEach(function(item) {
			    		result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
			    	        if(parseFloat(item.data)>=0){
			    	        	result +=item.seriesName+" : "+'<span style="color:#e30101">'+ item.data+"%</span><br>"
			    	        }else if(parseFloat(item.data)<0){
			    	        	result +=item.seriesName+" : "+'<span style="color:#049500">'+ item.data+"%</span><br>"
			    	        }
			
			   	});
		 return result;
		}