如何在Vue CLI项目中访问highcharts-vue封装组件的原生方法

你可以通过两种成熟的方式获取Highcharts原生实例，直接调用所有官方提供的原生方法，和CDN引入的用法完全一致：

方案1：通过ref属性直接获取组件实例 #

1. 给模板中的highcharts组件添加ref标识：

<highcharts
  v-if="isLoaded"
  ref="highchartsComponent"
  :options="chartOptions2"
  :callback="myCallback"
></highcharts>

2. 需要调用原生方法时，直接从ref中取出原生实例调用即可：

// 销毁图表
this.$refs.highchartsComponent?.chart.destroy()
// 重绘图表
this.$refs.highchartsComponent?.chart.redraw()
// 更新图表配置后刷新
this.$refs.highchartsComponent?.chart.update(newChartOptions, true)

注意?.为可选链运算符，避免组件未渲染完成时调用报错，低版本JS环境可以改为先判断if (this.$refs.highchartsComponent)再调用方法。

方案2：通过已配置的callback回调存储实例 #

你已经在组件上绑定了callback参数，直接利用该回调存储原生实例即可，不需要额外修改模板：

1. 在当前组件的data中新增字段存储实例：

data() {
  return {
    // 原有其他配置
    highchartsIns: null
  }
}

2. 实现myCallback方法，接收并存储实例：

methods: {
  myCallback(chart) {
    this.highchartsIns = chart
    // 此处可以直接执行初始化完成后的逻辑
  }
}

3. 后续任意位置直接调用原生方法即可：

// 销毁图表
this.highchartsIns?.destroy()
// 重绘图表
this.highchartsIns?.redraw()
// 全量更新配置重建图表
this.highchartsIns?.update(brandNewOptions, true)

两种方案拿到的都是官方原生的Highcharts实例，所有文档中的原生方法都可以直接调用，没有额外的适配成本。

内容的提问来源于stack exchange，提问作者Gilson401