注意！！一定要记得清除监听事件！！不然在别的页面会报错

情景一：未封装组件

参考事例请见这篇博客：https://blog.csdn.net/weixin_44171757/article/details/121948036

情景二：封装了组件

在封装的vue组件内使用reflow()

<template>
  <div class="x-bar" style="width: 100%">
    <div :id="id" :style="setStyle()" :option="option" style="width: 100%" />
  </div>
</template>
<script>
import $ from 'jquery'
import HighCharts from 'highcharts'
import highchartsMore from 'highcharts/highcharts-more'
import gantt from 'highcharts/modules/gantt'
import solidgauge from 'highcharts/modules/solid-gauge'
highchartsMore(HighCharts)
solidgauge(HighCharts)
gantt(HighCharts)
export default {
  // 验证类型
  props: {
    height: {
      type: Number,
      default: 310
    },
    width: {
      type: Number,
      default: 310
    },
    id: {
      type: String,
      default: ''
    },
    option: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    option(val) {
      HighCharts.chart(this.id, this.option)
    }
  },
  mounted() {
    this.chart = HighCharts.chart(this.id, this.option)
    $(window).on('resize', this.reflow)
  },
  beforeDestroy() {
    $(window).off('resize')
  },
  methods: {
    reflow() {
      HighCharts.chart(this.id, this.option).reflow()
    },
    setStyle() {
      return {
        height: this.height + 'px'
      }
    },
    refresh() {
      if (this.id == 'gradeCharts') {
        HighCharts.chart(this.id, this.option)
      } else {
        HighCharts.chart(this.id, this.option)
      }
    }
  }
}
</script>

<style scoped>
</style>