跳到主要内容

架构概述

时间轴范式组件。

需求背景​

基于设计规范时间轴组件和图表组件需要进行交互，控制图表的动画进程，在代码设计层面图表组件实例和时间轴组件实例具有强耦合性。但预期的理想情况下，时间轴和图表组件应完全解耦，以提供更好的灵活性和扩展性。

核心业务流程​

timeline-business-flow

技术难点分析​

通过注入图表组件实例在一定程度上将时间轴和图表代码解耦，但在设计层面来看，还是存在一定的耦合性，且不够灵活，为了完全解耦时间轴和图表实例，采用事件订阅的设计模式将时间轴实例和图表实例的 API 交互过程交由用户代码层面实现，即可达到完全解耦的目标。

timeline-design-improvements

前后代码对比​

// 以前 --------------------------------------
const timeline = new Timeline(dom, option, [chart1, chart2, chart3]);

// 现在 --------------------------------------
const timeline = new Timeline(dom, option);

// 利用事件订阅与图表实例同步状态
timeline.on('play', ({ type }) => {
  // 播放
  // chart1.xxx();
  // chart2.xxx();
  // chart3.xxx();
});
timeline.on('pause', ({ type }) => {
  // 暂停
  // chart.xxx();
});
timeline.on('change', ({ type, nowDate, previousDate }) => {
  // 切换
  // chart.xxx();
});

页面和功能拆解​

暂无

接口和状态设计​

接口见快速上手。

工时和风险评估​

暂无

发布方案​

由于引入 BREAKCHANGE，3.0.0 大版本发布。