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
