ECharts折线图设置Y轴label是否显示及自定义X轴label

需求
因为所展现的结果值是整数,而Y轴label随鼠标上下移动时,label会显示小数,所以想把label去掉,同时X轴坐标点对应的label想用自定义的label(数值后加上单位)。
ECharts折线图设置Y轴label是否显示及自定义X轴label_第1张图片
解决方法
查看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

你可能感兴趣的:(JavaScript)