JavaScript图表绘制必须依赖第三方库，因Canvas/SVG手动画需处理坐标换算、响应式、交互等维护黑洞；主流库中Chart.js轻量适合静态报表，ApexCharts动画好但SSR弱，ECharts功能全但体积大。
JavaScript 图表绘制本身不依赖原生 API，必须借助第三方库；没有“哪个最好”的通用答案，只有“哪个更匹配你的场景”。
为什么不能直接用 Canvas 或 SVG 手动画图表
Canvas 绘制折线、柱状图看似可行，但实际要自己处理坐标换算、缩放、响应式重绘、图例交互、导出、无障碍支持——这些在业务中很快变成维护黑洞。SVG 虽然结构清晰，但数据绑定、动画、事件委托仍需大量胶水代码。
真正省时间的不是“会不会画”，而是“改数据后图表是否自动更新、点击某根柱子能不能拿到对应 record、导出 PNG 时字体是否糊、移动端缩放是否卡顿”。这些都由图表库封装好了。
主流轻量级库对比：Chart.js vs ApexCharts vs ECharts
选库前先问自己三个问题：数据是否实时更新、是否需要服务端渲染（SSR）、项目是否已用 Vue/React。不同库在这几项上差异明显：
立即学习“Java免费学习笔记（深入）”；
-
Chart.js：体积小（~60KB gzipped），API 简单，适合管理后台静态报表；但默认不支持timeScale的毫秒级时间轴，也难做复杂联动（比如点击饼图切片，联动地图高亮区域） -
ApexCharts：动画细腻，主题丰富，updateSeries()和toggleSeries()对实时数据友好；缺点是 SSR 支持弱，服务端渲染时容易报document is not defined -
ECharts：功能最全，地理坐标系、关系图、3D 散点都内置；但包体积大（基础版 ~180KB），tree-shaking 配置稍麻烦，echarts.init()必须传入真实 DOM 节点，服务端或测试环境需 mockdocument.createElement
一个能跑通的 Chart.js 最小示例（含常见坑）
很多人卡在第一步：页面渲染了但图表空白。通常不是代码写错，而是 DOM 节点没就绪或容器无宽高。
正确做法：
- 确保
<canvas id="myChart"></canvas>所在容器有明确width和height（CSS 设置即可，不必内联） - 初始化必须等 DOM 加载完成：
document.addEventListener('DOMContentLoaded', ...)或放在<body>底部 - 若用 webpack/vite，注意
import { Chart } from 'chart.js'后还需注册控制器，比如柱状图要加import 'chart.js/auto'，否则报"Unknown component: bar"
简短示意：
<canvas id="myChart" width="400" height="200"></canvas>
<script>
import { Chart } from 'chart.js';
import 'chart.js/auto'; // 必须！否则类型识别失败
new Chart(document.getElementById('myChart'), {
type: 'line',
data: { labels: ['Jan', 'Feb'], datasets: [{ data: [12, 19] }] }
});
</script>
ECharts 在 React 中的典型陷阱
用 echarts-for-react 是常见选择，但它默认开启 lazyLoad，导致首次渲染空白；另外，option 对象若含函数（如 tooltip.formatter），会被序列化丢弃，造成格式错误。
避坑要点：
- 禁用懒加载：
<ReactECharts option={option} lazy={false} /> - 函数型配置必须写在
useEffect里调用setOption()，而不是直接塞进option属性 - 响应式问题：不要只靠 CSS
width: 100%，得监听窗口 resize 并手动调用chartRef.current?.resize()
真正影响交付节奏的，往往不是“怎么画”，而是“怎么让图表在 Modal 弹出后正常渲染”“怎么让导出图片包含中文”“怎么让移动端双指缩放不和页面滚动冲突”——这些细节，每个库的文档都藏得挺深。
