数据可视化基本流程

数据可视化流程

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

欢迎来到《ECharts 数据可视化：从交互图表到数据大屏》的第二章第四节。在掌握了Python和pandas数据分析技能后，如何将分析结果转化为直观、有效且美观的Web图表或数据大屏，是数据价值传递的关键一步。本节将系统性地讲解数据可视化的核心流程，帮助你从拿到数据开始，一步步规划、设计并实现一个成功的可视化作品，告别“拿到数据就画图”的盲目尝试。

💡 核心导读

• 数据与图形的映射：理解可视化本质是将数据空间映射到图形空间的过程。
• 可视化设计流程：掌握从分析数据、匹配图形、优化图形到检查测试的四步标准流程。
• 以问题为导向：明确可视化始于一个清晰的问题或需求，而非数据本身。
• 案例驱动理解：通过一个“全国漏洞监测数据可视化”的案例，串联整个流程。
• 工具与设计的结合：学会利用成熟的图表库（如ECharts/pyecharts）并结合设计原则，高效实现可视化。

一、数据与图形：可视化的本质映射

数据可视化的核心，是建立数据空间与图形空间之间的映射关系。

• 数据空间：指我们所要分析和展示的原始世界，通常表现为结构化的数据表、数据库记录等，也称为“原始数据”或“粗数据”。
• 图形空间：指我们为了更直观地感知和理解数据，而构建的视觉世界，由点、线、面、颜色、大小等视觉元素构成。

这个过程可以概括为以下路径：

1. 获取原始数据：从数据库、文件或API等来源获取未经加工的原始数据。
2. 数据预处理与分析：对原始数据进行清洗、过滤、聚合等操作，提炼出我们真正关注的核心数据。
3. 设计映射规则：这是可视化设计的核心。我们需要决定如何将数据维度映射到图形属性上。例如，将“时间”映射到X轴，将“销售额”映射到Y轴；将“产品类别”映射为不同颜色；将“销量大小”映射为柱状图的高度。
4. 生成几何图形与图像：根据映射规则，利用可视化工具（如ECharts）将数据转换为具体的几何图形（如矩形、圆形、折线），并最终渲染成用户可交互的图像。

这个映射过程，实质上是一个信息抽象的过程。而用户阅读图表，则是一个认知理解的过程。可视化正是连接现实世界（数据）与抽象认知（理解）的桥梁。

二、可视化设计流程：四步法

一个系统化的流程能让可视化工作事半功倍。一个完整的可视化设计流程通常包含以下四个步骤：

1. 分析数据

在明确需求（要解决什么问题，讲什么故事，受众是谁）的基础上，深入理解你要展示的数据。

• 元数据：数据的基本信息，如字段名、数据类型。
• 数据维度：数据包含哪些维度（如时间、地区、类别）和度量（如数量、金额）。
• 数据关系与规律：维度之间是否存在关联？数据是否存在周期性、趋势或异常值？
• 查看视角：用户需要从宏观整体还是微观细节来观察数据？

案例思考：假设要为政府机构展示全国各行业漏洞的分布。我们需要分析的数据维度可能包括：地理位置（省/市）、漏洞数量、时间、漏洞类别、漏洞级别。视觉元素需要考虑：用何种形状（点？柱？）、色彩（区分级别）、尺寸（代表数量）、位置（地理坐标）。

2. 匹配图形

根据上一步的数据分析结果，选择合适的图表类型来承载信息。

• 经验与借鉴：这部分依赖于对常见图表适用场景的了解。例如，展示地域分布用地图，展示占比用饼图/环形图，展示趋势用折线图，展示排名用柱状图/条形图。
• 利用成熟工具：幸运的是，像ECharts/pyecharts这样的库已经封装了丰富的图表类型，我们可以直接调用，快速尝试多种图形，找到最合适的那一个。

案例匹配：针对漏洞监测案例，我们可能匹配以下图形： - 中国地图：展示漏洞在全国的地理分布。 - 散点图（在地图上）：用点的大小和颜色表示不同地区、不同级别漏洞的数量。 - 折线图/面积图：展示各行业漏洞数量随时间的变化趋势。 - 饼图/环形图：展示漏洞级别的构成比例。 - Top N 柱状图：展示漏洞数量最多的几个行业或地区。

3. 优化图形

匹配图形后，需要根据展示平台和用户体验进行细节优化。

• 平台适配：图表是用于Web报告、移动端H5还是数据大屏？大屏展示需考虑深色背景、远距离观看的字体大小、色彩对比度以及整体的视觉冲击力。
• 风格确定：确定整体的视觉风格，是科技蓝、安全绿还是其他主题色？
• 信息架构与交互：当维度较多时，需要设计清晰的导航和信息层级。是否添加下钻、筛选、悬停提示等交互功能？
• 持续调整：将数据绘制到图形上后，需要不断调整视觉映射的参数（如颜色区间、图形大小范围），直到信息呈现清晰、合理。这一步往往最耗时。

4. 检查测试

在最终交付前，必须进行验证。

• 是否满足需求：最终的可视化结果是否回答了最初提出的业务问题？
• 是否方便阅读：图表是否清晰、无歧义？图例、坐标轴标签是否易懂？
• 用户能否快速理解：目标用户能否在短时间内获取核心信息？交互是否流畅自然？

三、实战流程演练：漏洞监测数据可视化案例

让我们通过一个简化的模拟案例，来实践上述流程。假设我们有一份经过处理的漏洞监测数据摘要。

第一步：分析数据与需求 需求：宏观展示近期漏洞事件在全国的分布概况，并了解主要漏洞类型。 数据摘要：我们关注 省份、漏洞数量、主要漏洞类型 三个维度。

第二步：匹配图形 选择 中国地图 作为主视图，用 散点图（视觉映射点）的形式在地图上展示各省数据。

• 映射规则：省份 -> 地图上的区域；漏洞数量 -> 点的大小与颜色深浅。

第三步：实现与优化（使用pyecharts 2.1.0） 下面我们用代码来实现这个映射。注意，pyecharts 2.1.0 使用 ECharts 6 的资源，其内置的china地图使用完整的省份名称（如“广东省”、“北京市”）。

# 导入必要库
from pyecharts import options as opts
from pyecharts.charts import Geo
from pyecharts.globals import ChartType, SymbolType
import pandas as pd

# 1. 模拟核心数据（硬编码，保证可复现）
# 数据格式：省份名称（需与地图文件一致）、漏洞数量、主要漏洞类型（用数字1,2,3模拟）
vuln_data = [
    ["广东省", 150, 1],
    ["北京市", 95, 2],
    ["上海市", 120, 3],
    ["浙江省", 80, 1],
    ["江苏省", 110, 2],
    ["四川省", 60, 3],
    ["陕西省", 45, 1],
]
df = pd.DataFrame(vuln_data, columns=["province", "count", "type"])

# 2. 创建Geo地理坐标系图表
geo = Geo(init_opts=opts.InitOpts(width="800px", height="600px", theme="dark"))
# 添加地图类型，使用'china'
geo.add_schema(maptype="china")

# 3. 添加散点系列，类型为 ChartType.EFFECT_SCATTER（带有涟漪特效的散点图）
# 数据对格式: (省份名称, 数值)
data_pairs = list(zip(df["province"], df["count"]))
geo.add(
    series_name="漏洞数量",
    data_pair=data_pairs,
    type_=ChartType.EFFECT_SCATTER,
    # 符号大小通过数值映射，scale_factor用于调整整体大小比例
    symbol_size=10,
    label_opts=opts.LabelOpts(is_show=False), # 默认不显示标签，避免重叠
    effect_opts=opts.EffectOpts(scale=3, period=4), # 涟漪特效配置
    # 使用两个视觉映射组件，把同一 count 维度分别映射到点的大小和颜色
).set_series_opts().set_global_opts(
    title_opts=opts.TitleOpts(title="全国漏洞监测分布（模拟数据）"),
    visualmap_opts=[
        # VisualMap 1: 连续型映射，控制点的大小 (对应'漏洞数量')
        opts.VisualMapOpts(
            type_="size", # 映射到图形大小
            min_=df["count"].min(),
            max_=df["count"].max(),
            range_size=[10, 40], # 大小范围
            is_calculable=True,
            pos_left="10%",
            pos_bottom="10%",
        ),
        # VisualMap 2: 连续型映射，控制点的颜色 (同样对应'漏洞数量')
        opts.VisualMapOpts(
            type_="color", # 映射到颜色
            min_=df["count"].min(),
            max_=df["count"].max(),
            is_calculable=True,
            range_color=["#5470c6", "#91cc75", "#fac858"], # 数量由低到高的颜色
            pos_left="10%",
            pos_bottom="30%",
        )
    ]
)

# 4. 生成HTML（不打印完整内容，仅验证配置）
html_content = geo.render_embed()
print(f"图表类型: {type(geo).__name__}")
print(f"数据点数量: {len(data_pairs)}")
print("视觉映射组件数量: 2 (均基于漏洞数量，分别控制大小和颜色)")
print(f"地图类型: china")
# 注意：不打印完整的html_content，因其包含随机chart_id

图表类型: Geo
数据点数量: 7
视觉映射组件数量: 2 (均基于漏洞数量，分别控制大小和颜色)
地图类型: china

代码解读与优化点：

• 数据映射：我们通过两个VisualMapOpts组件，把df["count"]分别映射为点的大小和颜色深浅，让“哪里漏洞多”在位置、尺寸和颜色上都更突出。
• 大屏适配：初始化时设置了theme=“dark”和较大的画布尺寸，更适合深色背景的数据大屏环境。
• 交互与美观：使用了EFFECT_SCATTER图表类型并配置了涟漪动画，增强了视觉吸引力和交互感。

第四步：检查测试（思维层面）

• 需求满足度：地图直观展示了漏洞数量的地域分布，点越大、颜色越醒目，表示该地区漏洞越多。
• 可读性：通过图例（visualMap）明确了大小和颜色的含义。若还想用颜色区分漏洞类型，应把类型维度写进每个数据项，并在 visualMap 中指定对应 dimension；当前示例没有做这一步。
• 用户理解：观众能快速定位到漏洞高发区域，并对其主要类型有初步认知。如需细节，可进一步添加TooltipOpts（提示框组件）来展示省份、具体数量和类型的详细信息。

📝 动手练一练

1. 流程复述与实践：假设你有一份销售数据，包含月份、产品线、销售额三个字段。你的目标是向管理层展示各产品线全年的销售趋势及贡献占比。请简述你将遵循的四步可视化流程，并为每一步列出至少一项关键任务。
2. 映射规则设计：针对上述销售数据，如果你决定用一个组合图表来展示（例如折线图+柱状图），请设计你的数据映射规则。即，说明每个数据维度将被映射到组合图表的哪个视觉属性上。

本章小结

本节系统阐述了数据可视化的核心流程，它远不止是调用一个绘图API那么简单。成功的可视化始于一个明确的问题，经过严谨的数据分析，通过合理的映射规则将数据转化为图形，并最终通过优化与测试确保信息传递的有效性。

📋 行动清单

• 建立流程意识：在开始下一个可视化项目前，先在纸上或脑中过一遍“分析-匹配-优化-检查”四步法。
• 练习映射设计：拿到一组数据后，尝试用文字描述你打算将每个数据维度映射到图表的哪个视觉属性（X轴、Y轴、颜色、大小等）。
• 探索一种新图表：在ECharts官网示例中，找一个你从未使用过的、适合展示“关系”或“分布”的图表类型，理解其数据格式和适用场景。

—— 小象教研组