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>