echarts自定义X轴只显示开头和末尾内容踩坑记录

235 阅读1分钟

需求:x轴只显示开始和结尾的自定义内容(如下图)

image.png

做法:

xAxis:[
   {
     axisLabel:{
         show:true,
         formatter:(_,index:number){ // 第一个参数没有用 所以用_代替
              if(index===0){ 
                  return `startTime`
              }else if(index===data.length-1)
                  return `endTime`;
         }
     }
   }
]

踩坑:

只显示了index为0时的内容,末尾的内容没有显示

排查:

打了debug后发现formatter的index有规律的递增,导致跳过了data.length-1

原因:

x轴自行计算了间隔跳过了部分axisLabel的内容显示

解决:

设置间隔为0

 axisLabel: {
    interval: 0
 }