vue中的echarts实现宽度自适应的解决方案

<template>
 <!-- 这是图表开始 -->
    <div class="chart">
      <div
        ref="main1"
        style="width: 600px;height:400px;"
      ></div>
      <div
        ref="main2"
        style="width: 600px;height:400px;"
      ></div>
    </div>
    <!-- 这是图表结束 -->
</template>
<script>
// 导入echarts
import echarts from 'echarts'

export default {
  name: 'HomeIndex',
  components: {

  },
  props: {},
  data () {
    return {
    }
  },
  computed: {

  },
  watch: {

  },
  created () {

  },
  mounted () {
    var myChart1 = echarts.init(this.$refs.main1)
    var myChart2 = echarts.init(this.$refs.main2)
    var option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
      }]
    }
    myChart1.setOption(option)
    myChart2.setOption(option)
    window.addEventListener('resize', () => { myChart1.resize() })
    window.addEventListener('resize', () => { myChart2.resize() })
    window.onresize = () => {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
      }, 300)
    }
  },
  methods: {

  }
}
</script>

 <el-row :gutter="5" style="padding-top: 0px">
      <el-col :span="12">
        <el-card>
          <div id="myChart1" :style="{ width: '100%', height: '260px' }"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="myChart2" :style="{ width: '100%', height: '260px' }"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="5" style="padding-top: 0px">
      <el-col :span="12">
        <el-card>
          <div id="myChart3" :style="{ width: '100%', height: '260px' }"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="myChart4" :style="{ width: '100%', height: '260px' }"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="5" style="padding-top: 0px">
      <el-col :span="12">
        <el-card>
          <div id="myChart5" :style="{ width: '100%', height: '260px' }"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="myChart6" :style="{ width: '100%', height: '260px' }"></div>
        </el-card>
      </el-col>
    </el-row>