echarts柱状图数据差别很大时的处理

本文正在参加「金石计划 . 瓜分6万现金大奖」

事情是这样的~

上周遇到了一个中断了一年多的需求，联调接口前端做数据展示；整体代码逻辑几乎都是完整的，就是改了一些配置值，简单地调整了一下页面接口调用逻辑；调通接口后，查看页面显示，发现有一个echarts柱状图好像显示的有问题，第一次见面是下面这样：

以我敏锐的直觉感觉到大致有两个问题：

1.纵轴的坐标值没显示全

2.数据量差距过大，一个二十多万，一个是个位数，显示的不友好

遇到问题就解决问题嘛~

纵轴的坐标值没显示全

分析： 产生这个想法的原因不完全是靠直觉，从截图中可以看到，纵坐标从0开始，第一个刻度就显示至少5位数，所以如果这是正确显示的话，那就是样式出了问题

搜索： 通过控制 grid 组件的 top、left、buttom、right 属性可以调整ECharts 中的 grid 组件在容器中的合适位置；

如下所示：

样式：

grid: {
  left: '20%',//修正纵坐标大数显示不全问题
},

至此，第一个小问题就解决了；耶~

数据量差距很大，显示不友好

像这样，第一列几十万，第二列只有个位数，在图上都看不出来，每一列都有点击事件，这样子很影响体验的；那怎么办呢？改改呗

经查阅，y坐标轴的类型里有一个是：log ;试试吧

yAxis: {
  type:"log",
},

然后就变成了这样，显然是有什么地方不对劲儿

突然想起来，第三列的数据是0，取对数可不能为0呀

于是开始处理数据的问题；首先得对为0的数据做一下转换

this.data.forEach((v,index) => {
  if (v == 0)
    this.data[index] =null;
});

setOption({
    series:[    
        data: this.data,
    ]
)}

它就变成了下面这样：

此时已经接近理想效果了，就是纵轴坐标不是从0开始的，那就处理一下它：

yAxis: {
  type:"log",// 处理数据量差距过大的问题
  axisLabel: {
    formatter: function (value) {
      return value === 1 ? 0 : value;//将y轴最小值1变成从0开始；
    }
  },
},

完美~

总结

每一次遇到新的问题都很有意思，一步一步地处理完善，逐渐达成理想的效果；再回头，一切豁然开朗~

这就是代码的魅力，完美的结果和曲折的过程，缺一不可~