zoukankan      html  css  js  c++  java
  • 由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

  • 相关阅读:
    centos 下查找软件安装在哪里的命令
    Ubuntu常用命令大全
    linux下vi命令大全
    查看linux系统版本命令
    Linux系统安装时分区的选择(推荐)
    Java subList的使用
    Java中unicode增补字符(辅助平面)相关用法简介
    Java编码方式再学
    LeetCode 448. Find All Numbers Disappeared in an Array
    LeetCode 283. Move Zeroes
  • 原文地址:https://www.cnblogs.com/miaoying/p/7648496.html
Copyright © 2011-2022 走看看