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