时间序列分析展示

时间序列数据的特点

时间序列数据是按时间顺序排列的一系列观测值，常见于金融、气象、物联网等领域。这类数据具有几个显著特征：时间依赖性（相邻时间点的数据通常相关）、趋势性（长期上升或下降）、季节性（周期性波动）以及噪声干扰。例如股票价格每分钟的变化记录，或城市气温的每小时监测数据，都是典型的时间序列。

// 示例时间序列数据格式
const timeSeriesData = [
  { date: '2023-01-01', value: 12.5 },
  { date: '2023-01-02', value: 15.2 },
  { date: '2023-01-03', value: 18.7 },
  // 更多数据点...
];

ECharts 基础配置

ECharts 初始化需要准备 DOM 容器并设置基本配置项。对于时间序列展示，xAxis 必须设置为 'time' 类型，yAxis 根据实际数据范围调整。建议启用 dataZoom 组件以便时间范围缩放，这对长周期时间序列尤为重要。

const chart = echarts.init(document.getElementById('chart-container'));

const option = {
  tooltip: {
    trigger: 'axis',
    formatter: params => {
      const date = new Date(params[0].value[0]);
      return `${date.toLocaleString()}<br/>值: ${params[0].value[1]}`;
    }
  },
  xAxis: {
    type: 'time',
    axisLabel: {
      formatter: '{yyyy}-{MM}-{dd}'
    }
  },
  yAxis: { type: 'value' },
  dataZoom: [{
    type: 'inside',
    start: 0,
    end: 100
  }, {
    start: 0,
    end: 100
  }]
};

折线图实现

折线图是最直观展示时间序列变化趋势的形式。ECharts 的 line 系列支持大数据量渲染优化，通过设置 series-line.showSymbol 为 false 可提升性能。对于高频数据（如秒级股票数据），建议启用 large 模式和 progressive 渲染。

// 添加折线图系列
option.series = [{
  type: 'line',
  data: timeSeriesData.map(item => [
    new Date(item.date).getTime(),
    item.value
  ]),
  smooth: true,
  areaStyle: {
    opacity: 0.3
  },
  lineStyle: {
    width: 2
  },
  symbol: 'none',
  large: true,
  progressive: 1000
}];

chart.setOption(option);

多系列对比

比较多个时间序列时，可采用不同颜色区分系列，并添加图例交互。例如同时展示北京、上海两地气温变化，通过 visualMap 组件可实现阈值区间颜色映射。

const multiSeriesOption = {
  legend: {
    data: ['北京', '上海']
  },
  series: [
    {
      name: '北京',
      type: 'line',
      data: beijingData,
      itemStyle: { color: '#c23531' }
    },
    {
      name: '上海',
      type: 'line',
      data: shanghaiData,
      itemStyle: { color: '#2f4554' }
    }
  ],
  visualMap: {
    top: 50,
    right: 10,
    pieces: [
      { gt: 30, color: '#d94e5d' }, // 高温红色
      { gt: 20, lte: 30, color: '#eac736' }, // 常温黄色
      { lte: 20, color: '#50a3ba' } // 低温蓝色
    ]
  }
};

动态数据更新

实时时间序列需要动态更新机制。ECharts 提供 appendData 方法高效追加新数据点，配合 setOption 的 notMerge 参数可实现流畅动画效果。以下模拟实时气温监测场景：

// 模拟实时数据生成
function generateRealTimeData(lastPoint) {
  return {
    date: new Date(lastPoint.date.getTime() + 3600000),
    value: lastPoint.value + (Math.random() * 2 - 1)
  };
}

// 定时更新图表
setInterval(() => {
  const lastData = timeSeriesData[timeSeriesData.length - 1];
  const newData = generateRealTimeData(lastData);
  timeSeriesData.push(newData);
  
  chart.appendData({
    seriesIndex: 0,
    data: [[new Date(newData.date).getTime(), newData.value]]
  });
}, 1000);

交互增强功能

时间序列分析常需要细节探查。通过配置 toolbox 工具集，可添加以下交互功能：

• 数据区域缩放
• 恢复原始视图
• 保存为图片
• 动态类型切换（如切换为柱状图）

option.toolbox = {
  feature: {
    dataZoom: {
      yAxisIndex: 'none'
    },
    restore: {},
    saveAsImage: {},
    magicType: {
      type: ['line', 'bar']
    }
  }
};

性能优化策略

处理大规模时间序列数据时（如超过10万点），需采用特殊优化手段：

1. 启用 large 模式并设置 progressive 分片渲染
2. 使用 downsampling 算法降低显示密度
3. 对静态历史数据启用 webWorker 预处理

// 大数据量配置示例
const bigDataOption = {
  series: [{
    type: 'line',
    large: true,
    progressive: 2000,
    data: hugeTimeSeriesData,
    sampling: 'lttb', // 采用 Largest-Triangle-Three-Buckets 降采样
    dimensions: ['time', 'value']
  }]
};

特殊效果实现

对于特定分析场景，可添加标记线和标记点突出关键事件：

• 标记线：显示平均值、阈值线
• 标记点：标注极值点、异常点
• 颜色渐变：反映数据强度变化

option.series[0].markLine = {
  silent: true,
  data: [{
    type: 'average',
    name: '平均值'
  }, {
    yAxis: 30,
    name: '高温阈值'
  }]
};

option.series[0].markPoint = {
  data: [
    { type: 'max', name: '最大值' },
    { type: 'min', name: '最小值' }
  ]
};

移动端适配

移动设备上的时间序列展示需要特殊处理：

1. 增大点击热区
2. 简化 tooltip 显示
3. 响应式调整字体大小

function adaptMobile() {
  if (window.innerWidth < 768) {
    option.tooltip.confine = true;
    option.axisLabel.fontSize = 10;
    option.dataZoom[1].height = 20;
    chart.resize();
  }
}
window.addEventListener('resize', adaptMobile);

服务端数据对接

实际项目通常从后端API获取时间序列数据。以下是典型的数据获取和处理流程：

async function fetchTimeSeries() {
  try {
    const response = await fetch('/api/timeseries');
    const rawData = await response.json();
    
    // 数据格式转换
    const processedData = rawData.map(item => ({
      date: new Date(item.timestamp),
      value: parseFloat(item.measurement)
    }));
    
    // 更新图表
    chart.setOption({
      dataset: {
        source: processedData
      }
    });
  } catch (error) {
    console.error('数据加载失败:', error);
  }
}

时区处理方案

跨时区应用需要统一时间显示。推荐在前端使用UTC时间存储，在显示时转换为本地时间：

option.xAxis.axisLabel = {
  formatter: function(value) {
    const date = new Date(value);
    return `${date.getHours()}:${date.getMinutes()}`;
  }
};

// 或者在tooltip中显示多时区时间
option.tooltip.formatter = function(params) {
  const date = new Date(params[0].value[0]);
  return `
    UTC: ${date.toUTCString()}<br/>
    Local: ${date.toLocaleString()}<br/>
    Value: ${params[0].value[1]}
  `;
};