echarts超出容器寬度

在使用vue+iview+echarts時(shí)，出現(xiàn)了echarts圖標(biāo)超出容器寬度的問題，代碼如下：
DOM結(jié)構(gòu):

    <Row>
      <Col span="15">
        <Row>
          <Col span="24" style="width: 100%">
            <div class="chart-container" id="echart-bar-agent" style="width: auto; height: 350px;"></div>
          </Col>
          <Col span="24">
            <div class="chart-container" id="echart-line-event" style="width: 100%; height: 350px;" ></div>
          </Col>
        </Row>
      </Col>
    </Row>

JS代碼:

  import echarts from 'echarts'
  import axios from 'axios'

  export default {
    name: 'Dashboard',
    data() {
      return {
        installCommand: '暫無',
        statisticData: ''          
      }
    },
    mounted() {
      this.drawAgentChart(this.statisticData)
      this.drawEventChart(this.statisticData)
    },
    methods: {
      drawAgentChart: function(chartData) {
        // 初始化圖表數(shù)據(jù)
        let agentChart = echarts.init(document.getElementById('echart-bar-agent'))
        agentChart.showLoading()
        // ajax獲取圖表數(shù)據(jù)
        const get_data_url = 'http://127.0.0.1:8000/manager/dashboard/get_chart_data/'
        axios.get(get_data_url)
          .then(function(response) {
            agentChart.hideLoading()
            let agentChartOption = {
              title: {
              text: 'Agent存活概況',
                subtext: ''
              },
              tooltip: {
                trigger: 'axis'
              },
              xAxis: {
                type: 'category',
                data: response.data.chart_date_list
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                type: 'bar',
                data: response.data.alive_agent_list,
              }]
            }
            agentChart.setOption(agentChartOption)
          })
          .catch(function(error) {
          })
      },
      drawEventChart: function(chartData) {
        let eventChart = echarts.init(document.getElementById('echart-line-event'))
        let eventChartOption = {}
        eventChart.setOption(eventChartOption)
        console.log('draw event......')
      }
    }
  }

問題很奇怪，第一次打開頁(yè)面或者強(qiáng)制刷新頁(yè)面時(shí)，圖表超出容器寬度，如下圖:

如果隨便修改了代碼，比如加一行console.log(1)，頁(yè)面自動(dòng)hot reloading之后,圖表又能正常渲染，不會(huì)超出容器寬度，效果如下圖:

如果使this.$refs.{refname}.style.width為容器設(shè)置一個(gè)固定的寬度，圖表也不會(huì)超出容器寬度。
花了將近兩天時(shí)間，還是沒有定位到問題根源，請(qǐng)大家?guī)蛶兔??！?/p>