element el-date-picker type=“datetimerange“

刚写完结果需求变更了。封装的时间组件重新做。结合eacharts 。
直接上代码了

日期选择组件封装

折线图处理，这里没有放封装的折线。只放了折线的处理。
Historicalline.js

	import { xAxisTime2 } from './xAxisTime2.js'
export const shearerOptions = (data, params, dataInfos) => {
  // console.log(data, params, dataInfos, 'data, params, dataInfos');
  if (data?.length) {
    let options = {}
    options.tooltip = {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (data) {
        return `
          

            时间: ${data[0].data[0]}

            数值: ${data[0].data[1]}

          
        `
      }
    },
    options.xAxis=[{
      type: 'category',
      axisTick: {
        show: false
      },
      boundaryGap: false,
      axisLine: { onZero: false },
      ...xAxisTime2(params)
    }],
    options.grid={
      left: '50',
      right: '50',
      top: '10',
      bottom: '50'
    }
    options.dataZoom = [
      {
        type: 'inside'
      },
      {
        type: 'slider',
        show: false
      }
    ]
    options.yAxis=[{
      type: 'value',
      splitLine: false,
      axisLine: {
        show: true
      },
      axisLabel: {
        show: true,
        color: '#838C95',
        fontSize: 12
      }
    }]
    options.series= [
      {
        name: '',
        type: 'line',
        symbol: 'none',
        color: '#579AFF',
        data: data[0]?.map(item => {
          return [item.time, item.value, item.time]
        })
      }
    ]
    return options
  } else {
    return {
      title: {
        left: 'center',
        top: 'center',
        text: '暂无数据！',
        textStyle: {
          fontWeight: 'normal',
          color: '#999',
          fontSize: 16
        }
      }
    }
  }
}

xAxisTime.js

export const xAxisTime = (data) => {
  let min, max
  const startDate = data?.startTime || data?.startDate
  const endDate = data?.endTime || data?.endDate
  if ( typeof startDate  === 'string' && startDate.length>10){
    min = window.$dayjs(startDate).valueOf()
    max = window.$dayjs(endDate).valueOf()
  } else {
    min = window.$dayjs(`${startDate} 00:00:00`).valueOf()
    max = window.$dayjs(`${startDate} 23:59:59`).valueOf()
  }
  return {
    type: 'time',
    min: min,
    max: max,
    interval: 3600000 * 4,
    axisLabel: {
      color: '#838C95',
      show: true,
      showMinLabel: true,
      // 最后一个显示
      showMaxLabel: true,
      // formatter (value) {
      //   if (window.$dayjs(value).format('YYYY-MM-DD HH:mm:ss') === startDate) {
      //     return '      00:00'
      //   } else if (window.$dayjs(value).format('YYYY-MM-DD HH:mm:ss') === endDate) {
      //     // 最后一个刻度
      //     return '24:00      '
      //   } else {
      //     return window.$dayjs(value).format('HH:mm')
      //   }
      // }

      formatter (value) {
        // console.log(window.$dayjs(value).format('YYYY-MM-DD HH:mm:ss').replace(' ', '\n'), 'uuuu');
        return window.$dayjs(value).format('MM/DD HH:mm:ss').replace(' ', '\n')
      }
    }
  }
}

完成。