当元素的宽高发生变化，ehcarts也要变化

小皮皮不皮

已于 2024-02-01 09:49:37 修改

阅读量359

点赞数

CC 4.0 BY-SA版权

文章标签： echarts 前端 javascript

于 2023-05-04 09:47:40 首次发布

本文链接：https://blog.youkuaiyun.com/fengxiaopeng74/article/details/130480766

文章介绍了在Vue.js项目中，如何处理Echarts图表在元素宽高变化（如展开收起功能）时进行自适应重绘。通过创建一个自定义指令`v-resize`，监听元素尺寸变化，并在尺寸改变时调用Echarts的`resize`方法来更新图表。同时，文章提到了根据`rem`调整Echarts内字体大小以及窗口resize事件的处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般我们在项目遇到的是当浏览器窗口发生变化需要echarts来自适应，但是还有一种情况就是在线项目中，当我们有展开收起类似的功能导致某些元素的宽高发生了变化，echarts要随着该元素的大小来显示，这个时候我们需要检测生成该元素的宽高只要发生变化就重新渲染一下来实现撑满该模块

比如图片中，点击按钮左右两侧收起，中间展开，这时我们的ehcarts也要变化，

以前发过一些echarts的自适应，比如根据保存的自定义的字体值rem来改变echarts内部的一下字体和元素大小，还有

 window.addEventListener("resize", () => {
     // 重新渲染echarts
    });

但是都不满足项目中的条件，所以还需要加一个事件检测渲染echarts的div元素宽高

我们创建一个js文件（具体哪个位置看个人习惯）

//将该代码定义为一个js文件
let resize = {
    bind(el,binding) {
        let width = '', height = '';
        function isResize() {
            const style = document.defaultView.getComputedStyle(el);
            if (width !== style.width || height !== style.height) {
                binding.value();
            }
            width = style.width;
            height = style.height;
        }
        el._vueSetInterval_ = setInterval(isResize,100);
    },
    unbind(el) {
        clearInterval(el._vueSetInterval_);
    }
}
export default resize;

然后在我们的echarts组件中引用并使用

<template> 
  <div v-resize="resizeEchart">标签上使用该事件</div> 
</template>
<script> 
import resize from "@/assets/js/resize"; // 引用该js
export default {
  props: {
    chartData: {
      type: Array,
      default: () => {
        return []
      },
    }, 
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.autoChart();
      },
    }, 
  },
  directives: {
    resize
  },
  data() {
    return { 
      echartFontSize: 0, // 字体大小
      thisChart: null,
    };
  },
  mounted() {
    this.autoChart();
    window.addEventListener("resize", () => {
      this.autoChart(); // 只要窗口发生变化echarts也变化
    });
  }, 
  methods: {
    resizeEchart(){
    // 如果div的宽高发生了变化ehcart重新刷新一下
      this.thisChart.resize();
    },
    autoChart() {
      if (this.thisChart != null && this.thisChart != "" && this.thisChart != undefined)                     
      {
        this.thisChart.dispose();
      }
      this.thisChart = this.$echarts.init(this.$el);
      this.thisChart.clear();
      let thisOption = this.optionFn(this.chartData, this.option);
      this.thisChart.setOption(thisOption);
      this.thisChart.resize();
    },
  
    optionFn(chartData, chartOption) { 
      this.echartFontSize = sessionStorage.getItem("echartFont")
        ? sessionStorage.getItem("echartFont")
        : 1; // 根据保存设置字体rem来改变内部的字体大小或者某些位置和大小等等
      let xData = [];
      chartData.forEach(item => {
        xData.push(item.name);
      });

      let option = { };
      return option;
    },
  },
};
</script>

<style  scoped>
div {
  width: 100%;
  height: 100%;
}
</style>