时间序列分析展示

时间序列分析是数据可视化中常见的需求，ECharts 提供了丰富的配置项和交互功能，能够高效展示随时间变化的数据趋势。从折线图到动态效果，结合时间轴和自定义样式，可以清晰呈现复杂的时间序列数据。

时间序列数据的基本展示

时间序列数据通常以折线图或面积图的形式呈现。ECharts 的 xAxis 设置为 'time' 类型时，会自动处理时间格式的转换和刻度标签的显示。以下是一个基础示例：

option = {
  xAxis: {
    type: 'time',
    data: ['2023-01-01', '2023-01-02', '2023-01-03', '2023-01-04']
  },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: [120, 200, 150, 80]
  }]
};

当数据量较大时，可以通过 axisLabel.interval 控制标签密度，避免重叠：

xAxis: {
  type: 'time',
  axisLabel: {
    interval: 5  // 每隔5个数据显示一个标签
  }
}

动态时间轴与数据缩放

对于长时间跨度的数据，ECharts 的 dataZoom 组件允许用户通过滑动选择时间范围。结合 tooltip 的 axisPointer 可以实现精确的数值查看：

option = {
  dataZoom: [{
    type: 'slider',
    xAxisIndex: 0,
    filterMode: 'filter'  // 过滤数据点
  }],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: { backgroundColor: '#6a7985' }
    }
  }
};

多系列时间对比

比较多个时间序列时，可以通过不同颜色和 legend 组件区分。以下代码展示两个产品的销售对比：

series: [
  {
    name: '产品A',
    type: 'line',
    itemStyle: { color: '#5470C6' },
    data: [[new Date('2023-01-01'), 156], [new Date('2023-01-02'), 189]]
  },
  {
    name: '产品B',
    type: 'line',
    itemStyle: { color: '#EE6666' },
    data: [[new Date('2023-01-01'), 112], [new Date('2023-01-02'), 176]]
  }
]

实时数据更新

动态更新的时间序列需要调用 setOption 方法追加数据。以下示例模拟实时数据流：

let baseTime = new Date('2023-01-01');
function updateChart() {
  const newData = Math.round(Math.random() * 200);
  baseTime.setDate(baseTime.getDate() + 1);
  myChart.setOption({
    series: [{
      data: [...myChart.getOption().series[0].data, [new Date(baseTime), newData]]
    }]
  });
}
setInterval(updateChart, 2000);

高级时间轴配置

对于金融等高频数据，需要精细控制时间轴格式和刻度。以下配置显示小时级数据：

xAxis: {
  type: 'time',
  axisLabel: {
    formatter: function(value) {
      return echarts.format.formatTime('HH:mm', value);
    }
  },
  minInterval: 3600 * 1000  // 最小刻度为1小时
}

事件标记与注释

在特定时间点添加标记线或注释可以突出关键事件：

series: [{
  markLine: {
    data: [{
      xAxis: '2023-01-03',
      label: { formatter: '促销开始' }
    }]
  }
}]

性能优化技巧

当数据点超过万级时，建议启用 large: true 和 progressiveChunkMode：

series: [{
  type: 'line',
  large: true,
  progressiveChunkMode: 'sequential',
  data: largeDataSet
}]

时区处理

跨时区项目需要统一时间显示，可通过 timezoneOffset 调整：

xAxis: {
  type: 'time',
  timezoneOffset: -8 * 60  // UTC+8时区修正
}

交互式时间范围选择

结合 brush 组件实现自由选择时间区域：

brush: {
  xAxisIndex: 0,
  throttleType: 'debounce',
  throttleDelay: 300,
  toolbox: ['rect', 'keep', 'clear']
}

自定义时间刻度算法

覆盖默认的标签间隔算法，实现等间距显示：

xAxis: {
  axisLabel: {
    interval: function(index, timestamp) {
      return index % 3 === 0;  // 每3个点显示一个标签
    }
  }
}

时间序列的动画效果

通过 animationDuration 和 animationEasing 增强视觉表现：

series: [{
  animationDuration: 2000,
  animationEasing: 'elasticOut'
}]