echarts 实现x轴label倒序动态计算间隔显示

问题：有一个需求：就是需要保证x轴显示最新一条数据（也就是最后一条数据），前面的数据自动均匀间隔显示
解决：通过动态设置xAxis轴的axisLabel中的interval回调函数返回显示的值，实现永远显示最后一个数据，并保证间隔均匀显示其他值

<template>  
<div class="home_box">
    <div id="main" style="width:500px;height:300px"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import {onMounted,onDeactivated,computed} from 'vue'
const getFormatter=(value,index)=>{
  if(index%4==2){
    return value
  }
}
const getOption = (yData,startLength,time)=>{
  let interval = Math.ceil(startLength/6)
  return {
  tooltip: {
    trigger: 'axis',
    position: function (pt) {
      return [pt[0], '10%'];
    }
  },
  title: {
    left: 'center',
    text: 'Large Ara Chart'
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisLabel: {
      fontSize:12,
      hideOverlap: true,
      interval:(index,value)=>{
        if((index%interval)==((time.length-1)%interval)){
          return value
        }else{
          return ''
        }
      },
      showMaxLabel:true,
    },
    data:time
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%']
  },
  grid: {
    right:100
  },
  dataZoom: [
    {
      type:'slider',
      start: (yData.length-startLength)/yData.length*100,
      end: 100,
    }
  ],
  series: [
    {
      name: 'Fake Data',
      type: 'line',
      smooth: true,
      symbol: 'none',
      areaStyle: {},
      data: yData
    }
  ]
};
}
onMounted(()=>{
  let chartDom = document.getElementById('main');
  let myChart = echarts.init(chartDom);
  let times = [
    "1952年",
    "1953年",
    "1954年",
    "1955年",
    "1956年",
    "1957年",
    "1958年",
    "1959年",
    "1960年",
    "1961年",
    "1962年",
    "1963年",
    "1964年",
    "1965年",
    "1966年",
    "1967年",
    "1968年",
    "1969年",
    "1970年",
    "1971年",
    "1972年",
    "1973年",
    "1974年",
    "1975年",
    "1976年",
    "1977年",
    "1978年",
    "1979年",
    "1980年",
    "1981年",
    "1982年",
    "1983年",
    "1984年",
    "1985年",
    "1986年",
    "1987年",
    "1988年",
    "1989年",
    "1990年",
    "1991年",
    "1992年",
    "1993年",
    "1994年",
    "1995年",
    "1996年",
    "1997年",
    "1998年",
    "1999年",
    "2000年",
    "2001年",
    "2002年",
    "2003年",
    "2004年",
    "2005年",
    "2006年",
    "2007年",
    "2008年",
    "2009年",
    "2010年",
    "2011年",
    "2012年",
    "2013年",
    "2014年",
    "2015年",
    "2016年",
    "2017年",
    "2018年",
    "2019年",
    "2020年",
    "2021年",
    "2022年"
]
  let yData = [
    "679.1",
    "824.4",
    "859.8",
    "911.6",
    "1030.7",
    "1071.4",
    "1312.3",
    "1447.5",
    "1470.1",
    "1232.3",
    "1162.2",
    "1248.3",
    "1469.9",
    "1734",
    "1888.7",
    "1794.2",
    "1744.1",
    "1962.2",
    "2279.7",
    "2456.9",
    "2552.4",
    "2756.2",
    "2827.7",
    "3039.5",
    "2988.6",
    "3250",
    "3678.7",
    "4100.5",
    "4587.6",
    "4935.8",
    "5373.4",
    "6020.9",
    "7278.5",
    "9098.9",
    "10376.2",
    "12174.6",
    "15180.4",
    "17179.7",
    "18872.9",
    "22005.6",
    "27194.5",
    "35673.2",
    "48637.5",
    "61339.9",
    "71813.6",
    "79715",
    "85195.5",
    "90564.4",
    "100280.1",
    "110863.1",
    "121717.4",
    "137422",
    "161840.2",
    "187318.9",
    "219438.5",
    "270092.3",
    "319244.6",
    "348517.7",
    "412119.3",
    "487940.2",
    "538580",
    "592963.2",
    "643563.1",
    "688858.2",
    "746395.1",
    "832035.9",
    "919281.1",
    "986515.2",
    "1013567",
    "1143669.7",
    "1210207"
]
option = getOption(yData,startLength,time)

option && myChart.setOption(option);
myChart.on('dataZoom',function(event){
    let startLength = (event.end-event.start)/100*time.length;
    let interval = Math.ceil(startLength/6)
    console.log(startLength,interval)
    option.xAxis.axisLabel.interval=(index,value)=>{
        if((index%interval)==((time.length-1)%interval)){
          return value
        }else{
          return ''
        }
      },
      option.dataZoom[0].start = (yData.length-startLength)/yData.length*100;
      option.dataZoom[0].end = event.end
      console.log(option)
    myChart.setOption(option)
  })
})
<style lang="scss" scoped>
.home_box {
  display: flex;
  align-content: space-between;
  text-align: center;
  width:500px;
  height:300px;
  // height: 100%;
}
</style>