【ECharts折线图设置Y轴label是否显示及自定义X轴label】需求
因为所展现的结果值是整数，而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 +
"" +
" "+ params[0].seriesName +"："+ params[0].data[1] + "条" +"";
},
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
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- javascript|javascript中的数据类型转换