javascript - highcharts-vue 给出有关 highcharts HTML 元素的错误

Question

我正在使用 vue 和 Highcharts-Vue插件，用于在我的项目中插入 Highcharts 图表。

按照说明操作here ，我首先安装它，然后全局注册它。我去我的main.js然后像这样添加

import Vue from 'vue'
import HighchartsVue from 'highcharts-vue'

new Vue({
  router,
  store,
  vuetify, 
  render: h => h(App)
}).$mount('#app')

Vue.use(HighchartsVue)

然后在我的组件(Hello.vue 文件)中，

<template>
  <div> 
    <highcharts :options="chartOptions"></highcharts>
  </div>
</template>

<script> 
    import { mapGetters, mapActions } from 'vuex';  
    export default {
        name:'Hello',        
        data(){
          return{   
            chartOptions: {
                series: [{
                data: [1,2,3] 
              }]
            }
          }
        }
    }
</script>

问题是，当我转到我的应用程序时，我可以看到图表，但在浏览器控制台中我得到

[Vue warn]: Unknown custom element: <highcharts> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

有什么帮助吗？我该如何调试这个？我是一个 Vue 初学者，我按照给出的说明进行操作，所以我很难找出哪里出了问题。

谢谢

Answer 1

您需要移动此行:

Vue.use(HighchartsVue)

在new Vue(...)之前。目前，您正在 Vue 渲染页面后注册它。