数据大屏制作

数据大屏制作：从分组图表到三栏交付

小象实战讲义 · ECharts 数据可视化

前面的课程已经分别完成用户、商品和用户行为分析图表。本节把这些分散的结果组织成一个统一的大屏：先把同一分析维度的图表用 Page 组合成独立 HTML 页面，再用父页面和 iframe 将三个页面排成三栏。学完本节，你将能把一组 pyecharts 图表整理成结构清晰、可本地浏览的数据大屏。

💡 核心导读

• 按分析维度分组：用户、商品、行为各自拥有独立页面，避免把所有图表平铺在一张长页里。
• 用 Page 聚合同组图表：同一维度内由 pyecharts 自动排列，减少手写布局代码。
• 用 iframe 组装三栏：父页面只负责标题和三栏骨架，子页面继续负责各自图表。
• 本地资源与运行方式：图表库使用课程 assets/，页面通过本地 HTTP 服务访问，避免浏览器限制本地文件互相嵌入。

1. 大屏布局：先把信息分组

原项目的分析结果可以整理为三组：

这里有两个布局层：Page.SimplePageLayout 负责组内纵向排列；父页面的 Flex 布局负责把三个组页面横向排成三栏。两层的职责分开，后续替换某个图表时不需要改动整张大屏的骨架。

页面和地图等图表同样依赖浏览器端 ECharts 资源。本地运行时，先把 CurrentConfig.ONLINE_HOST 指向课程 assets/，再生成子页面。

2. 组合用户分析页

下面用小型确定性数据重建三张用户图，并保存为 page_user.html。代码块自包含，可直接运行。

import pandas as pd
from pyecharts import options as opts
from pyecharts.charts import Bar, Line, Page
from pyecharts.globals import CurrentConfig

CurrentConfig.ONLINE_HOST = "assets/"

dates = pd.date_range("2021-11-25", periods=7, freq="D").strftime("%m-%d").tolist()
daily_pv = [3200, 3650, 3900, 4300, 5200, 4800, 6100]
daily_pv_line = (
    Line()
    .add_xaxis(dates)
    .add_yaxis("日 PV", daily_pv, is_smooth=True)
    .set_global_opts(
        title_opts=opts.TitleOpts(title="用户日流量"),
        xaxis_opts=opts.AxisOpts(name="日期"),
        yaxis_opts=opts.AxisOpts(name="PV"),
    )
)

hours = [f"{hour:02d}:00" for hour in range(0, 24, 3)]
hourly_pv = [260, 180, 420, 760, 930, 880, 1120, 1020]
hourly_pv_line = (
    Line()
    .add_xaxis(hours)
    .add_yaxis("小时 PV", hourly_pv, is_smooth=True)
    .set_global_opts(title_opts=opts.TitleOpts(title="用户小时流量"))
)

category = ["0-10", "11-20", "21-30", "31-40", "41+"]
buy_hist = [420, 190, 95, 44, 18]
buy_hist_bar = (
    Bar()
    .add_xaxis(category)
    .add_yaxis("用户数", buy_hist, category_gap=0.2)
    .set_global_opts(title_opts=opts.TitleOpts(title="购买次数分布"))
)

page_user = Page(layout=Page.SimplePageLayout).add(daily_pv_line, hourly_pv_line, buy_hist_bar)
page_user.render("page_user.html")

3. 组合商品分析页

商品页使用两个饼图。类别饼图观察商品结构，商品饼图观察头部单品；两个图都关闭大面积图例，把信息集中到图形本身。

from pyecharts import options as opts
from pyecharts.charts import Page, Pie
from pyecharts.globals import CurrentConfig

CurrentConfig.ONLINE_HOST = "assets/"

category_data = [("服装", 38), ("食品", 25), ("数码", 18), ("家居", 12), ("其他", 7)]
top_category_pie = (
    Pie()
    .add("商品类别", category_data, radius=["35%", "65%"])
    .set_global_opts(
        title_opts=opts.TitleOpts(title="商品类别占比"),
        legend_opts=opts.LegendOpts(is_show=False),
    )
    .set_series_opts(label_opts=opts.LabelOpts(formatter="{d}%"))
)

item_data = [("商品A", 20), ("商品B", 17), ("商品C", 14), ("商品D", 11), ("其他", 38)]
top_item_pie = (
    Pie()
    .add("商品", item_data, radius=["35%", "65%"])
    .set_global_opts(
        title_opts=opts.TitleOpts(title="头部商品占比"),
        legend_opts=opts.LegendOpts(is_show=False),
    )
    .set_series_opts(label_opts=opts.LabelOpts(formatter="{d}%"))
)

page_product = Page(layout=Page.SimplePageLayout).add(top_category_pie, top_item_pie)
page_product.render("page_product.html")

4. 组合行为分析页

行为页由漏斗图和用户价值分层环图组成。漏斗用相对百分比展示行为衰减，分层环图用来观察不同客户群体的占比。

from pyecharts import options as opts
from pyecharts.charts import Funnel, Page, Pie
from pyecharts.globals import CurrentConfig

CurrentConfig.ONLINE_HOST = "assets/"

behavior_funnel = (
    Funnel()
    .add(
        "用户行为",
        [("点击", 100), ("收藏/加购", 7), ("支付", 1.5)],
        tooltip_opts=opts.TooltipOpts(trigger="item", formatter="{b}: {c}%"),
        label_opts=opts.LabelOpts(is_show=True, position="outside"),
    )
    .set_global_opts(
        title_opts=opts.TitleOpts(title="用户行为漏斗"),
        legend_opts=opts.LegendOpts(is_show=False),
    )
)

user_tags = [("重要价值客户", 18), ("重要发展客户", 27), ("重要保持客户", 21), ("重要挽留客户", 34)]
user_tag_pie = (
    Pie()
    .add(
        "用户价值",
        user_tags,
        radius=["30%", "68%"],
        label_opts=opts.LabelOpts(is_show=True, position="outside"),
    )
    .set_global_opts(
        title_opts=opts.TitleOpts(title="用户价值分层"),
        legend_opts=opts.LegendOpts(is_show=False),
    )
    .set_series_opts(tooltip_opts=opts.TooltipOpts(trigger="item", formatter="{b}: {d}%"))
)

page_behaviour = Page(layout=Page.SimplePageLayout).add(behavior_funnel, user_tag_pie)
page_behaviour.render("page_behaviour.html")

5. 用父页面组出三栏大屏

新建 dashboard.html，用 Flex 把三个子页面并排摆放。iframe 的 src 必须与三个子页面位于同一目录；示例用 CSS 的 border: 0 清除边框，避免使用 HTML5 已废弃的 frameborder 属性。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>电商用户行为数据可视化分析</title>
  <style>
    body { margin: 0; background: #f5f7fa; color: #1f2937; font-family: system-ui, sans-serif; }
    h1 { margin: 18px 24px; font-size: 24px; }
    .dashboard { display: flex; gap: 12px; padding: 0 16px 16px; min-height: 82vh; }
    .panel { flex: 1; min-width: 0; background: #fff; border: 1px solid #d9e1ec; border-radius: 8px; overflow: hidden; }
    iframe { display: block; width: 100%; height: 82vh; border: 0; }
  </style>
</head>
<body>
  <h1>电商用户行为数据可视化分析</h1>
  <div class="dashboard">
    <div class="panel"><iframe src="page_user.html" title="用户分析"></iframe></div>
    <div class="panel"><iframe src="page_product.html" title="商品分析"></iframe></div>
    <div class="panel"><iframe src="page_behaviour.html" title="用户行为分析"></iframe></div>
  </div>
</body>
</html>

直接用 file:// 打开通常能显示同目录的 iframe，但个别浏览器会限制本地文件的跨文档脚本访问或本地请求。用本地 HTTP 服务既能规避这类差异，也更接近真实部署：

python -m http.server 8000

然后访问 http://127.0.0.1:8000/dashboard.html。三个 iframe 用户、商品、行为页面会并排显示，内部图表交互仍保留。

📝 动手练一练

1. 布局练习：如果产品经理要求在窄屏上也保持可读性，你会如何修改 .dashboard 的 Flex 布局？请说明一个最小改法。
2. 内容取舍：如果大屏只保留六个图，你会删掉哪一个？请从“信息重复、屏幕空间、分析价值”三个角度说明理由，不要为了凑数删除关键转化信息。

本章小结

数据大屏的核心不是把更多图表塞进一页，而是先按分析问题分组，再让页面层级承担信息组织。Page 负责同一组图表，iframe 父页面负责跨组布局；本地资源、HTTP 服务和相对路径共同保证页面可以稳定打开。

📋 行动清单

• 用本地 http.server 打开 dashboard.html，确认三栏和图表交互正常。
• 修改任一子页的标题或数据，重新生成该页面并刷新父页面。
• 用浏览器窄屏模式检查一次三栏布局，记录需要进行媒体查询断点的位置。

—— 小象教研组