echarts柱状图修改图形宽高

### 修改ECharts柱状图的宽度和高度

对于ECharts中的柱状图，可以通过配置项`series.barWidth`来设定柱子的具体宽度[^1]。此属性接受数值或百分比作为输入，允许开发者精确控制柱形图表中单个柱体所占的空间比例。

如果希望固定整个图表区域大小而不受数据量变化影响，则需通过CSS样式定义容器尺寸，并利用`grid.containLabel`确保标签不会被裁剪掉[^4]。另外，在某些情况下为了防止因自动缩放造成视觉效果不佳的问题，还可以考虑锁定类目轴间的距离(`categoryAxis.boundaryGap`)并启用工具提示分页功能以应对过多的数据点显示情况。

下面给出一段简单的JavaScript代码用于初始化一个具有特定宽高的柱状图实例：

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name:'销量',
        type:'bar',
        barWidth : '50%', // 设置柱子宽度为50%
        data:[120, 200, 150, 80, 70, 110, 130]
    }]
};

myChart.setOption(option);

此外，若要使图表的高度保持不变而仅改变其内部元素布局方式的话，可以尝试调整`toolbox.feature.saveAsImage.pixelRatio`选项或是直接操作DOM节点设置内联样式表达到目的[^2]。