echarts实现双重折线图,X轴为时间,精确到秒级

// 初始化图表
var myChart = echarts.init(document.getElementById('main'));

// 生成模拟数据(包含两个系列)
function generateData() {
    let baseTime = new Date('2023-01-01').getTime();
    let data1 = [], data2 = [];
    
    for (let i = 0; i < 10; i++) {
        let timestamp = baseTime + i * 1000; // 每秒一个数据点
        data1.push([timestamp, Math.random() * 100]);
        data2.push([timestamp, Math.random() * 50 + 30]);
    }
    return [data1, data2];
}

// 配置项
let option = {
    tooltip: {
        trigger: 'axis',
        formatter: function(params) {
            let date = new Date(params[0].value[0]);
            return date.toLocaleString() + '<br/>' + 
                params.map(p => `${p.seriesName}: ${p.value[1]}`).join('<br/>');
        }
    },
    xAxis: {
        type: 'time',
        axisLabel: {
            formatter: '{yyyy}-{MM}-{dd} {HH}:{mm}:{ss}'
        }
    },
    yAxis: { type: 'value' },
    series: [
        {
            name: '系列A',
            type: 'line',
            data: generateData()[0]
        },
        {
            name: '系列B',
            type: 'line',
            data: generateData()[1]
        }
    ]
};

myChart.setOption(option);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值