VUE的echart图表实现自适应窗口大小变化

需求：在PC端开发含图表展示的页面时，需要考虑用户调整浏览器窗口大小后图表能够根据窗口大小自适应变化。

废话不多说直接来代码吧

html

<template>
  <div class="dashboard-container">
    <!-- <div class="dashboard-text">name:{{name}}</div>
    <div class="dashboard-text">roles:<span v-for='role in roles' :key='role'>{{role}}</span></div>-->
    <!-- <div class="wel">
      <img src="../../assets/home/welcome.png">
      <p>欢迎登录简爱诚品后台</p>
    </div>-->

    <div class="panel-group">
      <div class="content" style="padding:20px;">
        <div class="search">
          <el-row class="panel-group" style="margin-bottom:20px;">
            <el-col :xs="12" :sm="12" :lg="12">
              <span class="chartTitle">用户总人数统计</span>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" style="text-align:right"></el-col>
          </el-row>
          <el-row class="panel-group">
            <el-col :xs="12" :sm="12" :lg="12">
              <div class="rowLine">
                <span class="userTotal">59800</span>
                <span class="currentUserNum">当前用户人数</span>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" style="text-align:right">
              <el-date-picker v-model="filterTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-col>
          </el-row>
        </div>
        <div ref="mychart" style="width: 100%;height:400px;"></div>
      </div>
      <div class="content" style="padding:20px;">
        <div class="search">
          <el-row class="panel-group">
            <el-col :xs="12" :sm="12" :lg="12">
              <div class="rowLine">
                <span class="interactInfoT">互动信息统计</span>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" style="text-align:right">
              <el-date-picker v-model="filterTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-col>
          </el-row>
        </div>
        <div ref="interactChart" style="width: 100%;height:400px;"></div>
      </div>
    </div>
  </div>
</template>

js

<script>
import { mapGetters } from 'vuex'

export default {
  components: {},
  name: 'dashboard',
  computed: {
    ...mapGetters(['name', 'roles'])
  },
  data () {
    return {
      filterTime: '',
      lineChart: null,
      interActChart: null
    }
  },
  mounted () {
    var that = this
    this.initEchart()
    this.initInteractChart()
    window.addEventListener('resize', function () {
      console.log('resize')
      that.lineChart.resize()
    })
  },
  created () { },
  methods: {
    initEchart () {
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: ['2019-09-01', '2019-10-01', '2019-11-01', '2019-12-01', '2020-01-01', '2020-02-01', '2020-03-01']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      }
      this.lineChart = this.$echarts.init(this.$refs['mychart'])
      this.lineChart.setOption(option)
      console.log(option)
    },
    initInteractChart () {
      var option = {
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ['product', '转发', '评论', '点赞'],
            ['2019-01', 43.3, 85.8, 93.7],
            ['2019-02', 83.1, 73.4, 55.1],
            ['2019-03', 86.4, 65.2, 82.5],
            ['2019-04', 72.4, 53.9, 39.1]
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          { type: 'bar',
            itemStyle: {
              normal: {
                // 随机显示
                // color:function(d){return “#”+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
                // 定制显示
                color: function (params) {
                  var colorList = ['#2db7f5', '#2db7f5', '#2db7f5']
                  return colorList[params.dataIndex]
                }
                // 如果是两色交替 可以判断params.dataIndex的奇偶去设置颜色
              }
            }
          },
          { type: 'bar',
            itemStyle: {
              normal: {
                // 随机显示
                // color:function(d){return “#”+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
                // 定制显示
                color: function (params) {
                  var colorList = ['#4ad2e7', '#4ad2e7', '#4ad2e7']
                  return colorList[params.dataIndex]
                }
                // 如果是两色交替 可以判断params.dataIndex的奇偶去设置颜色
              }
            }
          },
          { type: 'bar',
            itemStyle: {
              normal: {
                // 随机显示
                // color:function(d){return “#”+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
                // 定制显示
                color: function (params) {
                  var colorList = ['#fedf82', '#fedf82', '#fedf82']
                  return colorList[params.dataIndex]
                }
                // 如果是两色交替 可以判断params.dataIndex的奇偶去设置颜色
              }
            }
          }
        ]
      }
      this.interActChart = this.$echarts.init(this.$refs['interactChart'])
      this.interActChart.setOption(option)
    }
  },
  destroyed () {
    window.removeEventListener('resize', this.resizeHandle)
  }
}
</script>