前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Echart图表X轴为时间轴的解释 原

Echart图表X轴为时间轴的解释 原

作者头像
tianyawhl
发布2019-04-04 09:40:22
7.8K0
发布2019-04-04 09:40:22
举报
文章被收录于专栏:前端之攻略

绘制Echart图表,一般情况下x轴type: 'category',但有时候也用到type:  'time', 这两者的主要区别是,当为时间轴时,不需要指定xAxis 对象的data,时间轴显示的Label 是series对象里面的value[0]的日期,value[0]可以是时间戳也可以是“2018-12-5 10:20:30”这种类型,不能是无效的时间格式类型,同样可以格式化Label

例一

代码语言:javascript
复制
<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>

例二

代码语言:javascript
复制
<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>

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档