上QQ阅读APP看书，第一时间看更新
3.5 时间轴
在使用方法上，timeline和之前介绍的组件略有差异，使用时会存在多个option，可以将ECharts传统的option称为原子option，将使用timeline时用到的option称为包含多个原子option的复合option。使用timeline时的格式可以用下面的代码表示。
//在如下代码中，baseOption是一个“原子option”，options数组中的每一项也是一个“原子
//option”。每个“原子option”中就是本文档描述的各种配置项
myChart.setOption(
{
baseOption: {
timeline: {
...,
data: ['time1', 'time2', 'time3']
},
title: {
subtext: ''
},
grid: {...},
xAxis: [...],
yAxis: [...],
series: [
{ //系列一的一些其他配置
type: 'bar',
...
},
{ //系列二的一些其他配置
type: 'line',
...
},
{ //系列三的一些其他配置
type: 'pie',
...
}
]
},
options: [
{ //这是'time1'对应的option
title: {
text: 'time1的数据'
},
series: [
{data: []}, //系列一的数据
{data: []}, //系列二的数据
{data: []} //系列三的数据
]
},
{ //这是'time2'对应的option
title: {
text: 'time2的数据'
},
series: [
{data: []},
{data: []},
{data: []}
]
},
{ //这是'time3'对应的option
title: {
text: 'time3的数据'
},
series: [
{data: []},
{data: []},
{data: []}
]
}
]
}
);
需要注意的是，建议将共用的配置项设置写在baseOption中，当timeline的时间切换时，会将baseOption作用在每个时间对应的option上，两者合并出当前时间的option。
我们构造一个带timeline的可视化，完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!--引入echarts.js -->
<script src="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>
可视化效果如图3-7和图3-8所示，当点击“开始”按钮时，时间轴会向前推移，并相应展示当时的数据，这里对比的是不同年份不同公司的商品销量情况。
图3-7 时间轴在开始位置
图3-8 时间轴开始推移
比较常用的参数大多与播放设置相关，例如是否循环播放的loop参数，是否反向播放的rewind参数，播放速度playInterval参数，播放按钮的位置controlPosition参数等，更多内容可以在官网的文档（配置项）中查看。