timeline: {
x: 'center',//时间轴X轴方向位置设置
y: 'bottom',//时间轴Y轴方向位置设置
width: '80%',//宽度
height: 50,//高度
lineStyle: {
color: '#24bde0',//线颜色
width: 2,//线宽
type: 'solid',//线类型
},
checkpointStyle: {
//轴线上点的样式
color: '#e81515',//标记点的颜色
borderColor: '#efb72c',//边框颜色
symbolSize: 14,//大小
borderWidth: 2,//标记点的边框宽度。
shadowBlur: 5,//标记点的阴影模糊度。
shadowColor: '#131313',//标记点的阴影颜色。
},
controlStyle: {
//轴线上控制按钮的样式
showPlayBtn: true,//是否显示播放按钮
showPrevBtn: true,//是否显示向上翻页按钮
showNextBtn: true,//是否显示向下翻页按钮
color: '#2b1a84',//标记线的颜色
borderColor: '#e51010',//边框线颜色
borderWidth: 1,//边框宽度
itemSize: 15//图例大小
itemGap: 10,//图例间隔
normal: {
//普通状态显示
color: '#ccc',
borderColor: '#ccc'
},
emphasis: {
//选中状态显示
color: '#666',
borderColor: '#666'
}
},
axisType: 'category',//坐标轴类型://'value': 数值轴,适用于连续数据。2. 'category': 类目轴,适用于离散的类目数据。3. 'time': 时间轴,适用于时间数据。4. 'log': 对数轴,适用于数据呈现指数增长或指数衰减的情况。
show:false,//是否隐藏时间轴
autoPlay: true,//是否自动播放
playInterval: 1000,//播放间隔时间
data: [ //时间轴文字显示
'a',
{
//文字为b时设置该点的样式和鼠标放上去的显示框
value: 'b',
tooltip: {
formatter: '{b} GDP达到一个高度'
},
symbol: 'diamond',//标记点的图形类型,默认为圆形,可选值包括:circle、rect、roundRect、triangle、diamond、pin、arrow、none等。
symbolSize: 16,//标记点的大小
},
{
value: 'c',
tooltip: {
formatter: function (params) {
return params.name + 'GDP达到又一个高度';
}
},
symbol: 'diamond',
symbolSize: 18
}
],
label: {
formatter: function (s) {
return s;
}
}
},
具体的展示就如同开头图表中展示的那样,可以按照以上的设置方法再次进行自定义。