ECharts Timeline 时间轴组件指南一张图讲清自动播放、样式与事件监听【免费下载链接】echartsApache ECharts is a powerful, interactive charting and data visualization library for browser项目地址: https://gitcode.com/GitHub_Trending/echa/echartsECharts 的 Timeline时间轴组件让同一张图表按时间点逐帧切换本文带你配置 timeline.data、options、baseOption 与自动播放读完后你能独立完成时间轴样式定制与事件监听。什么时候该用时间轴先判断数据形态再决定要不要上 ECharts 时间轴。时间轴适合快照序列你有 N 个时间点每个时间点的图结构相同、只是数值不同切换时希望肉眼看出变化。数据形态例子适不适合同结构、多时间点的快照序列每季度销售复盘、各版本包体积适合逐帧对比一条连续的时间序列逐月气温、日活曲线不需要普通折线图即可每个时间点图结构都不同第一年画饼图、第二年画地图慎用维护成本高拿不准时先问一句这些帧摆在一起变化是不是信息本身是就值得做。3 分钟跑通第一个动态图表这一章给你一份能直接跑的最小配置目标页面底部出现一条可点击的时间轴点哪里换哪里的数据。// 最小可用的时间轴示例季度销售复盘 option { timeline: { data: [Q1, Q2, Q3], // 每个标签对应一帧 axisType: category, // 离散标签模式 autoPlay: false }, options: [ { series: [{ type: bar, data: [12, 18, 9] }] }, // Q1 { series: [{ type: bar, data: [21, 14, 16] }] }, // Q2 { series: [{ type: bar, data: [17, 25, 20] }] } // Q3 ] };跑起来后记住两条对应关系timeline.data的每个元素和options数组同下标的元素一一对应点Q2渲染的就是options[1]。baseOption放公共配置options里只写每帧的差异。上面为保持精简没写baseOption下一章展开讲。axisType默认值是time用离散标签Q1、2013 这类时必须显式写成category这是新手最常见的第一个坑。读懂数据模型baseOption 与 options 的分工上一章留了个问题公共配置到底往哪放。答案是分两层。baseOption标题、坐标轴、tooltip、系列类型这些每一帧都不变的内容只写一次。options数组第 i 项就是第 i 帧相对 baseOption 的差异通常只有series.data和title。时间轴每次切换ECharts 都会把 baseOption 和当前 options 项做一次合并再渲染。所以 options 保持越轻越好标题要随季度变化就只在每帧写title: { text: Q2 销售 }坐标轴没变就完全不用写。这个公共进 baseOption、差异进 options的心智模型记牢后面所有配置都按它拆。外观与动效一次配齐时间轴的方向、位置、标签、标记点、播放按钮、自动播放全部在timeline配置块里完成不用写任何额外 CSS。4.1 换方向与位置默认水平、贴底。想改成贴右侧的垂直时间轴timeline: { orient: vertical, // 垂直方向 right: 20, // 距容器右侧 20px top: 0, // 贴顶 height: 80% // 占满八成高度 }位置三要素还是left/right/top/bottom加width/height和布局其他组件的写法一致这里不展开。4.2 标签与标记点标签文字、轴线、标记点符号各自独立配置timeline: { label: { formatter: {value} 年 // 标签显示为2013 年 }, itemStyle: { color: #c12e34 // 标记点填充色 }, lineStyle: { width: 2, color: #ddd }, symbol: diamond, // 默认圆点换成菱形 symbolSize: 9, symbolRotate: 45 }symbol支持内置图形名circle、rect、diamond 等和 SVG path 字符串symbolSize可以传单个数字或[宽, 高]数组symbolRotate控制标记点旋转角度。4.3 播放行为时间轴自动播放靠四个开关控制timeline: { autoPlay: true, // 自动播放默认 false playInterval: 1500, // 每帧间隔毫秒数默认 2000 rewind: false, // 播到最后一帧是否从头循环 inverse: false, // 是否反转时间轴方向 controlStyle: { position: right // 播放控制按钮的位置 } }autoPlay打开后按playInterval逐帧推进rewind决定播完是否回卷重播inverse则是把时间轴整个反方向排列不是倒放。播放按钮的位置由controlStyle.position控制也可通过show、showPlayBtn等隐藏个别按钮。4.4 事件驱动需要联动别的 UI 时监听两个事件chart.on(timelinechanged, function (params) { // params.currentIndex切到了第几帧 updatePanel(params.currentIndex); });timelinechanged在每次切换帧时触发点标签、拖滑块、自动播放都会timelineplaychanged在播放/暂停状态变化时触发。事件名在timelineAction.ts里定义写法是chart.on(事件名, handler)。完整示例按年切换宏观经济指标把前面几章合起来是一个按年份切换全国指标数据的完整骨架。option { timeline: { data: [2012-01-01, 2013-01-01, 2014-01-01, 2015-01-01], // … axisType: category, label: { formatter: function (value) { return value.slice(0, 4); // 标签只显示年份 } } }, baseOption: { title: { text: 全国指标示例 }, tooltip: { trigger: axis }, xAxis: { type: category, data: [华北, 华东, 华南, 西南] }, yAxis: { type: value }, series: [{ type: bar }] }, options: [ { title: { text: 2012 年 }, series: [{ data: [3, 8, 5, 2] }] }, { title: { text: 2013 年 }, series: [{ data: [4, 9, 6, 3] }] } // … 与 timeline.data 一一对应 ] };只讲三个要点timeline.data有 4 项options就必须有 4 项下标一一对应坐标轴、tooltip、series 类型都进baseOption每帧只补title和datalabel.formatter把2013-01-01截成2013标签干净完整日期留在 tooltip 里。避坑清单最后是一张可直接照着过一遍的 checklisttimeline.data.length options.length。不等时多余帧没数据缺位帧渲染空白这是最高频事故。离散标签场景确认写了axisType: category。默认是time忘写会出现标签间距异常。autoPlay: true不生效时依次排查容器初始宽高是否为 0、是否有其他逻辑覆盖setOption、是否已停在最后一帧。样式层级别画蛇添足label.color、itemStyle.color直接写在对应节点下即可不需要再包一层normal旧版本写法新版本会被预处理兼容掉。每帧差异写小只放变化的 key让其余配置从 baseOption 继承切换时合并开销最小。帧数很多时timeline.replaceMerge可以指定按 key 替换而不是整体合并配合progressive渐进渲染缓解大帧卡顿。想动手的话直接打开仓库里的 timeline 事件示例和 timeline 布局示例改几个数值联动效果立刻看得到。【免费下载链接】echartsApache ECharts is a powerful, interactive charting and data visualization library for browser项目地址: https://gitcode.com/GitHub_Trending/echa/echarts创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
ECharts Timeline 时间轴组件指南：一张图讲清自动播放、样式与事件监听
ECharts Timeline 时间轴组件指南一张图讲清自动播放、样式与事件监听【免费下载链接】echartsApache ECharts is a powerful, interactive charting and data visualization library for browser项目地址: https://gitcode.com/GitHub_Trending/echa/echartsECharts 的 Timeline时间轴组件让同一张图表按时间点逐帧切换本文带你配置 timeline.data、options、baseOption 与自动播放读完后你能独立完成时间轴样式定制与事件监听。什么时候该用时间轴先判断数据形态再决定要不要上 ECharts 时间轴。时间轴适合快照序列你有 N 个时间点每个时间点的图结构相同、只是数值不同切换时希望肉眼看出变化。数据形态例子适不适合同结构、多时间点的快照序列每季度销售复盘、各版本包体积适合逐帧对比一条连续的时间序列逐月气温、日活曲线不需要普通折线图即可每个时间点图结构都不同第一年画饼图、第二年画地图慎用维护成本高拿不准时先问一句这些帧摆在一起变化是不是信息本身是就值得做。3 分钟跑通第一个动态图表这一章给你一份能直接跑的最小配置目标页面底部出现一条可点击的时间轴点哪里换哪里的数据。// 最小可用的时间轴示例季度销售复盘 option { timeline: { data: [Q1, Q2, Q3], // 每个标签对应一帧 axisType: category, // 离散标签模式 autoPlay: false }, options: [ { series: [{ type: bar, data: [12, 18, 9] }] }, // Q1 { series: [{ type: bar, data: [21, 14, 16] }] }, // Q2 { series: [{ type: bar, data: [17, 25, 20] }] } // Q3 ] };跑起来后记住两条对应关系timeline.data的每个元素和options数组同下标的元素一一对应点Q2渲染的就是options[1]。baseOption放公共配置options里只写每帧的差异。上面为保持精简没写baseOption下一章展开讲。axisType默认值是time用离散标签Q1、2013 这类时必须显式写成category这是新手最常见的第一个坑。读懂数据模型baseOption 与 options 的分工上一章留了个问题公共配置到底往哪放。答案是分两层。baseOption标题、坐标轴、tooltip、系列类型这些每一帧都不变的内容只写一次。options数组第 i 项就是第 i 帧相对 baseOption 的差异通常只有series.data和title。时间轴每次切换ECharts 都会把 baseOption 和当前 options 项做一次合并再渲染。所以 options 保持越轻越好标题要随季度变化就只在每帧写title: { text: Q2 销售 }坐标轴没变就完全不用写。这个公共进 baseOption、差异进 options的心智模型记牢后面所有配置都按它拆。外观与动效一次配齐时间轴的方向、位置、标签、标记点、播放按钮、自动播放全部在timeline配置块里完成不用写任何额外 CSS。4.1 换方向与位置默认水平、贴底。想改成贴右侧的垂直时间轴timeline: { orient: vertical, // 垂直方向 right: 20, // 距容器右侧 20px top: 0, // 贴顶 height: 80% // 占满八成高度 }位置三要素还是left/right/top/bottom加width/height和布局其他组件的写法一致这里不展开。4.2 标签与标记点标签文字、轴线、标记点符号各自独立配置timeline: { label: { formatter: {value} 年 // 标签显示为2013 年 }, itemStyle: { color: #c12e34 // 标记点填充色 }, lineStyle: { width: 2, color: #ddd }, symbol: diamond, // 默认圆点换成菱形 symbolSize: 9, symbolRotate: 45 }symbol支持内置图形名circle、rect、diamond 等和 SVG path 字符串symbolSize可以传单个数字或[宽, 高]数组symbolRotate控制标记点旋转角度。4.3 播放行为时间轴自动播放靠四个开关控制timeline: { autoPlay: true, // 自动播放默认 false playInterval: 1500, // 每帧间隔毫秒数默认 2000 rewind: false, // 播到最后一帧是否从头循环 inverse: false, // 是否反转时间轴方向 controlStyle: { position: right // 播放控制按钮的位置 } }autoPlay打开后按playInterval逐帧推进rewind决定播完是否回卷重播inverse则是把时间轴整个反方向排列不是倒放。播放按钮的位置由controlStyle.position控制也可通过show、showPlayBtn等隐藏个别按钮。4.4 事件驱动需要联动别的 UI 时监听两个事件chart.on(timelinechanged, function (params) { // params.currentIndex切到了第几帧 updatePanel(params.currentIndex); });timelinechanged在每次切换帧时触发点标签、拖滑块、自动播放都会timelineplaychanged在播放/暂停状态变化时触发。事件名在timelineAction.ts里定义写法是chart.on(事件名, handler)。完整示例按年切换宏观经济指标把前面几章合起来是一个按年份切换全国指标数据的完整骨架。option { timeline: { data: [2012-01-01, 2013-01-01, 2014-01-01, 2015-01-01], // … axisType: category, label: { formatter: function (value) { return value.slice(0, 4); // 标签只显示年份 } } }, baseOption: { title: { text: 全国指标示例 }, tooltip: { trigger: axis }, xAxis: { type: category, data: [华北, 华东, 华南, 西南] }, yAxis: { type: value }, series: [{ type: bar }] }, options: [ { title: { text: 2012 年 }, series: [{ data: [3, 8, 5, 2] }] }, { title: { text: 2013 年 }, series: [{ data: [4, 9, 6, 3] }] } // … 与 timeline.data 一一对应 ] };只讲三个要点timeline.data有 4 项options就必须有 4 项下标一一对应坐标轴、tooltip、series 类型都进baseOption每帧只补title和datalabel.formatter把2013-01-01截成2013标签干净完整日期留在 tooltip 里。避坑清单最后是一张可直接照着过一遍的 checklisttimeline.data.length options.length。不等时多余帧没数据缺位帧渲染空白这是最高频事故。离散标签场景确认写了axisType: category。默认是time忘写会出现标签间距异常。autoPlay: true不生效时依次排查容器初始宽高是否为 0、是否有其他逻辑覆盖setOption、是否已停在最后一帧。样式层级别画蛇添足label.color、itemStyle.color直接写在对应节点下即可不需要再包一层normal旧版本写法新版本会被预处理兼容掉。每帧差异写小只放变化的 key让其余配置从 baseOption 继承切换时合并开销最小。帧数很多时timeline.replaceMerge可以指定按 key 替换而不是整体合并配合progressive渐进渲染缓解大帧卡顿。想动手的话直接打开仓库里的 timeline 事件示例和 timeline 布局示例改几个数值联动效果立刻看得到。【免费下载链接】echartsApache ECharts is a powerful, interactive charting and data visualization library for browser项目地址: https://gitcode.com/GitHub_Trending/echa/echarts创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考