前哨站/零基础起步
零基础起步

零基础起步

假设你没画过数据图。5 个关卡从"装环境"到"做出一张能汇报的图"。

这是给谁的

第一次做数据可视化、连 Excel 透视表都不熟的同学。走完这 5 关，你就能独立完成课程作业。

  • 装好 Python 环境并解决中文显示
  • 能用 Excel 透视表把数据聚起来并出一张图
  • 能用 matplotlib 画出折线/柱状/散点图
  • 能用 ECharts 把图放进网页
  • 知道一张"能汇报"的图要改哪几处
关卡目录
  1. 第 0 关 准备工具（10 分钟）
  2. 第 1 关 把数据聚起来（15 分钟）
  3. 第 2 关 画出第一张图（15 分钟）
  4. 第 3 关 把图放进网页（15 分钟）
  5. 第 4 关 让图"能汇报"（10 分钟）

第 0 关 · 准备工具（10 分钟）

目标把接下来要用的三种工具准备好：Excel、Python、浏览器。
前提：一台装好 Windows/macOS 的电脑

1确认 Excel / WPS 可用

🎯 课程第 6 章要用透视表与条件格式，任意版本均可。

SHELL
打开 Excel → 插入 → 数据透视表（能看到这个按钮就行）
👀 你应该看到
弹出"创建数据透视表"对话框

能看到对话框就说明功能可用。

⚠️ 如果报错
  • 找不到数据透视表
    → WPS 在"数据"选项卡里；Excel 在"插入"选项卡最左侧。

2安装 Python 与绘图库

🎯 用 pip 一次装齐。

SHELL
python -m pip install -U pandas matplotlib seaborn pyecharts
python -c "import matplotlib; print(matplotlib.__version__)"
👀 你应该看到
3.8.0（或更高版本号）

能打印版本号就装好了。

⚠️ 如果报错
  • pip 不是内部命令
    → Python 安装时没勾选 Add to PATH，重装或手动加环境变量。
  • 下载很慢
    → 加国内镜像：pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pandas matplotlib。
✅ 过关标准Excel 能开透视表、python 能打印 matplotlib 版本。

第 1 关 · 把数据聚起来（15 分钟）

目标画图前必须先聚合——这一步不做，后面全是白费。
前提：第 0 关通过

1用透视表算"各省销售额"

🎯 把省份拖到行、销售额拖到值。

SHELL
插入 → 数据透视表 → 行:省份 / 值:销售额(求和)
再点"值字段设置"→ 数字格式 → 保留 0 位小数
👀 你应该看到
一张"省份 / 销售额"两列的表，约 20~30 行

这就是可以拿去画图的数据。

⚠️ 如果报错
  • 数值全变成计数
    → 拖进"值"的字段被识别成文本，检查该列是否混入了空格或单位字符。

2排序并取 Top10

🎯 排名类图表一定要先排序。

SHELL
在透视表里对"销售额"列 → 排序 → 降序；再用"值筛选 → 前 10 项"
👀 你应该看到
按销售额从高到低的前 10 个省份

排序后再画图，读者一眼看出排名。

✅ 过关标准能得到一张排好序的省份销售表。

第 2 关 · 画出第一张图（15 分钟）

目标用 matplotlib 画一张可直接放进作业的柱状图。
前提：第 1 关通过

1解决中文显示

🎯 先写这两行，否则标题是方块。

SHELL
import matplotlib
matplotlib.rcParams["font.sans-serif"] = ["SimHei"]
matplotlib.rcParams["axes.unicode_minus"] = False
👀 你应该看到
（无输出即成功）

Linux 需先安装字体；macOS 可改用 PingFang SC。

⚠️ 如果报错
  • 还是方块
    → 字体名写错或系统没装该字体，用 matplotlib.font_manager 查看可用字体。

2画柱状图并保存

🎯 标题写结论，y 轴从 0 开始。

SHELL
import pandas as pd, matplotlib.pyplot as plt
df = pd.read_csv("sales.csv").sort_values("sales", ascending=False).head(10)
fig, ax = plt.subplots(figsize=(8, 4), dpi=120)
ax.bar(df["province"], df["sales"], color="#4E7CFF")
ax.set_title("广东销售额居首，前 10 省占全国 68%")
ax.set_ylabel("销售额（万元）")
ax.grid(axis="y", linestyle="--", alpha=0.3); ax.set_axisbelow(True)
plt.tight_layout(); plt.savefig("top10.png", bbox_inches="tight")
👀 你应该看到
生成 top10.png，10 根柱子按高到低排列

打开图片确认：标题是结论、中文正常、没有多余网格。

⚠️ 如果报错
  • FileNotFoundError: sales.csv
    → 当前工作目录不对，用绝对路径或在文件所在目录运行。
✅ 过关标准能产出一张标题为结论、中文正常的柱状图。

第 3 关 · 把图放进网页（15 分钟）

目标用 ECharts 做一张可以交互的图（悬停有提示、窗口自适应）。
前提：第 2 关通过

1下载 echarts 并写页面

🎯 离线场景把 echarts.min.js 放本地。

SHELL
<!DOCTYPE html><html><head><meta charset="utf-8">
<script src="echarts.min.js"></script>
<style>#main{width:800px;height:420px}</style></head>
<body><div id="main"></div><script>
const c = echarts.init(document.getElementById('main'));
c.setOption({
  title:{text:'各省销售额'},
  tooltip:{trigger:'axis'},
  xAxis:{type:'category',data:['广东','江苏','山东']},
  yAxis:{type:'value'},
  series:[{type:'bar',data:[820,610,540]}]
});
window.addEventListener('resize',()=>c.resize());
</script></body></html>
👀 你应该看到
浏览器打开后看到柱状图，鼠标悬停出现数值提示

白屏先看 F12 控制台是否有报错。

⚠️ 如果报错
  • 白屏无图
    → ① 容器没有宽高；② echarts.min.js 路径不对；③ option 语法错误（少逗号）。
✅ 过关标准网页里能看到可交互的柱状图。

第 4 关 · 让图"能汇报"（10 分钟）

目标掌握"减法"四件事，图立刻上一个档次。
前提：第 3 关通过

1四步改造

🎯 对比改造前后，体会差异。

SHELL
① 标题：把"各省销售额"改成结论（"广东居首，前10省占68%"）
② 坐标轴：y 轴从 0 开始，刻度改成 4~6 个
③ 减法：删掉图例框线、多余网格、3D 与阴影
④ 标注：把最高点/异常点加一个文字标注
👀 你应该看到
同一份数据，改造后的图一眼就能读出结论

这就是"数据墨水比"的实际应用。

✅ 过关标准能说出改造前那张图具体差在哪里。

常见报错速查

报错关键字原因怎么解决
中文显示为方块matplotlib 未设置中文字体rcParams["font.sans-serif"]=["SimHei"]
负号显示为方块未关闭 unicode_minusrcParams["axes.unicode_minus"]=False
ModuleNotFoundError: pandas未安装依赖pip install pandas matplotlib seaborn
ECharts 图表空白容器无宽高或脚本未加载给 div 设置 width/height；检查 echarts.min.js 路径
echarts is not defined引库失败或顺序错误确保 <script src> 在初始化代码之前
Excel 折线图"回勾"x 轴被当作文本类别把 x 轴类型改为日期轴并重新排序
透视表数值变成计数字段被识别为文本清理空格/单位字符，或改成数值格式
图片保存后被裁切未使用 tight 布局plt.savefig(..., bbox_inches="tight")

完成自检

  • ☐ 能独立用透视表做一次分组汇总
  • ☐ 能画折线、柱状、散点三种基础图
  • ☐ 知道 y 轴什么时候必须从 0 开始
  • ☐ 能把 ECharts 图放进网页并自适应
  • ☐ 能按"准确→有效→美观"检查自己的图
← 返回前哨站继续 →知识地图