echarts大小自适应，width=100%实际100px的问题

分手后的思念是犯贱 2022-09-07 12:27 256阅读 0赞

# 1. echarts大小自适应 #

**1. 首先要在data中定义一个为null的空值，用来保存你实例化图表的对象**

data() {
        return {
          // echarts图表
          myCharts: null,
          // 获取网页可见区域宽
          screenWidth: document.body.clientWidth,
        };
      },

**2. 在mounted生命周期中定义新的onresize函数，获取当前的窗口大小，并将值赋值给data中定义的screenWidth，这样在watch中就可以监听到屏幕宽度的变化**

mounted() {
        window.onresize = () => {
          return (() => {
            window.screenWidth = document.body.clientWidth;
            this.screenWidth = window.screenWidth;
          })();
        };
      },

**3. 在watch中监听浏览器屏幕宽度的变化，改变时，使echarts图表resize**

**也可以在进行其他操作时，重新改变图形的大小**

watch: {
        '$store.state.app.sidebar.opened'() {
          setTimeout(() => {
            // 避免第一次进入页面中，图标没有初始化，人后resize报错的问题
            this.myCharts && this.myCharts.resize();
          }, 300);
        },
        screenWidth: {
          immediate: true,
          handler: function(val) {
            this.screenWidth = val;
            setTimeout(() => {
              // 避免第一次进入页面中，图标没有初始化，人后resize报错的问题
              this.myCharts && this.myCharts.resize();
            }, 300);
          },
        },
      },

# **2. width=100%实际100px的问题** #

**这个原因是因为图形尚未被加载出来，不知道父元素的宽高，一般出现这种问题是因为，设置了v-show或者tab页，echarts图表在没有显示的tab页里**

**这种使用一般使用$nextTick，dom元素加载完成后再进行图表初始化**

this.$nextTick(() => {
              // 初始化echarts图表
              this.initCharts();
            });