pyecharts初体验

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

欢迎来到第一章的最后一节。通过前面的学习，你已经搭建好了环境，并回顾了pandas数据处理的基础。本节我们将正式迈入ECharts与pyecharts的世界，通过一个简单的柱状图案例，直观感受如何将数据分析结果转化为可交互的Web图表，体验数据可视化的魅力。

💡 核心导读

• ECharts是什么：一个基于JavaScript的开源、功能强大的商业级数据可视化图表库。
• 为什么选择pyecharts：它是Python与ECharts的桥梁，让你能用熟悉的Python语法轻松生成复杂的Web图表，避免了直接使用JavaScript的复杂性。
• 核心体验：通过一个对比两家商家商品销售情况的柱状图，快速上手pyecharts的基本使用流程。
• 关键特性：生成的图表具有丰富的交互性，如悬停查看数据详情、点击图例切换系列显示等。

一、ECharts：强大的Web图表库

在开始编写代码之前，我们先来了解一下我们即将使用的核心工具——ECharts。

ECharts，全称 Enterprise Charts，是百度开源的一个基于 JavaScript 的数据可视化图表库。它被设计为“商业级”，意味着其图表在美观度、交互性和性能上都达到了很高的标准，足以支撑企业级的应用需求。

它具有以下几个突出特点：

1. 开源免费：你可以自由地使用它进行任何类型的开发，包括商业项目，没有任何限制。
2. 图表种类极其丰富：从最基础的柱状图、折线图、饼图，到复杂的地图、关系图、3D图表、仪表盘等，几乎涵盖了所有常见的数据可视化场景。
3. 使用（相对）简单：这里的“简单”是相对于另一个著名的JavaScript可视化库D3.js而言的。D3.js非常灵活，但需要从底层“造轮子”；而ECharts提供了大量封装好的“零件”，你只需关注数据和业务逻辑，就能快速搭建出精美的图表。
4. 兼容性优秀：它能在PC和移动设备上的各种主流浏览器中流畅运行。

二、pyecharts：Python与ECharts的桥梁

对于已经掌握Python和pandas的数据分析者来说，直接学习JavaScript来使用ECharts存在一定的门槛。这时，pyecharts 应运而生。

pyecharts 是一个将 Python 与 ECharts 结合起来的强大数据可视化工具。它允许你使用纯 Python 代码来生成 ECharts 图表，底层会自动将其转换为对应的 JavaScript/HTML 代码。这样，你既能享受 ECharts 强大的可视化能力，又能继续在熟悉的 Python 生态中进行开发，极大地提高了效率。

简单来说：你用Python写配置，pyecharts帮你生成可在网页中交互的ECharts图表。

三、第一个pyecharts图表：销售对比柱状图

现在，让我们通过一个具体的例子，快速体验pyecharts的工作流程。我们将创建一个柱状图，对比两家商家（商家A和商家B）在不同商品上的销售情况。

1. 准备数据与导入库

首先，我们需要导入必要的模块，并定义我们的数据。数据通常来源于你的pandas DataFrame分析结果，这里为了演示，我们直接使用硬编码的列表。

# 导入必要的库
from pyecharts.charts import Bar
from pyecharts import options as opts

# 定义数据
# X轴数据：商品类别
x_data = ['衬衣', '毛衣', '领带', '风衣', '高跟鞋', '袜子']
# Y轴数据：商家A和商家B的销售额
y_data_a = [114, 55, 27, 101, 125, 27]
y_data_b = [57, 134, 137, 129, 145, 60]

2. 构建图表对象

接下来，我们使用链式调用的方式构建一个柱状图对象。这是pyecharts 2.x版本推荐的方式，代码非常清晰直观。

from pyecharts.charts import Bar
from pyecharts import options as opts

x_data = ['衬衣', '毛衣', '领带', '风衣', '高跟鞋', '袜子']
y_data_a = [114, 55, 27, 101, 125, 27]
y_data_b = [57, 134, 137, 129, 145, 60]

bar_chart = (
    Bar()  # 初始化一个柱状图实例
    .add_xaxis(x_data)  # 设置X轴数据
    .add_yaxis("商家A", y_data_a)  # 添加"商家A"数据系列
    .add_yaxis("商家B", y_data_b)  # 添加"商家B"数据系列
    .set_global_opts(  # 设置全局配置项
        title_opts=opts.TitleOpts(title="某商场销售情况对比")  # 设置图表标题
    )
)

# 打印图表类型和基本数据信息进行验证
print(f"图表类型: {type(bar_chart).__name__}")
print(f"X轴数据项: {x_data}")
print(f"数据系列名称: {['商家A', '商家B']}")

图表类型: Bar
X轴数据项: ['衬衣', '毛衣', '领带', '风衣', '高跟鞋', '袜子']
数据系列名称: ['商家A', '商家B']

3. 生成与查看图表

图表对象构建完成后，我们可以将其渲染为 HTML 文件。图表数据和配置会写入文件，浏览器端 ECharts 脚本则由 CurrentConfig.ONLINE_HOST 指定。

# 将图表渲染为HTML文件，默认保存在当前目录下
from pyecharts.charts import Bar
from pyecharts import options as opts
from pyecharts.globals import CurrentConfig

CurrentConfig.ONLINE_HOST = "assets/"

# 重新定义数据（确保代码块自包含）
x_data = ['衬衣', '毛衣', '领带', '风衣', '高跟鞋', '袜子']
y_data_a = [114, 55, 27, 101, 125, 27]
y_data_b = [57, 134, 137, 129, 145, 60]

bar_chart = (
    Bar()
    .add_xaxis(x_data)
    .add_yaxis("商家A", y_data_a)
    .add_yaxis("商家B", y_data_b)
    .set_global_opts(title_opts=opts.TitleOpts(title="某商场销售情况对比"))
)

bar_chart.render('first_bar_chart.html')
print("图表已生成: first_bar_chart.html")

图表已生成: first_bar_chart.html

运行上述代码后，你会在当前工作目录下找到一个名为 first_bar_chart.html 的文件。用浏览器打开它，你将看到一个完整的、可交互的柱状图。

4. 交互效果解读

打开生成的HTML文件，你可以体验到ECharts图表的核心交互特性：

• 数据悬停提示（Tooltip）：将鼠标光标移动到任意一个柱子上（例如“商家A”的“衬衣”），会立刻弹出一个提示框，清晰显示“商家A，衬衣，114”这样的详细信息。这让你无需查看坐标轴刻度就能精确获取数据点数值。
• 图例开关（Legend）：图表顶部居中位置有“商家A”和“商家B”两个图例。尝试点击“商家A”，你会发现图表中所有代表商家A的柱子会以动画形式隐藏起来，图表中只留下商家B的数据。再次点击“商家A”，柱子又会显示出来。这个功能非常利于在数据对比时聚焦于某个特定的系列。

这些交互是ECharts内置的默认功能，无需我们编写额外的代码。通过这个简单的例子，你已经成功地将一组Python列表数据，转化为了一个可在网页中动态交互的专业级数据图表。

📝 动手练一练

1. 把 y_data_b 中“毛衣”的销量从 134 改成 150，重新运行图表；说明图表数据与 Python 列表中的哪一个位置发生了变化。

本章小结

至此，我们完成了第一章的全部学习。我们从课程的整体介绍开始，完成了Python数据分析与可视化环境的搭建，回顾了pandas中Series和DataFrame这两个核心数据结构的使用方法，并最终通过pyecharts成功创建了第一个交互式图表，直观感受到了数据可视化的力量。

📋 行动清单

在进入下一章系统学习可视化概念之前，请确保你已完成以下实践：

• 在本地环境中成功运行了本节“销售对比柱状图”的示例代码。
• 用浏览器打开生成的 first_bar_chart.html 文件，亲手体验了鼠标悬停提示和点击图例切换的交互效果。
• 尝试修改代码中的数据（例如y_data_a中的数值），重新运行并观察图表的变化。

在下一章，我们将暂时放下代码，深入探讨数据可视化的核心概念、目标、流程与设计原则，为后续制作更复杂、更专业的图表打下坚实的理论基础。

—— 小象教研组