关于echarts的X轴内容根据容器大小动态显示

代码

<template>
  <div id="histogram">
    <div class="chart-container" style="height: 100%;">
      <vue-echarts
        v-if="!noData"
        ref="histogram"
        :options="POLAR_OPTIONS"
        :autoresize="true"
        @finished="getTextLength"
      ></vue-echarts>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'Histogram',
    data () {
      const COLOR = ['#457ef2', '#ff5a5e', '#24b29c', '#a055ed', '#e8aa07']

      const POLAR_OPTIONS = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: '{b} </br> {a}:{c}个',
        },
        grid: {
          left: '30px',
          right: '30px'