Echarts柱状图解决数据差距过大不美观，处理数据为0时y轴只显示0~10的情况

问题一：数据差距过大不美观

解决方法：设置yAxis.type = log ，使用log轴可以解决这个问题

把yAxis下的type属性设为log就可以调整数据差距过大的问题，我们可以看到y轴的数值呈现对数递增

问题二：久而久之，发现有时候y轴数值范围只显示0~10，导致柱形图被‘顶破’

解决方法：这是有数据为0的时候造成的，log轴要求坐标数据大于0，这是由对数函数性质决定的,所以对于数据中含有0图形会出现异常

• 把数据为0的数据处理为undefined

getBarData() {
  this.value.forEach((item)=>{
    this.option.xAxis.data.push(item.typeName)
    this.option.series[0].data.push(item.thisMonthNum==0 ? undefined:item.thisMonthNum)
    this.option.series[1].data.push(item.thisWeekNum==0 ? undefined:item.thisWeekNum)
  })

  this.barEchart = echarts.init(document.getElementById("barEchart"))
  this.barEchart.setOption(this.option)
},

• 处理tooltip的数据显示，调整tooltip.formatter属性

tooltip: {
  trigger: "axis",
  formatter:function(params){
      let html = params[0].name
      params.forEach((item,index)=>{
          html+=(`<br/>${item.marker+item.seriesName}: ${item.value==undefined ? 0 : item.value}`)
      })
      return html;
  },
  axisPointer: {
    type: "shadow",
    label: {
      show: true,
    },
  },
},

这样就大功告成了，就算有数据为0，tooltip也可以显示到我们需要的值