ECharts踩坑 --＞图表大小根据浏览器视窗变化自动响应

ECharts踩坑 -->图表大小根据浏览器视窗变化自动响应

---

前言

接上篇：ECharts踩坑–>指定图表容器大小出错

---

提示：以下是本篇文章正文内容

一、遇到的问题

在多标签内使用多个ECharts图表时，希望每个图表都能根据浏览器大小变化时，图表自动响应，但是我在使用wondows.onresize方法时，只有最后一个图表能够根据窗口大小图表自适应，前边的图表都时初始化时的大小，如下：

示例：当浏览器窗口变化后，图表并没有根据窗口大小全屏显示，还保持初始化时的图表大小

二、代码展示

代码如下（示例）：

<template>
  <div id="chartA" />
</template>
<script>
export default {
  name: 'ChartA',
  data() {
    return {
      myChart: null
    };
  },
  mounted() {
    this.createChart();
    window.onresize = function () {
      this.myChart && this.myChart.resize();
    };
  },
  methods: {
    createChart() {
      let option = {
        title: {
          text: '特性示例：渐变色 阴影'
        },
        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',
            showBackground: true,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#FF5300' },
                { offset: 1, color: '#F4CC01' }
              ])
            }
          }
        ]
      };
      let chartA = document.getElementById('chartA');
      this.myChart = this.$echarts.init(chartA);
      this.myChart.setOption(option);
    }
  }                       
};
</script>
<style lang='stylus' scoped>
  #chartA
    width 750px
    height 600px
</style>

三、问题分析

遇到根据浏览器窗口变化图表自动响应的需求，第一步还是查官网（EChart图表容器及大小），第三条就是响应容器大小的变化，以下代码时官网上的例子

<style>
  #main,
  html,
  body {
    width: 100%;
  }
  #main {
    height: 400px;
  }
</style>
<div id="main"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
  window.onresize = function() {
    myChart.resize();
  };

很明显我们就是用的官方的例子呀，为啥只有最后一个能够响应容器大小变化，而前边的不能呢？这里就要说一下windows.onresize这个方法自身的问题啦：因为onresize本身就是一个回调，当你多次赋值时，前一个就会被覆盖。 所以windows.onresize事件只能响应一次，如果在多个地方都使用这个方法，那么前边的事件会被覆盖，这也就导致了，只有最后一个图表的resize()方法才会执行，所以只有最后一个图表才能响应容器大小的变化。

四、解决办法

这里我们可以使用window.addEventListener方法替代window.onresize方法，通过addEventListener可以多次添加添加事件监听

mounted() {
    this.createChart();
    window.addEventListener('resize', () => {
      this.myChart && this.myChart.resize();
    });
  },

这样图片就能自动响应容器大小啦

五、拓展一下addEventListener

element.addEventListener(event, function, useCapture)
event：字符串类型，用于指定事件名，属于必填项。
function：用于指定事件触发时执行的函数，属于必填项。
useCapture：布尔值类型，用于指定事件是否在捕获或冒泡阶段执行。

总结

以上就是对ECharts多图表响应容器大小的解决办法，以及window.onresize和window.addEventListener的区别，希望能帮到你 >_<