用 <canvas></canvas> 还是 <svg></svg>？先看渲染需求
HTML 本身不带图表能力，所有“嵌入图表”本质是用 JS 库在容器里画图。选 <canvas></canvas> 还是 <svg></svg> 容器，直接决定后续库是否能用、交互是否灵活、缩放是否清晰。
常见错误现象：Chart.js 图表在高分屏模糊、D3 点击事件绑不上、Plotly 导出 PDF 失败——八成是容器类型和库默认渲染模式不匹配。
-
<canvas></canvas>：适合数据量大（万级点）、动画频繁（如实时折线）、对像素控制强的场景；但 DOM 事件难绑定，缩放会失真，打印/导出需额外处理 -
<svg></svg>：适合需要点击/悬停交互、响应式缩放、SEO 可读性、导出矢量图（PDF/SVG）的图表；但节点过多时（>5000 元素）性能明显下降 - 多数现代库（
Chart.js、ApexCharts）默认用<canvas></canvas>；D3和Plotly默认用<svg></svg>，但Plotly可通过config.displayModeBar = false强制切回<canvas></canvas>
Chart.js 初始化失败：检查 <canvas></canvas> 的 DOM 就绪时机
Chart.js 要求目标 <canvas></canvas> 元素在调用 new Chart() 时已存在于 DOM 中，且宽高不能为 0。很多“白屏”或 “Cannot read property 'getContext' of null” 错误都卡在这步。
使用场景：Vue/React 动态渲染图表、Tab 切换后首次加载、用 display: none 隐藏的容器里初始化。
立即学习“前端免费学习笔记（深入）”；
- 确保
document.getElementById('myChart')返回的是真实 DOM 节点，不是null - 避免在
$(document).ready()之前执行初始化（jQuery 场景）；原生 JS 用DOMContentLoaded或window.onload（后者等资源加载完，更稳妥） - 如果容器初始
display: none，先设为block或visibility: hidden再初始化，否则canvas.width/canvas.height读出来是 0 - 示例：
const ctx = document.getElementById('myChart').getContext('2d');<br>new Chart(ctx, { type: 'bar', data: {...} });
引入 echarts 时样式错乱：别漏掉 echarts.css
echarts 的 tooltip、图例、数据区域缩放条（dataZoom）等 UI 组件依赖独立 CSS 文件。没引入或路径错，就会出现 tooltip 不显示、图例文字重叠、缩放条变方块等现象。
参数差异：echarts 5.x 开始把核心图表逻辑和 UI 样式彻底分离，echarts.min.js 里不含任何 CSS 规则。
- CDN 方式必须加：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.css"> - npm 安装后，在入口 JS 里显式 import：
import 'echarts/lib/component/tooltip'; import 'echarts/lib/component/legend';—— 但这些只是 JS 模块，CSS 仍要单独引入echarts/dist/echarts.min.css - Webpack/Vite 项目中，若用
style-loader，可import 'echarts/dist/echarts.min.css'；若用css-loader，得确认配置支持@import或 URL 引用
移动端图表点击无响应：检查 touch-action 和事件穿透
在 iOS Safari 或安卓 Chrome 上，click 事件延迟 300ms，而图表库常依赖 touchstart/touchend。如果父容器设置了 touch-action: none 或 overflow: hidden，会导致触摸事件被拦截，图表完全“点不动”。
性能影响：强行用 fastclick 或 pointer-events: auto 可能引发滚动冲突或误触发。
- 给图表容器（如
<div id="chart">）加 <code>style="touch-action: manipulation;"，允许浏览器优化双击缩放和滚动，同时保留单点点击 - 避免在图表外层套
position: fixed+z-index的遮罩层，除非明确设置pointer-events: none - 使用
echarts时，开启renderer: 'svg'可绕过部分canvas的 touch 限制，但代价是 SVG 渲染性能下降 - 调试技巧：在 DevTools 的 Elements 面板里选中图表容器，看 Computed 栏里
touch-action是否被意外覆盖
图表库不是插上就能跑的黑盒，每个渲染层（HTML 容器、JS 初始化时机、CSS 样式链、事件系统）都可能断掉一环。最容易被忽略的是：**你看到的“图表”，其实是四层东西叠在一起的结果——DOM 结构、JS 实例、CSS 规则、浏览器事件模型。少一层，它就不动。**
