Echart圖表X軸爲時間軸的解釋

繪製Echart圖表，通常狀況下x軸type: 'category'，但有時候也用到type:  'time', 這二者的主要區別是，當爲時間軸時，不須要指定xAxis 對象的data，時間軸顯示的Label 是series對象裏面的value[0]的日期，value[0]能夠是時間戳也能夠是「2018-12-5 10:20:30」這種類型，不能是無效的時間格式類型，一樣能夠格式化Label

例一

<script>
var times = [
    [1522306819000, 2],
    [1522306919000, 1],
    [1522307019000, 3],
    [1522307119000, 1],
    [1522307120000, 1],
    [1522307230000, 1],
    [1522302230000, 1],
    [1522307430000, 1],
    [1522407230000, 1]
];

var option2 = {
    legend: {
        data: ['12月28日'],
    },
    grid: { bottom: 50 },
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 座標軸指示器，座標軸觸發有效
            type: 'line' // 默認爲直線，可選爲：'line' | 'shadow'
        },
        formatter: function(params) {
            console.log(params)
            return params[0].name + '<br/>' +
                params[0].seriesName + ' : ' + params[0].value[1] + ' <span>Sm<SUP>3</SUP></span>'
        }
    },

    xAxis: {
        type: 'time',
        splitNumber: 13,
        axisLabel: {
            formatter: function(value, index) {
                return new Date(value).getFullYear();  value指的是1522306819000這種數據
            }
        },
        boundaryGap: ["0", "100%"]
    },
    yAxis: { type: 'value' },
    series: {
        name: '公司名稱',
        type: 'line',
        data: times,
    }
};
var myChart1 = echarts.init(document.getElementById('linechart1'), theme);
myChart1.setOption(option2);
</script>

例二

<script>
var data1 = [{ name: "2016-4-28 08:03:17", value: ["2016-4-28 08:03:17", 15] }, { name: "2016-4-28 08:03:18", value: ["2016-4-28 08:03:18", 15] },
    { name: "2016-4-28 08:03:19", value: ["2016-4-28 08:03:19", 15] }, { name: "2016-4-28 08:03:20", value: ["2016-4-28 08:03:20", 15] },
    { name: "2016-4-28 08:03:21", value: ["2016-4-28 08:03:21", 15] }, { name: "2016-4-28 08:03:22", value: ["2016-4-28 08:03:22", 15] },
    { name: "2016-4-28 08:03:23", value: ["2016-4-28 08:03:23", 15] }, { name: "2016-4-28 08:03:24", value: ["2016-4-28 08:03:24", 15] },
    { name: "2016-4-28 08:03:25", value: ["2016-4-28 08:03:25", 15] }, { name: "2016-4-28 08:03:26", value: ["2016-4-28 08:03:26", 15] },
    { name: "2016-4-28 08:03:27", value: ["2016-4-28 08:03:27", 15] }, { name: "2016-4-28 08:03:28", value: ["2016-4-28 08:03:28", 15] }, { name: "2016-4-28 08:03:29", value: ["2016-4-28 08:03:29", 15] }
];
var data = [];
for (i = 0; i < data1.length; i++) {
    //data.push(data1[x].name.substring(10,18));
    data.push(data1[i]);
    data[i].name = data1[i].name.substring(10, 18);
    //data[i].value[0]=data1[i].value[0].substring(10,18); //不能設置此行，若是設置此行，致使時間格式有誤，會報錯
}
console.log(data)
var option2 = {
    legend: {
        data: ['12月28日'],
    },
    grid: { bottom: 50 },
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 座標軸指示器，座標軸觸發有效
            type: 'line' // 默認爲直線，可選爲：'line' | 'shadow'
        },
        formatter: function(params) {
            console.log(params)
            return params[0].name + '<br/>' +
                params[0].seriesName + ' : ' + params[0].value[1] + ' <span>Sm<SUP>3</SUP></span>'
        }
    },
    xAxis: {
        type: 'time',
        splitNumber: 13,
        axisLabel: {
            formatter: function(value, index) {
                return new Date(value).toLocaleTimeString();
            }
        },
        boundaryGap: ["0", "100%"]
    },
    yAxis: { type: 'value' },
    series: {
        name: '公司名稱',
        type: 'line',
        data: data,
    }
};
var myChart1 = echarts.init(document.getElementById('linechart1'), theme);
myChart1.setOption(option2);
</script>