echarts动态改变图表的大小

本文同步发表于个人的CSDN博客

---

echarts5以上的版本，echarts容器支持直接设定百分比宽高，但是仍然会有低版本的一个问题，就是浏览器尺寸变动的时候，echarts容器不会响应式的变化。

为了解决这个问题，有了如下解决方案：

• 首先echarts容器外要放置一个父元素

  <div ref="ct" style="height: 100%; width: 100%">
    <div ref="charts" style="height: 100%; width: 100%"></div>
  </div>

其中父元素一定要使用行内样式的方式设定宽高。

• 重新刷新尺寸的工具函数：

  /**
   *@description 为图表计算高度
   *@param container 父容器
   *@param charts echarts对象
   *@param offsetX 横轴偏移，可不填，默认50px
   *@param offsetY 纵轴偏移，可不填，默认70px
  */
  export function chartssize(container, charts, offsetX =50 , offsetY = 70) {
    function getStyle(el) {
      if (window.getComputedStyle) {
        const doc = window.getComputedStyle(el);
        const height = parseInt(doc.height);
        const width = parseInt(doc.width);
        return {height, width};
  
      } else {
        return {height: container.clientHeight, width:container.clientWidth};
      }
    }
    const {height, width} = getStyle(container, null)
    charts.resize({width: parseInt(width - offsetX), height: parseInt(height - offsetY)})
  }
  

• 以VUE为例：

  使用：

  import * as echarts from "echarts";
  import { option } from "./config.js";
  import { chartssize } from "@/utils/resize";
  export default {
    data() {
      return {
        charts: {},
      };
    },
    created() {
      this.$nextTick(() => {
        this.echartsinit();
      });
    },
    mounted() {
        const ct = this.$refs["ct"];
        window.addEventListener("resize", () => {
            chartssize(ct, this.charts, 0, 0);
        });
        // window.onresize = () => {
        //   const ct = this.$refs["ct"];
        //   chartssize(ct, this.areaLine, 0, 0);
        // };
    },
    methods: {
      echartsinit() {
        if (process.client) {
          this.charts = echarts.init(this.$refs["charts"]);
          this.charts.setOption(option);
        }
      },
    },
  };
  

  ==注意==：mounted里的方法为重新设置echarts容器的方法。实际上就是监听窗口的resize事件，在这里有两种方式监听resize事件。一种是重写window.onresize，但是使用这种方式会有一个问题，如果同一个页面内有多个echarts图表，那么只有最后一个被渲染的才会生效。这个时候只要使用window.addEventListener的方式即可解决

---

函数节流

在处理echarts图表的时候，往往需要使用window.onresize来监听页面大小，从而进一步去改变echarts的大小，但是resize事件触发的频率极其频繁，如果页面的echarts图表又很多，这无疑是一件十分灾难的事情。

首先定义一个节流函数，需要接收一个函数，并且返回一个函数，示例如下：

throttle = (fn) => {
    let timer;
    return function () {
        console.log("执行次数");
        if (timer) {
            return;
        }
        timer = setTimeout(() => {
            fn();
            clearTimeout(timer);
            timer = null;
        }, 2000);
    };
};

原理很简单，就是使用setTimeout延迟执行，如果尚未执行完毕，则直接返回。

应用如下：

window.onresize = this.throttle(function () {
    console.log(new Date().toLocaleTimeString());
});

效果还是很明显的：

浏览器日志