echarts时间轴根据表单中的日期选择器类别变化

实现内容

Fri May 19 2023 08:54:38 GMT+0800 (中国标准时间)

请求的时间数据

1. date： from: “2023-05-19 00:00:00” ，to: “2023-05-19 23:59:59”
2. week： from: “2023-05-14 00:00:00”，to: “2023-05-20 23:59:59” …

返回的时间数据

date： 2023-05-19T00:00:00

echarts效果

具体实现

export function transformTime(date: Date, timeUnit: string) {
    switch (timeUnit) {
        case 'date':
            return [beijingTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 0, 0, 0), beijingTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 23, 59, 59)]
        case 'week':
            return firstAndEndDayofWeek(date);
        case 'month':
            return [beijingTime(date.getFullYear(), (date.getMonth() + 1), 1, 0, 0, 0), beijingTime(date.getFullYear(), (date.getMonth() + 2), 0, 23, 59, 59)]
        case 'quarter':
            throw new Error('季度时间转化未完成');
        // return date.getFullYear() + '-' + (date.getMonth() )
        case 'year':
            return [beijingTime(date.getFullYear(), 1, 1, 0, 0, 0), beijingTime(date.getFullYear() + 1, 1, 0, 23, 59, 59)]
    }

    return date.getFullYear() + (date.getMonth()) + date.getDate()
}

function beijingTime(year, month, day, hour = 0, minute = 0, second = 0) {
    const time = new Date(year, month - 1, day, hour, minute, second); // 构造Date对象
    const beijingTime = new Date(time.getTime() + 8 * 60 * 60 * 1000); // 将时间调整为北京时间
    return beijingTime.toISOString().replace('T', ' ').slice(0, 19);
}

// 根据时间单位和最终数据获取坐标轴数据
export function getAxisData(targetData: TargetData[], timeUnit: string) {
    switch (timeUnit) {
        case 'date':
            return targetData.map(item => { return { time: parseTimeByDate(item.time), value: item.value, comparisonValue: item.comparisonValue } })
        case 'week':
            return targetData.map(item => { return { time: getDayOfWeek(item.time), value: item.value, comparisonValue: item.comparisonValue } })
        case 'month':
            return targetData.map(item => { return { time: parseTimeByMonth(item.time), value: item.value, comparisonValue: item.comparisonValue } })
        // return date.getFullYear() + '-' + (date.getMonth() )
        case 'year':
            return targetData.map(item => { return { time: parseTimeByYear(item.time), value: item.value, comparisonValue: item.comparisonValue } })

    }
}

export function parseTimeByDate(date: Date) {
    return (new Date(date).getHours() + '').padStart(2, '0')
}

export function parseTimeByWeek(date: Date) {
    return getDayOfWeek(date)
}

export function parseTimeByMonth(date: Date) {
    return (new Date(date).getDate() + '').padStart(2, '0')
}

export function parseTimeByYear(date: Date) {
    return (new Date(date).getMonth() + 1 + '').padStart(2, '0')
}

const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

export function getDayOfWeek(date: Date) {
    return daysOfWeek[new Date(date).getDay()]
}

function firstAndEndDayofWeek(date: Date) {
    // 获取星期几
    const dayOfWeek = date.getDay();
    // 获取本周第一天
    const firstDayOfWeek = new Date(date);
    firstDayOfWeek.setDate(date.getDate() - dayOfWeek);
    // 获取本周最后一天
    const lastDayOfWeek = new Date(date);
    lastDayOfWeek.setDate(date.getDate() - dayOfWeek + 6);

    const firstDay = beijingTime(firstDayOfWeek.getFullYear(), firstDayOfWeek.getMonth() + 1, firstDayOfWeek.getDate(), 0, 0, 0)
    const lastDay = beijingTime(lastDayOfWeek.getFullYear(), lastDayOfWeek.getMonth() + 1, lastDayOfWeek.getDate(), 23, 59, 59)
    return [firstDay, lastDay]
}

echarts tooltip

    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          return getToolTip(params[0].name, Time, Mode) + '<br/>' +
            params[0].marker + `<b>${params[0].value}  ${yAxisName}</b>`
        } // params[0].name： 01，Time：就是date，mode：‘date’
      },

	export function getToolTip(value: string, date: Date, timeUnit: string) {
    switch (timeUnit) {
        case 'date':
            return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + value + ':00'
        case 'week':
            // return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + value
            return value
        case 'month':
            return `${date.getFullYear()}-${(date.getMonth() + 1)}-${value}`
        case 'quarter':
            throw new Error('季度时间转化未完成');
        // return date.getFullYear() + '-' + (date.getMonth() )
        case 'year':
            return `${date.getFullYear()}-${value}`
    }
}