问题一：数据差距过大不美观 解决方法：设置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也可以显示到我们需要的值

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。