问题描述

其实吧这个问题，我觉得根本就不是什么问题。奈何在实际使用中总有一个两个领导觉得，你能不能这样、你能不能那样!可不？下面这个图就觉得数值1在echarts表格中看不见，我就要看见。。。我在内心深处觉得这个很正常啊，最大值1005和最小值1可整整相差1005倍啊，奈何挣扎是没用的，你还得改。

image.png

解决思路：

1.思路一

首先，最大数太大肯定得处理，我想到的方式是开根号。1005开一次大概在32左右，但是1呢还是1，这就解决了数值相差的问题，由原来的1000多倍瞬间缩小到32倍左右，效果图看着还不错。

image.png

其次呢，因为柱子顶部是要显示真实数据的,虽然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]
                 }),
                } 
            }
        }
    }]
};

最后看一下效果图:

image.png

是不是好多了呢？

写在最后

这两种方式其实还是有弊端的。主要是我项目中使用时候将y轴坐标隐藏了，所以看不到有什么不正常。实际在使用的时候呢，如果需要将y轴显示出来，可能y轴刻度值也得跟着自定义，还有如果需要点击某根柱子，tooltip需要显示的话，tooltip也得跟着自定义了。
本篇over~