vue中的echarts实现宽度自适应

今天项目中需要使用到 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>