streamlit生成垂直的timeline

以下是使用Streamlit和streamlit-timeline库生成垂直timeline的示例代码：

import streamlit as st
from streamlit_timeline import timeline

# 创建时间线数据
data = [
    {
        "text": "事件1",
        "time": "2022-01-01",
        "icon": "🎉"
    },
    {
        "text": "事件2",
        "time": "2022-01-15",
        "icon": "🎂"
    },
    {
        "text": "事件3",
        "time": "2022-02-01",
        "icon": "🎁"
    }
]

# 使用streamlit-timeline库创建时间线
st.write("垂直时间线示例：")
timeline(data, height=300, direction="vertical")

你可以根据需要修改数据和其他选项，例如高度和方向。

相关问题

echarts的timeline

ECharts是一个强大的JavaScript图表库，Timeline是其中的一个功能模块，专门用于可视化时间序列数据。Timeline在ECharts中表现为一条时间轴，上面分布着各个关键点或者事件，通过鼠标交互可以查看对应的时间段内的详细信息。它支持多种布局，例如水平、垂直甚至是瀑布流布局，并且可以配合柱状图、折线图等多种图表类型一起使用，非常适合用来展示历史趋势、项目进度、时间相关的数据演变等情况。Timeline的特点包括：

1. **时间轴控制**：用户可以轻松缩放、拖拽时间轴，查看指定时间范围的数据。
2. **节点定制**：每个时间点都可以自定义显示内容，包括文字、图标、图形等。
3. **交互性**：点击或悬停节点时，能够触发弹窗或其他交互效果，提供丰富的信息展示。
4. **事件绑定**：可以绑定事件处理函数，实现更复杂的业务逻辑。

使用ECharts Timeline，开发者可以根据需要调整配置选项，创建出适合特定场景的时间线图表。如果你对如何开始使用ECharts Timeline感兴趣，可以从官方文档开始学习：https://echarts.apache.org/examples/en/editor.html?c=line-timeline 。

elementui timeline横向

Element UI 的 Timeline（时间线）组件是一个用于展示一系列按照时间顺序排列事件的工具。在横向布局下，你可以将Timeline设置为水平方向，这通常用于显示项目进度、工作流程或者其他按时间顺序的序列信息。在Element UI中，你可以通过`horizontal`属性将其设置为横向模式：

<el-timeline :horizontal="true">
  <el-timeline-item>
    <div class="timeline-header">Event 1</div>
    <div class="timeline-body">Description of event 1</div>
  </el-timeline-item>
  <!-- 添加更多事件 -->
</el-timeline>

通过这种方式，每个事件会并排显示，适合空间有限或需要清晰展现时间跨度的情况。设置好后，用户可以轻松地查看每个阶段的时间节点和详细内容。