需求: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= ()=>{// 后端返回resechartData.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', // 滑动条型 dataZoomlabelFormatter: (value) => { 	// 核心代码if(!echartData.value) returnconst 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', //timeaxisLabel: {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: []};