问题描述
其实吧这个问题，我觉得根本就不是什么问题。奈何在实际使用中总有一个两个领导觉得，你能不能这样、你能不能那样!可不？下面这个图就觉得数值1在echarts表格中看不见，我就要看见。。。我在内心深处觉得这个很正常啊，最大值1005和最小值1可整整相差1005倍啊，奈何挣扎是没用的，你还得改。
解决思路：
1.思路一
首先，最大数太大肯定得处理，我想到的方式是开根号。1005开一次大概在32左右，但是1呢还是1，这就解决了数值相差的问题，由原来的1000多倍瞬间缩小到32倍左右，效果图看着还不错。
其次呢，因为柱子顶部是要显示真实数据的,虽然1005开完根号是32，但是不可能显示32上去的。基于这个原因我想到另外一种方式确实可以实现。
先把柱状图的顶部数字隐藏，然后使用echarts的双轴功能。左轴是开完根号的数据，使用柱状图表示。右轴是未开过根号的真实数据，使用折线图展示并把折线设置lineWidth:0；color:'transparent';即线的宽度设为0，线的颜色设为透明色。折线连接点也是一样设为透明，symbolSize要设个尺寸不然label不显示。这样可以保证数值是在柱状图正上方对齐的。
缺点：
配置比较复杂。而且折线图的数值可能盖在柱子上，不美观。当然如果可以接受label位置在 position:'left',或者 position:'right',也可以规避。
2.思路二
首先，和思路1一样还是开根号，另外再提一下，如果有的数值差特别巨大，可采用二次开根号，甚至3次、4次能满足为止。
其次呢，这次没采用双轴，而是直接在柱状图的label配置项中使用formatter，自定义label，这样我们就可以将真实数值显示上去了，这种方式也是比较推荐的。
部分配置代码：
let arr = [1005, 50, 1, 10, 70, 110, 100];
let arr2 = arr.map(v=>{
return (Math.sqrt(v)).toFixed(0);
})
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: [{
show : false,
type: "value",
}],
series: [{
data: arr2,
type: 'bar',
barWidth:20,
itemStyle:{
normal:{
label:{
show:true,
position:'top',
formatter:(params => {
return arr[params.dataIndex]
}),
}
}
}
}]
};
最后看一下效果图:
是不是好多了呢？
写在最后
这两种方式其实还是有弊端的。主要是我项目中使用时候将y轴坐标隐藏了，所以看不到有什么不正常。实际在使用的时候呢，如果需要将y轴显示出来，可能y轴刻度值也得跟着自定义，还有如果需要点击某根柱子，tooltip需要显示的话，tooltip也得跟着自定义了。
本篇over~
