Vue 3项目中使用HighchartsVue时调用Highcharts.dateFormat()报引用错误的问题求助

嗨，这个问题我之前也碰到过！你现在的情况是虽然通过use(HighchartsVue)注册了组件，能正常用<highcharts>标签，但这只是让Vue识别了Highcharts的组件，核心的Highcharts全局对象并没有被自动引入到你的组件作用域里，所以直接调用Highcharts.dateFormat()才会报引用错误。

给你两个简单的解决办法，适配Options API的场景：

• 方法一：在需要用到的组件里直接引入Highcharts核心库
  在你的组件<script>标签开头加上：

  import Highcharts from 'highcharts'
  

  之后在tooltip的formatter里就能正常调用Highcharts.dateFormat()了，就是你原来写的那种写法，不会再报错。

• 方法二：把Highcharts挂载到组件实例上（方便多处复用）
  如果你的组件里多处需要用到Highcharts的API，可以把它挂载到组件的data里：

  import Highcharts from 'highcharts'
  
  export default {
    data() {
      return {
        Highcharts: Highcharts
      }
    },
    // 注意：在Highcharts的配置函数（比如formatter）里，this指向的是Highcharts上下文而非Vue组件实例
    // 所以如果要在这里用this.Highcharts，需要提前把Vue的this存起来，比如：
    // mounted() {
    //   const vm = this
    //   this.chartOptions = {
    //     tooltip: {
    //       formatter: function() {
    //         return 'Amount' + vm.Highcharts.dateFormat('%e %b %Y', this.x);
    //       }
    //     }
    //   }
    // }
  }
  

简单来说，HighchartsVue只是个组件封装层，要用到Highcharts本身的工具方法、原生API，必须手动引入核心的Highcharts库才行～

备注：内容来源于stack exchange，提问作者GAkino