时间序列数据处理

时间序列数据的特点

时间序列数据是按时间顺序排列的数据点集合，常见于金融、物联网、气象等领域。这类数据具有明显的时间依赖性，前后数据点之间存在关联性。时间戳是核心要素，通常需要精确到毫秒级。数据往往呈现趋势性、季节性和周期性等特征。例如股票价格每分钟的变化、传感器每小时采集的温度读数、网站每天的访问量统计等。

// 示例时间序列数据结构
const timeSeriesData = [
  { timestamp: '2023-01-01 08:00', value: 32.5 },
  { timestamp: '2023-01-01 08:05', value: 33.1 },
  { timestamp: '2023-01-01 08:10', value: 32.8 },
  // 更多数据点...
];

ECharts 中的时间轴配置

ECharts 通过 xAxis 的 type: 'time' 配置项专门处理时间序列。时间轴会自动根据数据范围生成刻度，支持多种时间格式解析。关键配置参数包括：

• axisLabel.formatter：自定义时间显示格式
• min/max：控制显示的时间范围
• splitNumber：影响时间刻度密度
• axisPointer：鼠标悬停时显示详细时间信息

option = {
  xAxis: {
    type: 'time',
    axisLabel: {
      formatter: '{yyyy}-{MM}-{dd} {HH}:{mm}'
    }
  },
  yAxis: { type: 'value' },
  series: [{
    data: timeSeriesData,
    type: 'line'
  }]
};

大数据量优化策略

当处理大规模时间序列数据时，性能优化至关重要：

1. 数据采样：对原始数据进行降采样处理

function downsample(data, factor) {
  return data.filter((_, index) => index % factor === 0);
}

2. 使用增量渲染：通过 appendData 方法动态加载数据

chart.appendData({
  seriesIndex: 0,
  data: newDataChunk
});

3. 开启大数据模式：设置 large: true 和 largeThreshold

series: [{
  large: true,
  largeThreshold: 2000,
  // ...
}]

动态时间范围控制

实现交互式时间范围选取功能：

const option = {
  dataZoom: [{
    type: 'slider',
    xAxisIndex: 0,
    filterMode: 'filter'
  }, {
    type: 'inside',
    xAxisIndex: 0
  }],
  // ...
};

// 编程控制时间范围
chart.dispatchAction({
  type: 'dataZoom',
  start: 30, // 百分比
  end: 70
});

多时间序列对比分析

在同一个图表中展示多个相关时间序列：

const cpuData = [...];
const memoryData = [...];
const networkData = [...];

option = {
  dataset: [{
    source: cpuData
  }, {
    source: memoryData
  }, {
    source: networkData
  }],
  series: [
    { datasetIndex: 0, type: 'line', name: 'CPU使用率' },
    { datasetIndex: 1, type: 'line', name: '内存占用' },
    { datasetIndex: 2, type: 'line', name: '网络流量' }
  ]
};

时间序列异常检测可视化

通过视觉标记突出显示异常数据点：

const markedData = originalData.map(item => {
  const isAnomaly = detectAnomaly(item.value);
  return {
    ...item,
    symbol: isAnomaly ? 'triangle' : 'circle',
    symbolSize: isAnomaly ? 10 : 4,
    itemStyle: {
      color: isAnomaly ? '#ff0000' : '#5470c6'
    }
  };
});

series: [{
  data: markedData,
  markPoint: {
    data: [
      { type: 'max', name: '最大值' },
      { type: 'min', name: '最小值' }
    ]
  }
}]

时间序列预测展示

将历史数据与预测数据用不同样式区分：

const historyData = [...]; // 截止到当前时间的数据
const forecastData = [...]; // 预测数据

series: [
  {
    name: '历史数据',
    data: historyData,
    type: 'line',
    lineStyle: { width: 2 }
  },
  {
    name: '预测数据',
    data: forecastData,
    type: 'line',
    lineStyle: {
      type: 'dashed',
      width: 1
    },
    itemStyle: { opacity: 0.6 }
  }
]

时区处理方案

处理跨时区时间序列数据的显示问题：

const utcData = [...]; // UTC时间数据

// 转换为本地时间显示
option = {
  xAxis: {
    type: 'time',
    axisLabel: {
      formatter: function(value) {
        return new Date(value).toLocaleString();
      }
    }
  },
  series: [{
    data: utcData.map(item => ({
      timestamp: new Date(item.timestamp).getTime(),
      value: item.value
    }))
  }]
};

事件标记与标注

在时间轴上标注重要事件：

option = {
  series: [{
    data: timeSeriesData,
    markLine: {
      data: [
        {
          name: '系统升级',
          xAxis: '2023-06-15 02:00',
          label: { formatter: '{b}' }
        },
        {
          name: '故障发生',
          xAxis: '2023-06-20 14:30'
        }
      ]
    }
  }]
};

实时数据更新机制

实现时间序列图表的实时刷新：

let currentData = [...];

function updateChart() {
  const newPoint = generateNewDataPoint();
  currentData.push(newPoint);
  
  // 保持固定数量的数据点
  if (currentData.length > 500) {
    currentData.shift();
  }
  
  chart.setOption({
    series: [{
      data: currentData
    }]
  });
}

setInterval(updateChart, 1000);

交互式时间点详情

增强时间点的交互展示：

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    },
    formatter: function(params) {
      const date = new Date(params[0].value[0]);
      return `
        <div>时间: ${date.toLocaleString()}</div>
        <div>值: ${params[0].value[1]}</div>
        <div>变化率: ${calculateChangeRate(params)}%</div>
      `;
    }
  },
  // ...
};