需求
因爲所展現的結果值是整數,而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