真正可复用的SVG图表组件必须封装数据映射、坐标计算、交互响应和响应式缩放，采用viewBox定义逻辑画布、内部完成坐标系反转、委托事件绑定、使用currentColor继承主题色。
直接在HTML里写一堆<svg>标签堆出图表，短期能跑，长期维护会卡死——真正可复用的SVG图表组件，必须把数据映射、坐标计算、交互响应和响应式缩放全封装进独立单元里，而不是靠复制粘贴改y值。
用viewBox替代width/height控制缩放
硬写width="800" height="600"会导致图表在小屏上溢出或被裁剪，且无法响应字体大小变化。所有可复用的SVG图表容器必须设viewBox，比如viewBox="0 0 800 600"，再用CSS控制外层容器宽高（如max-width: 100%; height: auto）。
-
viewBox定义的是“逻辑画布”，不是像素尺寸；它让SVG内部坐标系与外部布局解耦 - 删掉
width和height属性，否则会覆盖viewBox的缩放行为 - 如果图表内文字要随父元素
font-size缩放，所有<text>的font-size得用em或rem，不能写死px - 没设
viewBox时，transform: scale()会拉伸描边和文字，而viewBox缩放保持线宽和字号比例一致
坐标系反转必须在组件内完成，别甩给调用方
SVG原点在左上角，但柱状图/折线图的数据越大越要“往上长”。这个转换逻辑不能让使用者自己算y = height - value，必须封装进组件内部。
- 组件接收原始数据数组，内部统一做归一化：先求
maxValue，再用y = height * (1 - value / maxValue)生成<rect>的y属性 - 如果传入的是带单位的数据（如
{ sales: "120万" }），组件应拒绝解析，只接受数值型字段 - Y轴刻度标签的
<text>位置也要同步反转，否则数字和柱子错位 - 漏掉反转 → 图表倒着长；反转写在父组件里 → 每次复用都要重复写同一段计算，违背封装初衷
交互事件绑定必须用委托或合成事件，避免内存泄漏
每个<rect>或<circle>都绑onclick，数据量大时DOM监听器暴增，React/Vue更新后旧监听器残留，滚动或切换页面时容易卡顿。
立即学习“前端免费学习笔记（深入）”；
- 推荐在
<svg>根节点上用addEventListener('click', handler)捕获，再用event.target判断是否为图形元素 - 若用D3，必须配
.merge()，否则enter().append()新增的节点不会响应后续update()阶段的动画或样式变更 - tooltip显示不能只靠
title属性——移动端不触发、样式不可控、无法加单位或图标；要用<div id="tooltip">绝对定位，且mouseout需加setTimeout防闪退 - 鼠标快速划过多个柱子时，
mouseout可能晚于下一个mouseover，导致tooltip残留；需记录上一个hover目标并清理
颜色和主题适配靠currentColor，别写死十六进制
写fill="#3498db"等于锁死主题色，换暗黑模式或品牌色就得全局搜索替换。真正的组件化图表必须继承父级文本色。
- 所有图形元素（
<rect>、<path>、<text>）默认设fill="currentColor"，这样color: var(--primary)就能一键换色 - stroke同理，用
stroke="currentColor"而非stroke="#000" - 如果某条线需要固定灰度（如坐标轴），显式写
stroke="#999"，但必须注释说明“此为语义中性色，不响应主题” - 导出的SVG文件常含
fill="#000000"，内联前务必手动替换成currentColor，否则主题切换失效
最难的不是画出第一个柱子，而是当数据从10条变成1000条、屏幕从桌面切到折叠屏、主题从亮色切到暗色时，图表仍保持坐标对齐、文字清晰、交互稳定——这些细节没有通用库能全自动处理，只能靠组件内部把viewBox、坐标反转、事件委托和currentColor四件事钉死。
