Code Editor for app.py

import streamlit as st
import pandas as pd
import numpy as np
import plotly.express as px
import altair as alt

st.set_page_config(page_title="數據視覺化展示", layout="wide")

st.title("數據視覺化展示")

# 生成示例數據
np.random.seed(42)
dates = pd.date_range(start='2023-01-01', end='2023-12-31', freq='D')
data = {
    '日期': dates,
    '銷售額': np.random.normal(1000, 200, len(dates)),
    '訪客數': np.random.randint(100, 1000, len(dates)),
    '轉換率': np.random.uniform(0.1, 0.3, len(dates))
}
df = pd.DataFrame(data)

# 分成兩列顯示
col1, col2 = st.columns(2)

with col1:
    st.subheader("銷售額趨勢圖")
    fig_sales = px.line(df, x='日期', y='銷售額', title='每日銷售額變化')
    st.plotly_chart(fig_sales, use_container_width=True)

    st.subheader("訪客數分布")
    fig_visitors_hist = px.histogram(df, x='訪客數', title='訪客數分布圖')
    st.plotly_chart(fig_visitors_hist, use_container_width=True)

with col2:
    st.subheader("銷售額與訪客數關係")
    fig_scatter = px.scatter(df, x='訪客數', y='銷售額', 
                            color='轉換率',
                            title='銷售額vs訪客數（顏色表示轉換率）')
    st.plotly_chart(fig_scatter, use_container_width=True)

    st.subheader("月度統計")
    monthly_data = df.set_index('日期').resample('M').mean()
    fig_monthly = px.bar(monthly_data, x=monthly_data.index, y=['銷售額', '訪客數'],
                        title='月度平均銷售額和訪客數',
                        barmode='group')
    st.plotly_chart(fig_monthly, use_container_width=True)

# 使用Altair創建互動式圖表
st.subheader("互動式時間序列圖")
chart = alt.Chart(df).mark_line().encode(
    x='日期:T',
    y=alt.Y('銷售額:Q', scale=alt.Scale(zero=False)),
    tooltip=['日期', '銷售額', '訪客數', '轉換率']
).properties(
    width='container',
    height=400
).interactive()

st.altair_chart(chart, use_container_width=True)

# 數據統計摘要
st.subheader("數據統計摘要")
st.dataframe(df.describe())

# 原始數據表格（可排序和篩選）
st.subheader("原始數據")
st.dataframe(df)