前言：
timeline 动态切换 作用：在同一个图表上展示不同时间段的数据，并实现动态切换的效果。
简介原理：在 timeline 中定义显示节点并与相应的数据结构绑定，然后调用 ECharts 提供的方法，重新渲染图表。
options 对象用来配置图表的主要选项对象，包括了图表的数据、样式、交互行为等。
baseOption 是option对象的一个子集，定义图表的基本配置选项。一般来说这个属性是在出现多个option 时，用 baseOption 来定义其中公共的配置，减少重复的定义实现一些配置的复用和统一管理。
一、配置代码：
option={// baseOption 中定义公共的 option 配置baseOption:{timeline:{show:true, // 是否显示 timelinetype:'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', // 图形颜色 优先级低于 areaColorborderWidth: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', // 图形颜色 优先级低于 areaColorborderWidth: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]}]}]
};
![[Diffusion Model 笔记]DDIM 笔记 数学推导 Denoising Diffusion Implicit Models](https://img-blog.csdnimg.cn/direct/2b1ece6a310c4697b64422fb5ee1d314.png)
