使用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: []
    
    };
相关推荐
撰卢13 分钟前
总结一下vue3的组件之间数据转递,子组件传父组件,父组件传子组件
前端·javascript·vue.js
前端开发爱好者1 小时前
Vue3 超强“积木”组件!5 分钟搞定可交互 3D 机房蓝图!
前端·javascript·vue.js
前端开发爱好者1 小时前
尤雨溪力荐!Vue3 专属!100+ 动效组件!
前端·javascript·vue.js
前端开发爱好者1 小时前
尤雨溪力荐!Vue3 生态最强大的 14 个 UI 组件库!
前端·javascript·vue.js
lb29171 小时前
关于多个el-input的自动聚焦,每输入完一个el-input,自动聚焦到下一个
前端·javascript·vue.js
lingliang1 小时前
使用 JS 渲染页面并导出为PDF 常见问题与修复
javascript·pdf·vue
sorryhc2 小时前
【AI解读源码系列】ant design mobile——Divider分割线
前端·javascript·react.js
前端进阶者2 小时前
electron-vite_20配置依赖包运行时区外部加载commonjsExternals_vite-plugin-commonjs-externals
前端·electron
anyup2 小时前
🔥 uView Pro 全新升级来啦!一行配置,解锁 uView Pro 全局 TS 类型提示与校验
前端·vue.js·uni-app
Jimmy2 小时前
使用 Electron 在 5 分钟内创建一个桌面的 React 应用
前端·javascript·electron