highcharts 自适应div的宽度

如果窗口变化时，highcharts图表是自带自适应的，但是切换折叠菜单时，highchats图表并不自适应外层div的宽度。如何实现适应div的宽度？

在网上找到有个 reflow 的方法，我是在项目中引入的 highcharts-vue ，问题在于使用了highcharts-vue 如何获取图表对象

代码语言：javascript复制

<highcharts id="chart" :options="chartOptions1" style="height:250px" ref="chart1"></highcharts>

获取图表对象---this.$refs.chart1.chart

自适应宽度方法 --  this.$refs.chart1.chart.reflow()

完整的流程

一、点击折叠按钮时store中保存折叠状态

代码语言：javascript复制

<i class="fa fa-bars collapseBtn" style="margin-left:20px;color:#a3fbc3;" @click="handleCollapseClick"></i>

代码语言：javascript复制

    handleCollapseClick() {
      this.isCollapse = !this.isCollapse;
      this.$store.commit("saveCollapse",this.isCollapse)
      this.asideWidth = this.asideWidth == "220px" ? "66px" : "220px";
    },

代码语言：javascript复制

    saveCollapse(state, isCollapse) {
      state.isCollapse = isCollapse
    },

二、在页面中监听当前菜单折叠状态并执行reflow()方法

代码语言：javascript复制

  watch: {
    isCollapse(newVal, oldVal) {
      console.log(newVal);
      this.$refs.chart1.chart.reflow()
      this.$refs.chart2.chart.reflow()
      //HighCharts.charts[0].reflow();
      //HighCharts.charts[1].reflow();
    }
  },

highcharts vue.js node.js

0 人点赞