echarts x轴time 24小时

关键点:
splitNumber: 8, //分成8段
min: new Date(time_min), //开始时间当天00:00
max: new Date(time_max) //结束时间第二天00:00

function pm() {
        // 显示标题,图例和空的坐标轴
        var i = 0;
        var now_data = new Date()
        var year_now = now_data.getFullYear(), month_now = now_data.getMonth() + 1, day_now = now_data.getDate();
        var test =  now_data.setDate(now_data.getDate()+1);
        var time_min = `${year_now}/${month_now}/${day_now} 00:00:00`;
        var time_max = moment(test).format("YYYY-MM-DD")+' 00:00:00'; //引入moment.js库
        var mytime24 = [
                  ["2021-6-4 00:00:00",0.3],
                  ["2021-6-4 8:20:20",0.3],
                  ["2021-6-4 10:00:00",0.5],
                  ["2021-6-4 23:59:00",0.4]
         ]
        var myChart = echarts.init(document.getElementById('pm'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'PM2.5和PM10',
                left: 'center',
                textStyle: { color: '#E43D3E' }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    animation: false
                }
            },
            dataZoom: [{
                id: 'dataZoomX',
                type: 'slider',
                xAxisIndex: [0],
                filterMode: 'filter',
                start: 0,
                end: 100
            }],
            legend: {
                show: true,
                top: 30,
                data: ['PM2.5', 'PM10']
            },
            xAxis: {
                type: 'time',
                show: true,
                splitLine: {
                    show: false
                },
                axisLabel:{
                    formatter:function(value,index){
                        var showD = moment(value).format('MM-DD');
                        var showH = moment(value).format('HH:mm');
                        return showD+'\n'+showH;
                    }
                },
                splitNumber: 8,
                min: new Date(time_min),
                max: new Date(time_max)
            },
            yAxis: {
                name: '单位:ug/m³',
                type: 'value',
                axisLine: {
                    //y轴线的颜色以及宽度
                    show: true
                },
            },
            grid: {
                bottom: '75px',
            },
            series: [
                {
                    name: 'PM2.5',
                    type: 'line',
                    data: mytime24,
                    smooth: true
                },
                {
                    name: 'PM10',
                    type: 'line',
                    data: mytime24,
                    smooth: true
                }
            ]
        };
        myChart.setOption(option, true);
    }
    pm();

你可能感兴趣的:(echarts,x轴,time)