Chart.js适合静态或低频图表，echarts/Plotly.js适合高频更新与深度交互；D3.js灵活但需手动实现细节；封装图表组件应避免过度抽象，推荐用hook管理生命周期。
图表库选型核心判断：先看数据更新频率和交互深度
如果只是渲染一次静态报表，Chart.js 足够轻量、上手快；但一旦需要每秒刷新几十条时间序列（比如监控面板），或者支持拖拽缩放、图例联动、自定义 tooltip 渲染，echarts 或 Plotly.js 才真正扛得住。别被“功能多”误导——D3.js 灵活度最高，但所有坐标计算、DOM 更新、过渡动画都得自己写，不是“用库”，是“造轮子”。
Chart.js 适合什么场景？哪些坑必须避开
Chart.js 对初学者友好，但默认不支持多 Y 轴、原生不支持大数据量（>5000 点会明显卡顿）、tooltip 里无法直接插入 HTML 元素（需用 external 配置 + 自己绑定事件）。它适合内部管理后台的月度销售汇总、用户增长折线图这类中低频、结构清晰的图表。
- 启用响应式必须设
responsive: true且容器有明确宽高（仅设width: 100%不够） - 动态更新数据别直接改
chart.data.datasets[0].data，要用chart.data.labels.push(...)+chart.update() - 想加点击高亮某条线？得监听
onClick回调，再手动调setActiveElements，官方没封装快捷方法
echarts 性能关键配置项有哪些
echarts 在大数据量下表现好，但默认开启大量动画和阴影，反而拖慢。真实项目中这几个配置几乎必调：
-
animation: false—— 初始渲染或高频更新时关掉，省掉 30% 渲染耗时 -
renderMode: 'canvas'—— SVG 模式在 >1w 点时严重掉帧，Canvas 是唯一选择 -
progressive: 500—— 开启渐进式渲染，让大散点图“先出轮廓，再填细节” - 时间轴类图表务必设
dataZoom: [{ type: 'inside' }]，否则滚动卡顿到无法交互
option = {
xAxis: { type: 'time' },
yAxis: {},
series: [{
type: 'line',
data: largeTimeSeries,
progressive: 500,
animation: false
}],
dataZoom: [{ type: 'inside' }]
};
要不要自己封装图表组件？警惕过度抽象
团队里常见错误是：为统一颜色、字体、空状态，硬套一层 React 组件封装 echarts，结果每次改 tooltip 样式都要动封装层，连 setOption 的 merge 行为都被拦截。更务实的做法是抽一个 useECharts hook，只处理初始化、resize 响应、销毁逻辑，其余配置完全透传。图表差异本质是业务语义不同，不是技术问题——销售漏斗图和服务器 CPU 曲线图，本就不该共用同一套 props 接口。
立即学习“Java免费学习笔记（深入）”；
