【echarts使用】之x轴时间戳展示0-24小时

[yihan12]

import ChartDataHandler from '@/utils/chartDataHandler.js'
import vm from '@/main.js';
import dayjs from 'dayjs';
import { thousands } from "@/utils/formatNum.js"

const mytime24 = []
const value = []
const arr = [1004, 2000, 4000, 12333, 6000, 5000, 2000, 1004, 2000, 4000, 12333, 6000, 5000, 2000, 1004, 2000, 4000, 12333, 6000, 5000, 2000, 5000, 2000, 2000]
const arrRate = [10, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20]
let i = 0;
const time_pre = `${dayjs().format('YYYY-MM-DD')} 00:00:00`
const time_pre_yyy = `${dayjs().format('YYYY-MM-DD')} 00:30:00`
let ttt = (new Date(time_pre)).getTime()
let yyy = (new Date(time_pre_yyy)).getTime()
for (; i < 25; i++) {
    mytime24.push([ttt, '']);//传入value的值为空则该值点不会显示在图表中
    value.push([yyy, arr[i], arrRate[i]])
    ttt = ttt + 3600000;
    yyy = yyy + 3600000;
}

let chartOpts = {
    grid: {
        left: '2%',
        right: '2%',
        bottom: '10%',
        containLabel: true
    },
    title: {
        text: vm.$t('userData.sleepTime'),
        // left: '2%',
        top: '1%',
        textStyle: {
            fontWeight: 'bold',
            fontSize: 18
        }
    },
    tooltip: {
        trigger: 'axis',
        formatter: params => {
            console.log(params);
            const title = vm.$t('userData.sleepTimeName')
            const timeLine1 = dayjs(params[0].data[0] - 1800000).format('HH:mm')
            let timeLine2 = dayjs(params[0].data[0] + 1800000).format('HH:mm')
            if (timeLine2 === '00:00') {
                timeLine2 = '24:00'
            }
            const data1 = thousands(params[0].data[1]);
            const name1 = vm.$t('userData.userT');

            const data2 = thousands(params[0].data[2]);
            const name2 = vm.$t('userData.userRateT');
            let str = '';
            str += `<div style="margin: 0px 0 0;line-height:1;">
            <div style="margin: 0px 0 0;line-height:1;">
            <div style="font-size:14px;color:#666;font-weight:400;line-height:1;">${title}：${timeLine1}-${timeLine2}</div>
            <div style="margin: 10px 0 0;line-height:1;">
            <div style="margin: 0px 0 0;line-height:1;">
            <div style="margin: 0px 0 0;line-height:1;">
            <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:rgba(224, 62, 76);"></span>
            <span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">${name1}</span>
            <span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">${data1}</span>
            <div style="clear:both"></div></div>
            <div style="margin: 8px 0 0;line-height:1;">
            <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:rgba(224, 62, 76);"></span>
            <span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">${name2}</span>
            <span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">${data2} %</span>
            <div style="clear:both"></div></div>
            </div></div></div>
            </div>`
            return str
        }
    },
    xAxis: {
        type: 'time',
        splitNumber: 24,
        data: [],
        axisLabel: {
            interval: 0,
            formatter: (value) => {
                if (dayjs(value).format('YYYY-MM-DD') > dayjs().format('YYYY-MM-DD')) {
                    return '24:00'
                } else {
                    return dayjs(value).format('HH:mm')
                }

            }
        },
        // axisTick: {
        //     alignWithLabel: true
        // }
    },
    yAxis: {
        type: 'value',
        // max: 14,
        // min: 9,
        // axisLabel: {
        //     show: false //隐藏坐标
        // },
        // axisTick: {
        //     show: false
        // },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed',
                color: '#e9e9e9'
            }
        } //设置y轴分割线样式
    },
    series: [
        {
            type: 'bar',
            barWidth: 30,
            name: vm.$t('userData.sleepTime'),
            data: value,
            itemStyle: {
                color: 'rgba(224, 62, 76)', //拐点内圆颜色
            },
            color: 'rgba(224, 62, 76)'
        },
        {
            name: '',
            type: 'line',
            data: mytime24,//空数据
        },

    ]
};

const handler = new ChartDataHandler({
    id: 'SleepTimeCharts',
    height: '100%',
    chartOpts: chartOpts
});




handler.setData = function (data) {
    // let { status, result } = data;
    // if (status == 0 && !!result && result.length != 0) {
    //     let resData = data.result.t3 ? fromatData21(data.result.t1) : fromatData(data.result.t1)
    //     console.log(resData, data.result);
    //     chartOpts.yAxis.min = resData[1];
    //     chartOpts.yAxis.max = resData[2];
    //     chartOpts.series[0].data = resData[0];
    //     chartOpts.xAxis.data = data.result.t2;

    // }
    // this.opts.loading = false;

}


export default handler;