使用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时间转插件

  • 代码

    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: []
    
    };
相关推荐
剪刀石头布啊3 分钟前
http状态码大全
前端·后端·程序员
剪刀石头布啊5 分钟前
iframe通信、跨标签通信的常见方案
前端·javascript·html
宇之广曜15 分钟前
搭建 Mock 服务,实现前端自调
前端·mock
yuko093116 分钟前
【手机验证码】+86垂直居中的有趣问题
前端
用户15129054522020 分钟前
Springboot中前端向后端传递数据的几种方式
前端
阿星做前端20 分钟前
如何构建一个自己的 Node.js 模块解析器:node:module 钩子详解
前端·javascript·node.js
用户15129054522024 分钟前
Web Worker:让前端飞起来的隐形引擎
前端
司宸24 分钟前
学习笔记十 —— 自定义hooks设计原则 笔试实现
前端
用户15129054522029 分钟前
踩坑与成长:WordPress、MyBatis-Plus 及前端依赖问题解决记录
前端·后端
半个烧饼不加肉34 分钟前
React + ts + react-webcam + CamSplitter 实现虚拟摄像头解决win摄像头独占的问题
前端·react.js·前端框架