图表下钻本质是html承载点击元素并传递维度数据，由javascript处理逻辑；需用语义化data属性存值、addeventlistener绑定事件、统一url参数名并编码value，优先选用原生方案而非框架。
点击图表触发维度下钻，本质是事件绑定 + 数据传递
HTML 本身不处理“下钻逻辑”，它只负责承载可点击元素和传递上下文。真正的下钻动作由 JavaScript 完成，HTML 的任务是：让某个 <svg></svg>、<canvas></canvas> 或带 class 的 <div> 能被准确捕获点击，并把当前分析维度（比如 “华东”、“Q3”、“用户等级A”）作为参数传出去。
<p>常见错误现象：<code>onclick="drillDown(region)" 直接写死变量名，结果 region 未定义；或用 data- 属性存值但拼写错成 data-regin，JS 读出来是 null。
- 使用
data-dimension、data-value等语义化属性存维度标识，例如：<rect data-dimension="region" data-value="huadong"></rect> - 避免在 HTML 中写内联 JS 函数调用，统一用
addEventListener绑定，方便复用和调试 - 如果图表是 ECharts / AntV 渲染的，别手动给 SVG 元素加事件——应通过它们的
on('click', ...)API 拿数据，否则坐标/图例/tooltip 交互会冲突
图表点击后跳转详情页，URL 参数必须可预测可复用
“查看详情”通常意味着打开新页面或局部刷新，而 URL 是最稳定的数据载体。关键不是“怎么跳”，而是“跳过去时，接收方能不能无歧义还原当前下钻状态”。
使用场景：从“各城市销售额柱状图”点进“杭州” → 进入 /detail?dimension=city&value=hangzhou，而不是 /detail?id=123（id 没有业务含义，无法跨环境复现）。
- URL 参数名保持统一，如固定用
dimension和value，不混用type/key/filterBy - 对
value做 URI 编码：encodeURIComponent("华东-上海")，否则含中文或符号时路由解析失败 - 避免把整个数据对象 JSON.stringify 后塞进 URL——长度超限且不可读，也难被埋点系统识别
纯 HTML + 少量 JS 就能完成基础下钻，无需框架
很多团队一上来就引入 Vue Router 或 React Router，其实对于静态维度列表（如固定几个大区、年度、产品线），原生方案更轻、更可控、调试更直接。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
性能影响：一个 20 行的 document.querySelectorAll('[data-dimension]').forEach(...) 比启动一个框架级路由监听快一个数量级，尤其在低配设备上。
- 监听委托到父容器，减少事件绑定数量：
chartContainer.addEventListener('click', e => { if (e.target.matches('[data-dimension]')) { ... } }) - 用
location.assign()跳转，比window.open()更符合用户预期（不弹新窗口） - 如果要局部刷新（比如右侧面板更新），用
fetch()加innerHTML替换，注意过滤 XSS 风险内容，别直接插入服务端返回的 raw HTML
容易被忽略的兼容性细节：SVG 元素的事件冒泡和坐标偏移
当图表是 SVG 实现时，<rect></rect>、<circle></circle> 点击行为和普通 DOM 不完全一致。最常踩的坑是：点了图形却没触发事件，或者拿到的 clientX/clientY 相对于整个页面，不是相对于图表容器。
错误现象：e.target === e.currentTarget 在 SVG 中可能为 false，因为 <g></g> 包裹了图形，事件实际发生在 <g></g> 上，但你只给 <rect></rect> 设了 data- 属性。
- 给最外层
<svg></svg>或图表容器设cursor: pointer，并确保所有可点击子元素没有pointer-events: none - 用
e.target.closest('[data-dimension]')替代e.target，兼容嵌套结构 - 需要坐标时，用
svgElement.getBoundingClientRect()计算偏移，再减去e.clientX，别依赖e.offsetX（Firefox 不支持）
north_china，后台接口要求 area=northchina，前端再写成 data-value="North China"——三个地方不统一对不上，排查起来全靠猜。
