JavaScript图表需选库：Chart.js轻量易用但类型有限，D3.js灵活但难掌握，ECharts中文友好但体积大；关键在数据映射可维护、坐标轴自适应、tooltip带上下文。
JavaScript 本身不内置图表能力，必须依赖第三方库；选错库或误用配置会导致渲染失败、交互卡顿、移动端失真。
Chart.js 最适合快速上手的静态/半交互图表
它轻量（约 60KB）、API 直观、默认响应式，但仅支持基础图表类型（折线、柱状、饼图等），不支持地理热力图或复杂关系图。
-
chart.update()比重新new Chart()更高效，尤其在频繁数据更新场景下 - 移动端缩放问题常因容器
width: 100%但父元素未设position: relative导致，需补全 CSS - 导出图片用
chart.toBase64Image()，但若图表含自定义字体或 SVG 图标，可能丢失渲染
const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{
label: 'Sales',
data: [12, 19, 3],
backgroundColor: 'rgba(54, 162, 235, 0.2)'
}]
},
options: {
responsive: true,
plugins: { legend: { display: false } }
}
});
D3.js 适合高度定制化与动态数据流可视化
它不是“画图表的库”，而是操作 DOM/SVG 的底层工具；能实现力导向图、时间轴、实时流图等，但学习成本高、易写出性能瓶颈代码。
- 避免在
enter().append()后直接写复杂计算逻辑，应先用data.join()预处理 - 使用
d3.timer()替代setInterval()做动画，保证帧率稳定 -
大数据量（>10k 点）时务必启用
canvas渲染而非 SVG，否则 DOM 节点爆炸
ECharts 在中文生态和复杂交互上更省心
百度开源，文档中文友好，原生支持拖拽缩放、多维联动、服务端渲染（SSR）；但体积大（完整版 > 500KB），tree-shaking 配置稍麻烦。
立即学习“Java免费学习笔记（深入）”；
- 按需引入关键：用
echarts/lib/chart/line+echarts/lib/component/toolbox，而非echarts - 异步数据加载后必须调用
chart.setOption(option, { notMerge: true })，否则增量更新会错乱 - IE11 兼容需额外引入
core-js/stable和regenerator-runtime/runtime
真正难的不是“怎么画出来”，而是数据映射逻辑是否可维护、坐标轴刻度是否自适应业务语义、tooltip 内容是否带上下文状态——这些细节往往在第一次上线后三天内暴露。
