必须确保 DOM 就绪后再初始化，否则会因容器未解析或 ID 不匹配导致报错；需设置明确宽高、保证 data 与 xAxis 长度一致、嵌入业务 ID 而非依赖索引，并在 resize 时主动调用 chart.resize()。
用 ECharts 初始化柱状图前必须确保 DOM 就绪
直接在 里执行 echarts.init() 会报错 Cannot read property 'init' of undefined 或 getElementById(...) is null，本质是 JS 执行时容器还没被解析。最稳妥的做法是把初始化脚本放在 前，或包裹在 document.addEventListener('DOMContentLoaded', ...) 中。
常见错误：在 index.html 中写了 <div id="bar-chart" class="chart"></div>，但 JS 文件里写成 echarts.init(document.getElementById('main')) —— ID 不匹配导致返回 null。
- 确认容器有明确 ID，且与 JS 中传入的参数完全一致（区分大小写）
- 容器父级不能是
display: none或未设置宽高，否则图表渲染为空白 - 建议给容器加内联样式如
style="width: 100%; height: 400px;"，避免依赖外部 CSS 加载顺序
配置 ECharts 柱状图时 data 和 xAxis 必须长度一致
ECharts 的 series[0].data 和 xAxis[0].data 是强绑定关系：前者决定每根柱子的高度值，后者决定对应横坐标标签。若长度不等，图表要么漏数据，要么报错 Uncaught TypeError: Cannot read property 'length' of undefined。
比如你传了 xAxis: { data: ['Q1', 'Q2', 'Q3'] }，但 series: [{ data: [120, 85] }]，第三根柱子就无法显示标签，hover 提示也可能错位。
立即学习“前端免费学习笔记（深入）”；
- 后端返回数据时，优先让 API 同时返回 label 列表和 value 列表，前端不做截断或补空
- 如果需要动态增删数据，用
setOption({ xAxis: { data: [...] }, series: [{ data: [...] }] }, true)的第二参数true触发完整重绘 - 负数柱子默认向下延伸，无需额外配置；但若想强调零线，可加
yAxis: { splitLine: { lineStyle: { color: '#999' } }, axisLine: { lineStyle: { color: '#000' } } }
让柱子可点击并传真实业务 ID，别只靠数组索引
很多人写点击逻辑只取 elements[0].index，然后用这个数字去查原始数组第几个元素——一旦数据排序、过滤或分页，索引就失效，点错对象是常态。
正确做法是在数据项里直接嵌入业务标识，例如：series[0].data = [{ value: 120, name: '华东区', id: 'region-001' }, { value: 98, name: '华南区', id: 'region-002' }]。这样点击回调里能直接拿到 params.data.id。
- 启用点击事件需在 option 顶层加
tooltip: { trigger: 'item' }和series[0].itemStyle: { cursor: 'pointer' } - 绑定点击：在
myChart.on('click', params => { console.log(params.data.id) })中处理 - 移动端要注意 touch 事件穿透问题，ECharts 默认已兼容，但若外层有遮罩层，需加
pointer-events: none避免拦截
响应式布局下柱状图宽度塌缩的修复方式
用 CSS Grid 或 Flex 布局做仪表盘时，<div class="chart"> 容器常设为 <code>width: 100%，但 ECharts 默认 canvas 宽度固定为容器初始宽度，窗口缩放后不会自动重绘，导致图表挤压变形或留白。
这不是 bug，是设计行为。ECharts 不监听 resize，默认靠开发者主动触发 resize()。
- 在
window.addEventListener('resize', () => myChart.resize())中调用，注意节流（可用setTimeout防抖） - 若使用 Vue/React，推荐在组件
mounted/useEffect中注册，在unmounted/ 清理函数中移除监听 - 避免对每个图表单独监听，可统一用
echarts.connect([...charts])管理多个实例的 resize 同步
