修改容器内宽度，自己变化

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/echarts/dist/echarts.min.js"></script>
<script src="//unpkg.com/[email protected]/lib/line.js"></script>

<div id="app">
  <button @click="changeWidth">修改宽度</button>
  <div class="box" ref="box">
    <ve-line :data="chartData" ref="chart"></ve-line>
  </div>
</div>

CSS

.box {
  width: 400px;
  border: 1px solid red;
  height: 400px;
}

JavaScript

new Vue({
  el: '#app',
  data: function () {
    this.boxWidth = ['400px', '600px']
    return {
			chartData: {
        columns: ['日期', '销售额'],
        
        rows: [
          { '日期': '1月1日', '销售额': 123 },
          { '日期': '1月2日', '销售额': 1223 },
          { '日期': '1月3日', '销售额': 2123 },
          { '日期': '1月4日', '销售额': 4123 },
          { '日期': '1月5日', '销售额': 3123 },
          { '日期': '1月6日', '销售额': 7123 }
        ]
      }
    }
  },
  methods: {
    changeWidth: function () {
      this.$refs.box.style.width = this.$refs.box.style.width === this.boxWidth[1] ? this.boxWidth[0] : this.boxWidth[1]
      this.$nextTick(function () {
      	this.$refs.chart.echarts.resize()
      })
    }
  },
  components: { VeLine }
})