解决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",
    },
};

问题解决！