案例笔记

全球淡水资源分布的饼图选型

淡水的总占比只有 2.5%，但其内部冰川占 68.7%、地下水 30.1%、地表水不到 1%。这种"大类很小、小类还要再分"的结构，普通饼图很难看。

试了三种方案：

1. 单层饼图：海水/淡水 + 淡水细分混在一个圈里 → 视觉割裂
2. 矩形树图（treemap）：信息量足，但小份额方块小到点不到
3. 嵌套环图（双层 pie，内层总占比 + 外层淡水细分）→ 选用

嵌套环图的好处是把"主关系（海水 vs 淡水）"和"次关系（淡水内部）"分两层呈现，读者一眼能看到 97.5% 是海水，再仔细看时能看到淡水内部的悬殊比例。

中国人口年龄结构的横向柱图

人口金字塔本质是把两组同维度的柱图反向背靠背摆放。一开始我用了两个独立柱图拼接，结果发现 yAxis 对齐麻烦、tooltip 不联动。

ECharts 的 stack + 负值方案优雅很多：

series: [
  { name: '男性', type: 'bar', stack: 'pop', data: male.map(v => -v) },
  { name: '女性', type: 'bar', stack: 'pop', data: female },
]
xAxis: { type: 'value', axisLabel: { formatter: v => Math.abs(v) } }

关键是男性数据取负值放左侧，xAxis 显示时用 Math.abs 隐藏负号。这样一来 tooltip 也能同时显示两侧的值。

降雨量时序图的色彩感选择

蓝色是降雨的直觉色，但单纯渐变会让"少雨"和"无数据"难区分。最终方案：

• 折线本体：饱和蓝 #2b6cb0，2px 实线
• 背景填充：浅蓝 rgba(43,108,176,0.12)
• 缺失数据：灰色虚线断开，避免插值误导
• 均值参考线：用对比色（橘红）虚线标记，方便看异常年份

永远区分"无数据"和"零值"。降雨量为零是真实信息（极旱），数据缺失是另一回事。

省级人口密度的地图分级

中国各省人口密度从西藏的 3 人/km² 到澳门的 21100 人/km²，跨四个数量级。线性分级会让东南沿海全部一种深色、西部全部一种浅色，中间梯度看不出来。

对数分级解决了这个问题。简单做法是直接用 xAxis.type: 'log'（如果是地图就用 visualMap 的 pieces 自定义区间），把 0-50 / 50-100 / 100-300 / 300-1000 / 1000+ 分成几档。

另外学到一点：地图配色避免红绿，色觉障碍人群读不出差异。用蓝色单色阶（浅 → 深）最稳。

无障碍配色：色觉障碍下的图表

约 8% 的男性有某种色觉障碍，其中最常见是红绿色弱（约占 5%）。这意味着传统的"红涨绿跌"对一部分读者无效。

ColorBrewer 的几套对色觉障碍友好的配色我已经写进个人模板：

• 顺序数据（如人口密度）：单色阶 #eff6ff → #1e3a8a
• 分类数据（≤5 类）：蓝/橙/紫/青/棕，避免红绿同用
• 发散数据（如增长率）：蓝-灰-橙，而不是红-白-绿

把作品集里的图都重新过了一遍，主要替换是把 #22c55e（亮绿）换成 #2f855a（深绿），把 #ef4444（亮红）换成 #c05621（暖橙）。视觉强度降低了一点，但对色觉障碍用户友好得多。

把"宽表"清洗成"长表"再画图

国家统计局下载下来的人口表通常是宽表 —— 每年一列，每个省一行。直接画图很难处理，要么循环每年画一次，要么自己手工组装数据数组。

正确做法：先用 pandas melt 转成长表：

df_long = df_wide.melt(
    id_vars=['province'],
    var_name='year',
    value_name='population',
)

长表的每行是一个最小观测单元（一省一年），画图代码立刻通用 —— 加 groupby、过滤、聚合都不用改图表代码。

Tidy data 是 Hadley Wickham 的概念，本质就是"一个观测一行，一个变量一列"。值得花一次时间彻底搞清楚。