ECharts---图表如何响应容器大小变化

默认情况下，当改变容器尺寸时（比如更改分辨率，浏览器页面缩放），图表原先是多大还是多大，不会根据容器尺寸的变化而改变，但是我们都希望：生成的图表能够根据容器的大小，做出对应的变化，这如何实现呢？

官方给出的方案是监听window对象的resize()事件，做出对应的更改。

但是看了鑫神的这篇文章 《检测DOM尺寸变化JS API ResizeObserver简介》 ，文中包含以下一些观点：

• window对象的resize()事件只能监测窗体尺寸的变化。
• 有时候窗体的尺寸没变，但是DOM元素尺寸变化了，那resize()事件是监测不到的。
• 有时候窗体的尺寸变了，可DOM元素的尺寸没变，那用resize()事件做监测就有些浪费了。
• 由于上述这些弊端，我们需要一个真正能监测DOM元素尺寸变化的工具，这就是ResizeObserver对象。

这就提供了一个新的思路，感觉很高级，现实践如下。

<template>
  <div id="myChart" />
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Charts',
  data () {
    return {
      myChart: null,
      timer: null
    }
  },
  methods: {

    // 监测容器尺寸改变
    observeResize () {
      const or = new ResizeObserver(entries => {
        clearTimeout(this.timer)

        this.timer = setTimeout(() => {
          this.myChart && this.myChart.resize()
        }, 100)
      })

      or.observe(document.getElementById('myChart'))
    },
    showChart () {
      this.myChart = echarts.init(document.getElementById('myChart'))
      const options = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }

      this.myChart.setOption(options)
    }
  },
  mounted () {
    this.showChart()
    this.observeResize()
  }
}
</script>

<style>
  #myChart {
    height: 300px;
    border: 1px solid blue;
  }
</style>