使用echart的dataZoom的labelFormatter自定义时间范围

• 需求:x轴为时间国际值，所以需要转化成'YYYY-MM-DD HH:mm:ss'格式，又因为时间不连续，没值的时间在数组里直接返回null导致x轴其实间断的，也不需要ehcart自动补齐间断的值让他们联系在一起，所以x轴type为category。导致dataZoom的labelFormatter返回的value是百分数（当前时间值占x轴的百分比），但是由于需求特殊我们的返回的不是正规的百分比，最大值才16！，导致浪费了不少时间研究，最后相处来了，既然最大值是16那就以16为100量程，value/16*（x.length-1）就解决了，如果还是除以100 datazoom的悬浮提示的时间范围不正确

• 代码环境：vue3 ts echart5 moment.js时间转插件

• 代码

  // 后端返回的数据格式，由于不是前段需要的'YYYY-MM-DD HH:mm:ss'格式所以需要对x轴的axisLabel使用数据转化
  const data = [
    [
      "2025-01-24T16:00:00+08:00",
      0
    ],
    null,
    [
      "2025-02-05T10:00:00+08:00",
      1
    ],
    [
      "2025-02-05T11:00:00+08:00",
      11
    ],
    [
      "2025-02-05T12:00:00+08:00",
      1
    ],
    [
      "2025-02-05T13:00:00+08:00",
      11
    ],
    [
      "2025-02-05T14:00:00+08:00",
      10
    ],
    [
      "2025-02-05T15:00:00+08:00",
      1
    ],
    null,
    [
      "2025-02-07T09:00:00+08:00",
      1
    ],
    [
      "2025-02-07T10:00:00+08:00",
      11
    ],
   
    
  ]
  
  
  
  
  // 
  	const getData= ()=>{
  		// 后端返回res
  		echartData.value = res.data[0].data?.map(item=>item?moment(item[0]).format('YYYY-MM-DD HH:mm:ss'):null) // 生成x轴时间数组
  	
  		res.data?.forEach((item,index)=>{
  			series.push({
  							
  							type: 'line',
  							data: item.data,
  						})
  
  		})
  		Option.series= series
  })
  
  
  const echartData = ref(null)
  // 设置图标配置项
  const fanweiSize = ref(null)
  option = {
  //   color: colors,
  //   tooltip: {
  //     trigger: 'axis',
  //     axisPointer: {
  //       type: 'cross'
  //     }
  //   },
  
  //   toolbox: {
  //     feature: {
  //       dataView: { show: true, readOnly: false },
  //       restore: { show: true },
  //       saveAsImage: { show: true }
  //     }
  //   },
  
  // dataZoom: {
  // 		type: 'inside',  //放大缩小x轴数值
  // 	},
  
  	// dataZoom:[{
  	// 	type: 'inside', // 放大和缩小
  	// 	orient: 'vertical',
  	// 	},
  	// 	{
  	// 		type: 'inside', 
  	// 	}],
  
  	dataZoom: [ 	
          {
            show: true,
  		  type: 'slider', // 滑动条型 dataZoom
  	
              
              labelFormatter: (value) => { 	// 核心代码
  			 if(!echartData.value) return
  			 const dataLength = echartData.value.length;
  			  fanweiSize.value&&fanweiSize.value!==0?null:fanweiSize.value=value // 记录首次进入页面获取的时间范围最大值
                const index = Math.floor((value / fanweiSize.value) * (dataLength - 1)); // 正常是除以100的但是这里不知道哪里问题最大值只有16所以除以16就行了
  			//   console.log((value / 16),dataLength,(value / 16) * (dataLength - 1))
                const rawDate = echartData.value[index];
  				// console.log(value,"moment(rawDate).format('YYYY-MM-DD HH:mm:ss')",moment(rawDate).format('YYYY-MM-DD HH:mm:ss'))
                // 格式化时间（假设原始时间字符串已经是合法格式）
                return moment(rawDate).format('YYYY-MM-DD HH:mm:ss');
              },
          },
          {
            type: 'inside',
           
          },
         
        ],
  
    xAxis: 
      {
        type: 'category', //time
  		axisLabel: {
  				formatter: function (value) {
  					
  					return moment(value).format('YYYY-MM-DD HH:mm:ss');
  				}
  		},
  		axisPointer: {
  			type: 'line',
  			label:{
  				formatter: function (obj) {
  					return moment(obj.value).format('YYYY-MM-DD HH:mm:ss');
  				},
  			} 
  		},
  	},
    
    yAxis: [{
  		type: 'value',
  		name: "数量",
  		nameLocation:'end',
  		nameGap:15,
  		nameTextStyle:{
  			align:'right',
  		},
  		
  	},],
    series: []
  
  };