前言：
timeline 动态切换 作用：在同一个图表上展示不同时间段的数据，并实现动态切换的效果。
简介原理：在 timeline 中定义显示节点并与相应的数据结构绑定，然后调用 ECharts 提供的方法，重新渲染图表。
options 对象用来配置图表的主要选项对象，包括了图表的数据、样式、交互行为等。
baseOption 是option对象的一个子集，定义图表的基本配置选项。一般来说这个属性是在出现多个option 时，用 baseOption 来定义其中公共的配置，减少重复的定义实现一些配置的复用和统一管理。
一、配置代码：
option={
// baseOption 中定义公共的 option 配置
baseOption:{
timeline:{
show:true, // 是否显示 timeline
type:'slider', // 属性类别仅这种类别
axisType:'time', // 轴的类型
currentIndex:0, // 当前显示的options 组，0时表示展示options[0] 的数据
autoPlay:true, // 是否自动播放
rewind:true, // 是否方向播放
loop:true, // 是否循环播放
playInterval:100, // 数据切换、跳动的间隔，单位毫秒
realtime:true, // 点击还在拖拽圆点的时候，是否事实更新视图
replaceMerge:undefined, // 合并方法，用来处理数据切换时，是将数据叠加还是重新绘制。
controlPosition:'left', // 该组件的播放按钮的位置
zlevel:0, // 组件所有图形的渲染等级
z:0, // 组件所有图形的 z 值，控制图形的前后顺序。
left:'auto', // 组件距离容器的左侧距离
right:'auto', // 组件距离容器的右侧距离
top:'10%', // 组件距离容器的顶部距离
bottom:'10%', // 组件距离容器的底部距离
padding:5, // 组件内边距
orient:'horizontal', // 组件的展示方式，竖直或者水平
inverse:true, // 是否方向放置
symbol:'rect', // 标记的图形
symbolSize:10, // 标记图形的大小
symbolRotate:10, // 标记图形的旋转角度
symbolKeepAspect:true, //
symbolOffset:[0,0], // 标记相当于原本位置的偏移
// timeline 轴线的样式
lineStyle:{
show:true, // 是否显示轴线
color:'#DAE1F5', // 线的颜色
width:2, // 线的宽度
type:'solid', // 线的类别
dashOffset:10, // 线为虚线时，虚线的偏移量
cap:'butt', // 指定线段末端的绘制方法
join:'bevel', // 设置两个长度不为 0 的相连部分如何连接
miterLimit:10, // 设置斜截面限制比例
shadowBlur:10, // 线阴影的模糊大小
shadowColor:'red', // 线的阴影颜色
shadowOffsetX:10, // 阴影水平偏移量
shadowOffsetY:10, // 阴影竖直偏移量
opacity:0.5, // 图形的透明度
},
// timeline 轴的文本标签样式
label:{
position:'auto', // 标签的显示位置
show:true, // 标签是否显示
interval:'auto', // 标签的间隔
rotate:90, // 标签的旋转角度
formatter:function (value, index) { // 标签显示文本的设置
return value + 'kg';
},
color:'red', // 标签文本颜色
fontStyle:'normal', // 文字字体的风格
fontWeight:'normal', // 文字粗细
fontFamily:'serif', // 字体系列
fontSize:12, // 字体大小
align:'center', // 文字水平对齐方式
verticalAlign:'center', // 文字竖直对齐方式
lineHeight:56, // 行高
width:10, //文字显示宽度
height:10, //文字显示高度
textBorderColor:'red', //文本描边颜色
textBorderWidth:10, //文本描边宽度
textBorderType:'solid', //描边类型
textBorderDashOffset:10, //描边为虚线时的偏移量
textShadowColor:'transparent', //文字阴影颜色
textShadowBlur:10, //文字阴影长度
textShadowOffsetX:10, //文字阴影水平偏移量
textShadowOffsetY:10, //文字阴影竖直偏移量
overflow:'none', //文字超出是否截断
ellipsis:'···', //文字截断时末尾显示内容
padding:[5,5,5,5], //文本标签内边距
backgroundColor:'auto', //文本标签的背景颜色
borderColor:'red', //文本标签的边框颜色
borderWidth:20, //文本标签的边框宽度
borderType:'solid', //文本标签边框描边类型
borderDashOffset:10, //描边为虚线时，虚线偏移量
borderRadius:10, //文本标签的圆角
shadowBlur:20, //文本标签阴影大小
shadowColor:'red', //阴影颜色
shadowOffsetX:20, //文本标签的阴影水平偏移
shadowOffsetY:20, //文本标签的阴影竖直偏移
// 富文本 自定义文本样式 并在上面的 formatter 中使用
rich:{
style1:{
// 关于文本的基本样式都可以定义
}
},
},
// timeline 图形的样式
itemStyle:{
color:'red', // 图形颜色 优先级低于 areaColor
borderWidth:2, // 图形描边宽度
borderColor:'red', // 图形描边颜色
borderType:'solid', // 图形描边线类型
borderDashOffset:10, // 描边线为虚线时的虚线偏移量
borderCap:'round', // 指定线段末端绘制方法
borderJoin:'bevel', // 两个线段相连端形状
borderMiterLimit:10, // borderJoin 为 miter 时,斜接面比例
shadowBlur:10, // 图形的阴影大小
shadowColor:'red', // 图形阴影的颜色
shadowOffsetX:5, // 阴影水平偏移量
shadowOffsetY:5, // 阴影竖直偏移量
opacity:0.5, // 图形透明度
},
// 当前项的图形样式
checkpointStyle:{
symbol:'pin', // 标记的图形形状
symbolSize: 10, // 标记图形大小
symbolRotate:90, // 标记图形旋转角度
symbolKeepAspect:true, // 如果symbol 为自定义的 path:// 格式，图形是否等比缩放
symbolOffset:[10,10], // 相对于原本位置的偏移
animation:true, // 当前节点切换时是否有动画
animationDuration:300, // 当前节点切换动画时长
animationEasing:'quinticInOut', // 当前节点动画的缓动效果
// 剩余的样式内容和 itemStyle 中的一致
},
// 按钮样式
controlStyle:{
show:true, // 是否显示控制按钮
showPlayBtn:true, // 是否显示播放按钮
showPrevBtn:true, // 是否显示后退按钮
showNextBtn:true, // 是否显示前进按钮
itemSize:24, // 控制按钮的大小
itemGap:12, // 控制按钮的间隔
position:'left', // 控制按钮的位置
playIcon:'image://url', // 播放按钮的图形
stopIcon:'image://url', // 停止按钮的图形
prevIcon:'image://url', // 后退按钮的图形
nextIcon:'image://url', // 前进按钮的图形
color:'red', // 图形颜色 优先级低于 areaColor
borderWidth:2, // 图形描边宽度
borderColor:'red', // 图形描边颜色
borderType:'solid', // 图形描边线类型
borderDashOffset:10, // 描边线为虚线时的虚线偏移量
borderCap:'round', // 指定线段末端绘制方法
borderJoin:'bevel', // 两个线段相连端形状
borderMiterLimit:10, // borderJoin 为 miter 时,斜接面比例
shadowBlur:10, // 图形的阴影大小
shadowColor:'red', // 图形阴影的颜色
shadowOffsetX:5, // 阴影水平偏移量
shadowOffsetY:5, // 阴影竖直偏移量
opacity:0.5, // 图形透明度
},
// 进度条中当前节点之前的的线条，拐点，标签的样式
progress:{
// 进度条中的线条样式，和上面的 lineStyle 配置内容一致
lineStyle:{},
// 进度条中的标记点图形样式，和上面的 itemStyle 配置内容一致
itemStyle:{},
// 进度条中的标签样式 这个配置视乎不太完整，很多 label 值在 progress 中是无效的
label:{},
},
// timeline 中高亮样式配置
emphasis:{
// 标签高亮样式，和上面的 label 配置内容一致
label:{},
// 进度条中的标记点图形高亮样式，和上面的 itemStyle 配置内容一致
itemStyle:{},
// 当前项，高亮状态样式，与上 checkpointStyle 配置相同
checkpointStyle:{},
// 控制按钮高亮状态样式，与上 controlStyle 配置相同
controlStyle:{}
},
// timeline 数据项
data:[
'2021',
'2022',
'2023',
{
value:'2024',
// 单独配置指示器内容
tooltip:{
formatter:function(params){
return params.name +'年'
}
},
// 单独配置图标
symbol:'diamond', // 图标图形
symbolSize:12, // 图标大小
symbolOffset:[5,5], // 图标偏移量
symbolRotate:90, // 图标旋转角度
// 单独配置文本标签样式
label:{
// 与上面配置的 label 内容一致
},
// 单独配置图形样式
itemStyle:{
// 配置内容与上方的 itemStyle 一致
},
// 单独配置高亮状态
emphasis:{
// 配置内容与上方的 emphasis 一致
}
}
]
}
}
}二、解剖图：
三、配置实例代码
使用：
代码：
option = {
baseOption: {
grid:{
height:'60%'
},
tooltip:{},
// 核心配置
timeline:{
bottom:'5%',
symbolSize:24,
// 文本标签样式
label:{
position:20,
fontSize:24,
},
// 控制按钮样式
controlStyle:{
// itemSize:24,
itemGap:32
},
checkpointStyle:{
symbolSize:24,
},
// 进度条中的线条，拐点，标签的样式。
progress:{
label:{
fontSize:24,
show:false,
textBorderColor:'red',
textBorderWidth:5,
},
},
// 高亮样式配置
emphasis:{
checkpointStyle:{
color:'red',
},
},
axisType: "category",
autoPlay: true,
playInterval: 10000,
// 数据项配置
data:[
'2020',
'2021',
'2022',
{
value:'2023',
tooltip:{
formatter:'{b} GDP达到一个高度'
},
symbol:'diamond',
}
],
},
title:{
subtext: '数据来自撒娇的骑士'
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
},
yAxis: {
type: 'value'
},
// 统一定义 series 的
series: [
{
name: '快乐值',
type: 'bar',
},
{
name: '消费',
type: 'line',
}
]
},
// 设置 每个节点的 配置：标题，数据，图形类型等
options:[
{
title: { text: '2020年平均数据' },
series:[
{
data: [150, 230, 224, 218, 135, 147, 260]
},
{
data: [120, 130, 254, 268, 175, 167, 280],
},
]
},
{
title: { text: '2021年平均数据' },
series:[
{
data: [180, 250, 264, 298, 135, 147, 260]
},
{
data: [110, 120, 244, 258, 185, 177, 270]
}
]
},
{
title: { text: '2022年平均数据' },
series:[
{
data: [140, 230, 224, 222, 135, 147, 260]
},
{
data: [125, 130, 254, 268, 180, 173, 285]
}
]
},
{
title: { text: '2023年平均数据' },
series:[
{
data: [150, 230, 230, 218, 135, 147, 260]
},
{
data: [120, 160, 280, 268, 195, 167, 280]
}
]
}
]
};
2281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
