echarts一组数据都在同一条y轴线上，按顺序显示

Question

echarts一组数据都在同一条y轴线上，按顺序显示

echarts想做成以下效果,整体数据为 data:[{time: '15:26:28',data: [33,21,45,66,32]},{time: '15:26:58',data: [40,44,25,56,73]}]
一组数据都在同一条y轴线上，按顺序显示，用散点图或者折线图，想问问大lao

Answer 1

和昨天一样，y轴做成时间，整成散点图需要的数据结构即可

    function FormatDate(d) {
        return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
    }

    var ym = '2023-10-14'//随便来个日期
    data = [{ time: '15:26:28', data: [33, 21, 45, 66, 32] }, { time: '15:26:58', data: [40, 44, 25, 56, 73] }]
    //data数据升序排列，如果确认data数组项时间已经是升序，下面的代码不需要，排序主要是方便生成y轴时的最大最小值
    data.sort((a, b) => new Date(ym + ' ' + a.time).getTime() - new Date(ym + ' ' + b.time).getTime());

    var min = new Date(ym + ' ' + data[0].time); min.setSeconds(min.getSeconds() - 20);
    var max = new Date(ym + ' ' + data[data.length - 1].time); max.setSeconds(max.getSeconds() + 20);
    min = FormatDate(min)
    max = FormatDate(max)


    series = []
    data.forEach(x => {
        var item = {
            symbolSize: 20,
            type: 'scatter',
            data: []
        }
        x.data.forEach(v => {
            item.data.push([v, ym + ' ' + x.time])
        })

        series.push(item);
    })
    option = {
        xAxis: {},
        yAxis: { type: "time", min, max },
        series
    };