需求
因为所展现的结果值是整数,而Y轴label随鼠标上下移动时,label会显示小数,所以想把label去掉,同时X轴坐标点对应的label想用自定义的label(数值后加上单位)。
解决方法
查看ECharts官网API的坐标轴属性设置,可以通过yAxis.axisPointer.label设置实现需求。
注:tooltip.axisPointer.type 设置为 ‘cross’ 则默认显示标签,否则默认不显示。
自己的图表设置了tooltip.axisPointer.type 为 ‘cross’,所以需要将label 的show改为false。option设置如下:
color:['#1890ff'],
tooltip:{
trigger:'axis',
formatter: function(params){ // 自定义X轴坐标点对应的label
return params[0].axisValue +
"</br><div style='width: 12px; height:12px; border: 1px solid #1890ff; border-radius:6px; background-color: #1890ff;float: left; margin: 4px'></div>" +
"<div style='float: left'> "+ params[0].seriesName +":"+ params[0].data[1] + "条" +"</div>";
},
axisPointer:{
type:'cross',
label:{
background:'#6a7985',
}
}
},
...
xAxis:[{
type:"category",
// data:_dateArr,
axisLabel: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: gridColor
}
}
}],
yAxis:[{
type:'value',
splitNumber:2,
minInterval: 1,
axisLabel: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: gridColor,
type: 'dashed'
}
},
// Y轴上下移动的横线不显示数值
axisPointer: {
label: {
show: false
}
}
}]
参考:
ECharts官网:https://echarts.baidu.com/option.html#yAxis.axisPointer.label