VUE：echarts如何适应宽度【附封装的简单柱状图组件页面参数设置】

前端-如此如此。

已于 2022-05-11 16:39:30 修改

阅读量1.7k

点赞数 2

分类专栏： echarts 文章标签： vue echarts

于 2021-06-30 11:30:30 首次发布

本文链接：https://blog.csdn.net/weixin_44136505/article/details/118356641

版权

本文介绍了如何使Echarts图表在Vue应用中自适应窗口宽度变化，通过在`app.vue`中监听`window.onresize`事件，结合Vuex更新图表容器的宽高，并在Echarts组件内部响应宽高变化重新初始化图表尺寸。同时强调了Echarts容器需使用百分比宽度以实现自适应效果。

摘要由CSDN通过智能技术生成

简介

在使用echarts时，发现它不是自适应的。
比如浏览器全屏时打开了有echarts的页面，加载完后，缩小窗口，就会很奇怪，所以研究了一下怎么实现主动适应。
在这里插入图片描述

具体实现

在app.vue中通过window.onresize事件进行实时存储值，vuex中写一个数字++的方法

// app.vue
  // 初始化数据
  initDataFun() {
   
    // 监听屏幕高度、宽度变化，同步存储高度、宽度
    window.onresize = () => {
   
      return (() => {
   
          this.$store.commit('common/SET_WINDOW_ONRESIZE'); // 通知网页内容区域可视化宽高有变化
      })();
    };
  }

// vuex
  const state = {
   
    windowOnResizeNum: 0
  }
  const mutations = {
   
    // 通知浏览器宽高有变化
    SET_WINDOW_ONRESIZE: (state) => {
   
      state.windowOnResizeNum++;
    }
  }

在echarts组件中引入vuex存储的宽高值，并进行监听，
宽高值有变化时，重新初始化echarts的大小
**

注意：echarts所在dom容器，宽度需要百分比，高度看使用情况

**，否则还要什么适应宽度呢？

之所以dom用的ref，是因为这是封装的组件，就不能用id（id全局唯一）。

// echarts组件
import {
    mapGetters } from 'vuex';
export default {
   
  watch: {
   
    // 监听浏览器可视区域宽高是否变化
    windowOnResizeNum() {
   
      this.resizeByWindowFun(); // 初始化echarts图表大小
    },
  },
  computed: {
   
    ...mapGetters(['screenHeight'