解決Echarts 折線圖、柱狀圖數據大小差距過大，導致圖形高低差距太大的問題（type:log）

Echarts 是百度開源的一款 web 數據可視化類庫，渲染基於web canvas。

本文中的所有代碼都可以在 Echarts在線試用中調試。

1.問題產生

本文主要是爲了解決折線圖、柱狀圖數據大小差距過大，導致圖形高低差距太大的問題以及相關展示問題，如下圖：

option = {
	tooltip: {
		trigger: "axis",
	},
	xAxis: {  
	    boundaryGap: false,
		data: ["19/09","19/10","19/11","19/12","20/01","20/02","20/03"],
	},
	yAxis: {
		type: "value",
	},
    series:{
        data: [1, 11, 3320, 3200, 34000, 45400, 350100],
        type: "line",
    },
};

2.初步解決

經查詢配置項，發現 yAxis.type = log （使用log軸）可以解決這個問題，加上之後：

option = {
	tooltip: {
		trigger: "axis",
	},
	xAxis: {  
	    boundaryGap: false,
		data: ["19/09","19/10","19/11","19/12","20/01","20/02","20/03"],
	},
	yAxis: {
		type: "log",
	},
    series:{
        data: [1, 11, 3320, 3200, 34000, 45400, 350100],
        type: "line",
    },
};

大概的遠離就是通過log函數將y軸刻度壓縮成爲上密下疏，就達到了這種效果。

3.零的處理

但是log軸要求橫座標數據大於0，這是由對數函數性質決定的。所以對於數據中含有0圖形會出現下面的異常：

option = {
	tooltip: {
		trigger: "axis",
	},
	xAxis: {  
	    boundaryGap: false,
		data: ["19/09","19/10","19/11","19/12","20/01","20/02","20/03"],
	},
	yAxis: {
		type: "log",
	},
    series:{
        data: [0, 11, 3320, 3200, 34000, 45400, 350100],
        type: "line",
    },
};

因爲對數函數的定義域是大於0。這裏我們需要在Echarts渲染之前對數據進行處理，首先將0改爲0.1：

option = {
	tooltip: {
		trigger: "axis",
	},
	xAxis: {  
	    boundaryGap: false,
		data: ["19/09","19/10","19/11","19/12","20/01","20/02","20/03"],
	},
	yAxis: {
		type: "log",
	},
    series:{
        data: [0.1, 11, 3320, 3200, 34000, 45400, 350100],
        type: "line",
    },
};

這樣修改雖然圖形正常顯示了，但是如上圖所示，這裏的y軸最小值變成了0.1，而且 tooltip的數據也變成了0.1，與實際數據0不一致

4.顯示優化

針對上面的兩個問題，y軸最小值0.1 可以通過yAxis.axisLabel.formatter屬性改爲0；
tooltip顯示問題可以通過tooltip.formatter屬性解決，如下

option = {
	tooltip: {
		trigger: "axis",
		formatter:function(params){
		    let html = params[0].name
		    params.forEach((item,index)=>{
		        html+=(`<br/>${item.marker+item.seriesName}: ${item.value===0.1 ? 0 : item.value}`)
		    })
		    return html;
		}
	},
	xAxis: {  
	    boundaryGap: false,
		data: ["19/09","19/10","19/11","19/12","20/01","20/02","20/03"],
	},
	yAxis: {
		type: "log",
		axisLabel: {
	        formatter: function (value) {
	            return value === 0.1 ? 0 : value;
            }
		},
	},
    series:{
        data: [0.1, 11, 3320, 3200, 34000, 45400, 350100],
        type: "line",
    },
};

問題解決！