如何配置 ECharts 柱状图使宽高顶满容器且无 padding

设置 ECharts 柱状图充满容器并去除内边距
为了使 ECharts 的柱状图能够完全填充其所在的容器并且不带有任何内边距，可以通过调整 grid 和图表初始化选项来实现。
调整 Grid 参数
通过设置 grid 属性中的 left, right, top, bottom 值为 '0%' 或者具体数值 0 来移除默认的留白区域。这使得绘图区域能够紧贴到容器边缘[^1]：
option = {
grid: {
left: '0%',
right: '0%',
top: '0%',
bottom: '0%',
containLabel: true // 如果希望标签也处于可视范围内，则开启此参数
},
};

初始化实例时指定宽高百分比
当创建 echarts 实例对象的时候，在调用 setOption 方法之前，应该先确保 DOM 容器已经存在，并且给该DOM元素设定合适的 CSS 样式以控制宽度和高度。通常情况下推荐使用相对单位如百分比而非固定像素值，以便更好地支持响应式设计[^3]:
#main {
width: 100%;
height: 100vh; /* 使用视口单位让图表占满整个屏幕 */
}

同时也要注意父级容器也需要有明确的高度定义，这样才能保证子元素按照预期的比例拉伸。
启用自适应功能
为了让图表随窗口尺寸的变化而自动调整大小，可以在初始化完成后立即注册 resize 事件监听器或者利用内置的方法 enableAutoResize() 开启自动化处理机制：
// 手动绑定resize事件
window.addEventListener('resize', function () {
myChart.resize();
});

// 或者更简单的方式是启用auto-resize特性
myChart.enableAutoResize();

以上配置将帮助构建一个既美观又实用的数据可视化组件，它不仅能在不同分辨率下保持良好的显示效果，而且还能充分利用可用空间展示数据信息。