Chart.js 适合新手快速实现折线图、柱状图，5行代码即可，需确保canvas存在、DOM加载完成、type小写、数据字段名为labels和datasets。
直接用 Chart.js 快速画折线图、柱状图，5 行代码起步
Chart.js 是目前最轻量、文档最清晰、对新手最友好的 JavaScript 图表库。它不依赖 jQuery，原生支持响应式，canvas 渲染性能够用绝大多数业务场景。
常见错误是漏掉 <canvas> 标签或没指定 id，导致 new Chart() 报错 Canvas is null。
- 必须在 DOM 加载完成后初始化，推荐用
DOMContentLoaded或把脚本放</body>前 -
type字符串要小写，比如"line"、"bar"，写成"Line"会静默失败 - 数据字段名固定为
labels和datasets，不能改成categories或series
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{ label: 'Sales', data: [12, 19, 3] }]
}
});
ECharts 适合复杂交互和中国式报表需求
如果你需要地图下钻、时间轴联动、多 Y 轴、导出 PNG/PDF，或者项目里已有大量百度系生态（如地图 API），ECharts 是更稳妥的选择。但它体积大（压缩后约 400KB），Tree Shaking 支持弱，按需引入麻烦。
容易踩的坑是直接调 echarts.init() 时容器还没渲染出来，或宽高为 0 —— 它不会自动重绘，得手动调 chart.resize()。
立即学习“Java免费学习笔记（深入）”；
- 初始化前确保容器有明确宽高（CSS 中设
width: 600px; height: 400px） - 响应式监听建议用
window.addEventListener('resize', () => chart.resize())，别依赖setInterval - 中国地图需要单独加载
echarts-gl或echarts/map/js/china，否则geo配置无效
D3.js 不是“画图库”，而是图形控制权交给你
D3 的核心是数据绑定与 DOM 操作，不是封装好的 BarChart 组件。它适合定制化极强的可视化（如力导向图、桑基图、动态流图），但学习成本高，开发周期长。
新手常误以为 D3 能像 Chart.js 一样传个配置就出图，结果卡在 enter()/update()/exit() 逻辑里。
- 不要从零写坐标轴，优先用
d3.axisBottom()+d3.scaleLinear() - SVG 元素必须显式设置
attr("cx")、attr("cy")等，D3 不会自动推断位置 - 动画要用
transition().duration(300)显式声明，否则是瞬时更新
Vue/React 项目里别硬接原生库，优先用封装层
在框架中直接操作 canvas 或 div 容器，容易引发生命周期错乱（比如组件卸载后 ECharts 还在尝试重绘）。
Vue 推荐用 vue-echarts（官方维护），React 推荐 recharts（API 更函数式）或 echarts-for-react（功能更全）。
-
recharts的<LineChart>默认不响应式，需包裹在<ResponsiveContainer>里 -
vue-echarts的init-options是透传给echarts.init()的第二参数，不是图表配置 - 所有封装库都要求图表数据是响应式引用（Vue 的
ref/ React 的useState），直接改数组元素不会触发重绘
chartjs-plugin-datalabels）也得提前查兼容版本，v4 和 v3 的插件不通用。 
