• 由echarts想到的js中的时间类型


    在工作中使用echarts时,偶然发现折线图中对时间类型变量的用法:

    now前面的+号何解?

    now = new Date(+now + oneDay);

    后来查阅资料,看到一篇博客,解释如下:
    这是对后面的对象做一个+运算,触发对象执行valueOf进行求值!
    Date实例的valueOf返回它的毫秒数,大家可以尝试如下代码:
    var now = new Date, time = now.getTime();
    
    console.log(time==now.valueOf());//true
    
    console.log(time==+now);//true

    再举个例子:

        function person() {
        }
        person.prototype.valueOf = function () {
            return "miaoying";
        }
        var foo = new person();
        console.log("hello " + foo);//这里将输出字符串"hello miaoying"
        console.log("hello " + foo.valueOf());//这里将输出字符串"hello miaoying"

    echarts中的代码如下:
    function randomData() {
        now = new Date(+now + oneDay);
        value = value + Math.random() * 21 - 10;
        return {
            name: now.toString(),
            value: [
                [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                Math.round(value)
            ]
        }
    }
    
    var data = [];
    var now = +new Date(1997, 9, 3);
    var oneDay = 24 * 3600 * 1000;
    var value = Math.random() * 1000;
    for (var i = 0; i < 1000; i++) {
        data.push(randomData());
    }
    
    option = {
        title: {
            text: '动态数据 + 时间坐标轴'
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                params = params[0];
                var date = new Date(params.name);
                return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
            },
            axisPointer: {
                animation: false
            }
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },
        series: [{
            name: '模拟数据',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: data
        }]
    };

    参考:http://www.cnblogs.com/Raoh/p/4212075.html

  • 相关阅读:
    mybatis入门
    windows环境下搭建RocketMQ
    主键-雪花算法
    Springboot杂七杂八
    springboot整合webSocket的使用
    sss
    sss
    sss
    sss
    sss
  • 原文地址:https://www.cnblogs.com/miaoying/p/7648496.html
Copyright © 2020-2023  润新知