专栏首页前端之攻略highcharts 自适应div的宽度

highcharts 自适应div的宽度

如果窗口变化时,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();
    }
  },

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • threejs 场景切换 优化性能

    是实现2个场景的定时切换,由于是用在大屏系统,需要浏览器一直能正常运行,不能运行一段时间卡死

    tianyawhl
  • Element Tabs 标签页 展示Echart 并随窗口变化自适应

    1、如何在一个div中展示不同的图表  (点击tab时为Chart组件赋值,并传给子组件,子组件监听数据变化并在 $nextTick 中重新绘制表格)

    tianyawhl
  • vue 中使用threejs

    tianyawhl
  • RocketMQ学习-消息发布和订阅

    前面一篇文章分析了broker的启动过程,浏览了broker的基本功能。接下来的几篇文章,准备按照十分钟入门RocketMQ一文中提到的一系列特性,依次进行学习...

    阿杜
  • Flutter基础widgets教程-Tooltip篇

    青年码农
  • c# winform 窗体最大化后挡住了任务栏

    zls365
  • React源码分析与实现(二):状态、属性更新 -> setState

    setState的源码比较简单,而在执行更新的过程比较复杂。我们直接跟着源码一点一点屡清楚。

    Nealyang
  • element表单校验问题

    新增时,校验为空未通过,点击取消按钮。重新打开编辑,明明有值,显示校验未通过。

    崔笑颜
  • bug 回忆录(四)

    @author Ken @time 2020-09-27 21:30:59 @description 转载请备注出处,谢谢

    公众号---志学Python
  • Button按钮--inject与provide

    inject 和 provider 是vue中的组合选项,需要一起使用。目的是允许一个祖先组件向其所有子孙后代注入依赖(简单地说就是祖先组件向子孙后代传值的一种...

    用户1148399

扫码关注云+社区

领取腾讯云代金券