Echarts图表坐标轴动态展示两个时间点之间的时间

最新推荐文章于 2022-12-13 13:05:38 发布

原创最新推荐文章于 2022-12-13 13:05:38 发布 · 4.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts

前端同时被 2 个专栏收录

61 篇文章

订阅专栏

Echarts

1 篇文章

订阅专栏

本文介绍了如何使用Echarts让坐标轴动态展示两个时间点之间的数据，包括初始和更改后的折线图样式，强调了X轴时间可以根据返回数据动态调节，即使数据间隔长也能保持页面间隔显示。

Echarts图表坐标轴动态展示两个时间点之间的时间

初始折线图样式

在这里插入图片描述
以下是配置项设置：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

更改后折线图样式

在这里插入图片描述
图中所示，X轴的坐标的时间是可以根据你返回的数据动态调节的，时间数据间隔长，页面上也会对应显示相应的间隔，不会因为没有数据而影响。

更改之后的配置项配置：

option = {
    xAxis: {
        type: 'time',
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [                            
                {
                    "value": [
                        "2018-10-11",
                        4
                    ]
                },
                {
                    "value": [
                        "2018-10-12",
                        4
                    ]
                },
                
                {
                    "value": [
                        "2018-10-15",
                        4
                    ]
                },
                {
                    "value": [
                        "2018-10-16",
                        4
                    ]
                },
                {
                    "value": [
                        "2018-10-18",
                        1
                    ]
                },
                {
                    "value": [
                        "2018-10-19",
                        1
                    ]
                },
                {
                    "value": [
                        "2018-10-20",
                        1
                    ]
                },
                
                {
                    "value": [
                        "2018-10-24",
                        1
                    ]
                },
                
                
                {
                    "value": [
                        "2018-10-30",
                        1
                    ]
                },
                {
                    "value": [
                        "2018-10-31",
                        1
                    ]
                },
                {
                    "value": [
                        "2018-11-01",
                        1
                    ]
                },
                {
                    "value": [
                        "2018-11-23",
                        -12.96
                    ]
                }
            ],
        type: 'line'
    }]
};