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();
  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值