highcharts 自适应div的宽度

tianyawhl

发布于 2020-07-14 11:17:54

3K0

发布于 2020-07-14 11:17:54

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

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

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

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

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

完整的流程

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

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

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

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

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

  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();
    }
  },

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

highcharts