Echarts如何基于dataset的src字段拆分多时序系列 时间戳不同步场景实现问询

结论 #

完全可以实现，不需要提前将不同src对应的数据按时间戳对齐为包含tstamp、prod1、prod2的宽表结构，主流可视化库均原生支持该场景。

核心实现逻辑 #

• 先对原始dataset的source数据按src字段分组，筛选得到src=1和src=2的两组独立数据，每组数据保留原有的tstamp和prod映射关系即可
• 配置图表x轴为时间类型，可视化库会自动识别所有数据点的时间范围生成连续的全局时间轴，无需手动对齐不同序列的时间戳
• 两个时序系列分别绑定对应分组的数据源，各自指定x轴取值为tstamp、y轴取值为prod即可

其他可视化库（如D3.js、Plotly、Matplotlib）的实现逻辑完全一致，均支持多系列独立的时间点映射。

ECharts 实现示例代码 #

// 1. 按src字段分组过滤数据
const src1Data = dataset.source.filter(item => item.src === 1).map(item => [item.tstamp, item.prod])
const src2Data = dataset.source.filter(item => item.src === 2).map(item => [item.tstamp, item.prod])

// 2. 图表基础配置
const option = {
  xAxis: {
    type: 'time'
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'src=1 序列',
      type: 'line',
      data: src1Data
    },
    {
      name: 'src=2 序列',
      type: 'line',
      data: src2Data
    }
  ]
}

内容的提问来源于stack exchange，提问作者Awer Muller