Vue使用echarts画图，横坐标名称显示不全的问题

我在vue中使用echarts做了一个图，定义了图形大小，横坐标只显示了一点。如果修改height: '450px' 的值，图形区域随之改变，横坐标位置没有变化。
怎么修改chart最外层的大小呢？

<div
      class="chart-container"
      ref="chart1"
      :style="{ width: '800px', height: '450px' }"
    ></div>

横坐标位置设置：

nameTextStyle: {
            padding: [0, 0, -130, -400]    // 四个数字分别为上右下左与原位置距离
          },

调整一下options 里边的grid 选择中的值。
例如上下等。 另外 把 containLabel: true ,使得计算下边的空间的时候把label也计算进去。
grid: {
top: 40,
left: 20,
containLabel: true
},

另外，建议你把x轴的label 设置一个倾斜角度，例如30°或者45°