Echarts在线免费图表

 
            function formatTime(time, format) {
    time = new Date(time);
    if (isNaN(time.getTime())) {
        time = new Date();
    }
    format = format || 'YYYY-MM-DD hh:mm:ss';
    let matchList = {
        Y(time) {
            return time.getFullYear();
        },
        M(time) {
            return time.getMonth() + 1;
        },
        D(time) {
            return time.getDate();
        },
        h(time) {
            return time.getHours();
        },
        m(time) {
            return time.getMinutes();
        },
        s(time) {
            return time.getSeconds();
        }
    };
    let output = format;
    let regexp;
    function replaceMethod(key) {
        return function (match) {
            return add0(matchList[key](time), match.length);
        };
    }
    for (let key in matchList) {
        if (matchList.hasOwnProperty(key)) {
            regexp = new RegExp(key + '+');
            output = output.replace(regexp, replaceMethod(key));
        }
    }
    return output;
}

function add0(str, length) {
    str += '';
    return new Array(length - str.length + 1).join('0') + str;
}

var categories = [
    1486656000,
    1486742400,
    1486828800,
    1486915200,
    1487001600,
    1487088000,
    1487174400
];
var current = [
    20000,
    30000,
    10000,
    290000,
    123355,
    198128,
    123124
].map(function(v, i){
    return [new Date(categories[i] * 1000), v];
})

option = {
    tooltip: {
        trigger: 'axis'
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            magicType: {
                type: ['line', 'bar']
            },
            saveAsImage: {
                name: '异常趋势'
            }
        }
    },
    grid: {
        top: 50
    },
    xAxis: [{
        name: '日期',
        type: 'time',
        // min: 'dataMin',
        // interval: 1000 * 60 * 60 * 24 * 2,
        splitNumber: 7,
        axisLabel: {
            formatter: value => formatTime(value, 'MM-DD hh:mm:ss'),
            rotate: 10
        },
        splitLine: {
            show: false
        }
    }],
    yAxis: [{
        type: 'value',
        splitLine: {
            show: false
        }
    }],
    series: [{
        name: 'pv',
        type: 'line',
        smooth: true,
        // itemStyle: { normal: { opacity: 0 } },
        label: {
            normal: {
                show: true
            }
        },
        data: current
    }]
};