<div>是图表容器的首选，因其块级、无默认样式、尺寸可控且无语义干扰；误用<span>或<p>会导致尺寸失效或留白异常；必须设置明确宽高，避免display:inline/float及overflow:hidden截断，动态显示时需手动resize。
用 <div> 作为图表容器是最直接且兼容性最好的做法
浏览器原生不支持直接渲染图表，所有可视化库（如 Chart.js、ECharts、D3）都依赖一个可定位、可尺寸控制的 DOM 容器。用 <div> 是标准选择——它默认块级、无边距、支持 width/height 设置，且不会引入语义干扰或样式污染。
常见错误是误用 <span> 或 <p>：前者是内联元素，设 height 失效；后者自带 margin 和 line-height，容易导致图表错位或留白异常。
- 必须为
<div>设置明确的width和height（CSS 中或内联 style），否则多数图表库初始化时会取到 0px - 避免给容器设
display: inline或float，会破坏 canvas 渲染定位 - 若用 Flex/Grid 布局，确保父容器已定义
display: flex或display: grid，否则子<div>可能塌陷
Chart.js 要求容器有固定尺寸，且不能被父级 overflow: hidden 截断
Chart.js 在初始化时会创建 <canvas> 并拉伸填满容器。如果容器宽高为 auto、或父级设置了 overflow: hidden 且未预留足够空间，图表会显示不全甚至空白。
典型现象：canvas 元素存在但内容为空，控制台无报错，chartInstance.canvas.width 返回 0。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 推荐写法：
<div id="chart" style="width: 600px; height: 400px;"></div> - 响应式场景下，用 CSS media query 控制尺寸，或监听窗口 resize 后调用
chart.update()，而非依赖responsive: true自动适配（该选项对父容器尺寸变化不敏感） - 若容器在 modal 或 tab 面板中动态显示，需在显示后手动调用
chart.resize()，否则初始尺寸仍为 0
ECharts 容器需提前初始化，且不支持 document.body 直接作为 root
ECharts 的 init() 方法要求传入一个「已挂载」的 DOM 节点。如果节点尚未插入文档流（例如刚用 document.createElement('div') 创建但没 append），会抛出 Cannot read property 'getBoundingClientRect' of null 错误。
另一个易忽略点：ECharts 不允许把 document.body 或 document.documentElement 当作图表容器——它需要一个干净、独立、可精确测量的 <div>。
- 正确顺序：先
appendChild()到页面，再echarts.init(domElement) - 避免在
document.write()或v-html（Vue）中直接插入图表容器，DOM 可能未就绪 - 使用
resize()时注意：若容器 display 为 none，ECharts 无法获取尺寸，应先show()再 resize
D3 绘图容器选 <svg> 还是 <div>？取决于渲染方式
D3 本身不强制容器类型，但不同输出方式有硬性要求：
- 用
d3.select(...).append('svg')手动生成 SVG 图形 → 容器必须是<div>（用于承载<svg>标签） - 用
selection.append('circle')等直接操作 SVG 元素 → 父容器必须是<svg>，否则元素无法渲染（HTML 中非 SVG 上下文不识别<circle>） - 用 Canvas 模式（
d3.canvas）→ 容器必须是<canvas>，且需手动设置width/height属性（不是 CSS）
混用风险高：比如把 <svg> 当作 Chart.js 容器，会导致 canvas 创建失败；把 <canvas> 当作 D3 SVG 容器，则元素 append 后不可见。
