element项目菜单折叠时echarts宽度自适应

最新推荐文章于 2025-09-11 20:04:01 发布

原创最新推荐文章于 2025-09-11 20:04:01 发布 · 2.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#菜单折叠时echarts自适应 #vue.js #echarts

vue.js 同时被 2 个专栏收录

24 篇文章

订阅专栏

echart

3 篇文章

订阅专栏

博客介绍了菜单折叠时ECharts自适应的实现原理。通过一个变量控制菜单的折叠展开，并将其存入vue - x。在ECharts渲染时，监听vue - x中的该变量，一旦有变化就使用charts.resize实现自适应，还提及上一篇已清晰介绍vue - x存变量。

首先说下原理菜单的折叠展开是由一个变量控制的将这个变量存入vue-x中点击改变状态就存入变量在echarts渲染的时候监听这个vue-x中存入的变量有变化即用charts.resize 就可以实现自适应啦就还是挺方便哒 vue-x的存变量我上一边介绍的很清晰：
点击折叠展开菜单触发的方法：

    //点击按钮折叠菜单
    toggleCollapse() {
      this.isCollapse = !this.isCollapse //点击折叠按钮后，对isCollapse进行取反
      this.$store.commit('setCollapsede',this.isCollapse); // 存入变量
    },

在echarts组件里面监听：

  computed: {
    isCollapsede() {
      return this.$store.state.menuStatus.isCollapsed
    },
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      },
    },
    isCollapsede(val) {
      setTimeout(() => {
        this.chart = echarts.init(this.$el, 'macarons');
        this.chart.resize();
      }, 300)
    },
  },

好啦接上一篇vue-x很全的 ~~~~~~~~~