此处是基础版, 大神请绕路
官方给的timeline组件太过于复杂, 对于不熟悉的朋友, 只是看逻辑就浪费很多时间
以下是基础版的示例,
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("container"));
var option = {
baseOption: {
timeline: {
axisType: 'category',
autoPlay: true,
playInterval: 1000,
data: [
'2002-01-01', '2003-01-01', '2004-01-01',
],
},
xAxis: [{
type: 'category',
data: ['北京', '天津', '河北'],
}],
yAxis: [{
type: 'value'
}],
series: [{
type: 'bar'
}]
},
options: [{
title: {
text: '2002全国宏观经济指标'
},
series: [{
data: [4315, 2150.76, 16018.28]
}]
},
{
title: {
text: '2003全国宏观经济指标'
},
series: [{
data: [5007.21, 2578.03, 6921.29]
}]
},
{
title: {
text: '2004全国宏观经济指标'
},
series: [{
data: [6033.21, 3110.97, 8477.63]
}]
},
]
};;
myChart.setOption(option);
</script>
</body>
</html>
