echart折线图时间轴

最新推荐文章于 2025-07-09 15:42:19 发布

原创

最新推荐文章于 2025-07-09 15:42:19 发布 · 2.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#Html #Echarts #Js

针对ECharts官方折线时间轴进行个性化修改，解决了分钟值超过60的错误。博客作者分享了修改过程，并欢迎读者反馈潜在问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看了一些原有的时间轴设定，有些不太符合自己的需求，根据自己的需求对官方的折线时间轴进行了一些改变；

var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};

var data = [];
var time = []
var starTime = 30 * 60 * 1000  // 这个是当前时间向前取值，我在这里设置的是半个小时
var times = new Date((+new Date() - starTime))   //X轴开始的时间，可以自行设置
function initDate(value){   //时间格式化
    if(value < 9){
        return '0' + value
    }else{
        return value
    }
}
for(var i = 0 ; i < 7 ; i++){  //X轴上显示多少个刻度
    time.push(initDate(times.getMonth() + 1) + '/' + initDate(times.getDate()) + ' ' + initDate(times.getHours()) + ':' + initDate((times.getMinutes() + (i * 5))));
    data.push(Math.round(Math.random()  * 30 + 10))
}
option = {
    title: {
        text: '动态数据 + 时间坐标轴'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            return params.name + ':' + params.value;
        },
        axisPointer: {
            animation: false