Echarts数据可视化
文章目录
- Echarts数据可视化
- 第3章 Echarts组件详解
- 3.5 时间轴
Echarts数据可视化：入门、实战与进阶
第3章 Echarts组件详解
3.5 时间轴
timeline：时间轴组件。与其他组件不同的是，timeline 在使用时会存在多个 option，可以将Echarts 传统的option 称为原子option，将使用timeline 时用到的option 称为包含多个原子option的复合option。
【建议】将共用的配置项写在baseOption 中，当timeline 的时间切换时，会将baseOption 作用在每个时间的option上，二者合并出当前时间的option。
举个栗子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>timeline组件</title> <!-- 引入 echarts.js --> <script src="../js/echarts.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { baseOption: { timeline: { data: ['2017', '2018', '2019'] }, title: { subtext: '' }, grid: {}, xAxis: [ { 'type': 'category', 'data': ['A公司', 'B公司', 'C公司'] } ], yAxis: [ { 'type': 'value' } ], series: [ { // 系列一的一些其他配置 type: 'bar' } ] }, options: [ { // 这是'2017' 对应的 option title: { text: '2017年销量情况' }, series: [ {data: [300, 500, 450]} // 系列一的数据 ] }, { // 这是'2018' 对应的 option title: { text: '2018年销量情况' }, series: [ {data: [500, 600, 1000]} ] }, { // 这是'2019' 对应的 option title: { text: '2019年销量情况' }, series: [ {data: [650, 700, 950]} ] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
渲染效果
时间轴组件比较常用的参数大多与播放设置相关，例如：
- loop：是否循环播放
- rewind：是否反向播放
- playInterval：播放速度
- controlPosition：播放按钮位置
更多信息可以看官方文档：https://echarts.apache.org/zh/option.html#timeline
