echarts动态改变图表的大小

echarts动态改变图表的大小

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的方式即可解决

本文里并未对resize的监听进行优化，会导致页面中如果图表过多，浏览器卡顿的情况，针对resize的函数节流，请看我的另一篇文章