Javascript 无法在vue组件中包含高位图表

您好，我正在尝试将highcharts包含在组件中的vue cli代码中。但我得到的是“未知自定义元素：-是否正确注册了组件？”对于递归组件，请确保在控制台中提供“name”选项

我使用以下命令安装了highcharts

npm安装--保存highcharts

npm安装highcharts vue

有没有什么我做错了或遗漏了什么

Home.vue

<template>
<div class="col-md-9 chartDiv">
  <h4 align='center'>{{ tableChart.title2 }}</h4>
  <div class="col-md-12">
    {{tableChart.chartOption}}
    <div class="chart-size center-block">
      <highcharts name="highcharts" v-bind:options="tableChart.chartOption" 
        ref="highcharts" charttype="highchart"></highcharts>
    </div>
  </div>
</div>
</template>

<script>
export default {
name: 'HomePage',
props: {
tableChart: {
  type: Object,
  required: false
}
},
data: function() {
return this.tableChart;
 }
};
</script>

App.vue

<template>
<div id="app">
<home-page v-bind:table-chart="tableData"></home-page>
</div>
</template>
<script>
import HomePage from './components/HomePage.vue';
import tableData2018 from './dataSource.js';
export default {
 name: 'app',
 components: {
   HomePage
 },
 data: function() {
  return {
    years: [2018, 2019, 2020],
    tableData: {}
  }
 },
methods: {
 initReport: function() {
  this.tableData = JSON.parse(tableData2018);
  }
},
created: function() {
  this.initReport();
}
};

Home.vue
{{tableChart.title2}}
{{tableChart.chartOption}}
导出默认值{
名称：'主页'，
道具：{
图表：{
类型：对象，
必填项：false
}
},
数据：函数（）{
返回此.tableChart；
}
};
App.vue
从“./components/HomePage.vue”导入主页；
从“./dataSource.js”导入tableData2018；
导出默认值{
名称：“应用程序”，
组成部分：{
主页
},
数据：函数（）{
返回{
年份：[2018年、2019年、2020年]，
tableData:{}
}
},
方法：{
initReport:function（）{
this.tableData=JSON.parse（tableData2018）；
}
},
已创建：函数（）{
这个.initReport（）；
}
};

main.js
从“Vue”导入Vue；
从“/App.vue”导入应用程序；
Vue.config.productionTip=false；
新Vue({
渲染：h=>h（应用程序），
}).$mount（“#app”）；
dataSource.js
{“chartOption”：{“chart”：{“plotBorderWidth”：1，“type”：“bubble”，“zoomType”：“xy”}，“credits”：{“enabled”：true，“href”：“#”；“position”：{“align”：“right”，“verticalAlign”：“bottom”，“y”：-10}，“text”：“www.highcharts.com”}，“exporting”：{“enabled”：false，“filename”：“exportChart”，“type”：“image/svg+xml”，“url”：http://export.highcharts.com.，“宽度”：600}，“图例”：{”对齐“：”中心“，”启用“：”0“，”浮动“：”假“，”布局“：”垂直“，”垂直对齐“：”底部“，”x“：”0，“y“，”0“，”绘图选项“：{”系列“：”真“，”格式“，”{点.名称}，}，，”系列“：[{”数据“：”：“{”描述“：”名称“：”名称“：”xcode”，“x“，”1.02，“y”：577039，“z“：”4092}]，”文本“，”工具提示“：{”标题“{”文本“：”假“，”页脚格式“：”“，”headerFormat:“，”pointFormat:“{point.description}AdjustedReadmissions/ExpectedReadmissions:{point.x}Expected罚则：${point.y}索引允许：{point.z}”，“useHTML:”1}，“xAxis:{”gridLineWidth:“1”，“标签：{”格式：“{值：“}”，绘图线：“{”颜色：“，”黑色”，“dashStyle:“点”，“值：”，“宽度”：2，“zIndex”：3}]，“tickmarkPlacement:”标题：“：”文本”：“AdjustedReadmissions/ExpectedReadmissions”}，yAxis:{“标签”：{“格式”：“{value}”，showFirstLabel:false，“标题”：{“文本”：“Expected罚则”}}

在main.js文件中，您应该导入

highcharts vue

并在调用

新vue（）之前加载它。

main.js:

import Vue from "vue";
import App from "./App";
import HighchartsVue from "highcharts-vue";

Vue.config.productionTip = false;

Vue.use(HighchartsVue);

new Vue({
  el: "#app",
  components: { App },
  template: "<App/>"
});

从“Vue”导入Vue；
从“/App”导入应用程序；
从“highcharts vue”导入HighchartsVue；
Vue.config.productionTip=false；
Vue.use（HighchartsVue）；
新Vue({
el:“应用程序”，
组件：{App}，
模板：“
谢谢，它可以工作。我试图在highcharts中包含气泡图，但得到错误“挂载钩子中的错误：”错误：highcharts错误#17:www.highcharts.com/errors/17“"Highcharts错误#17请求的系列类型不存在此错误发生在您将chart.type或series.type设置为Highcharts中未定义的系列类型时。典型原因可能是您缺少定义系列类型的扩展文件，例如，为了运行需要加载hi的arearange系列ghcharts-more.js文件。如何克服此问题您必须加载
highcharts more
模块并对其进行初始化。文档：。导入：
从“highcharts/highcharts more”导入highcharts more
并初始化：
highcharts more（highcharts）；
。如果您觉得我的答案有帮助，请进行投票，谢谢。
import Vue from "vue";
import App from "./App";
import HighchartsVue from "highcharts-vue";

Vue.config.productionTip = false;

Vue.use(HighchartsVue);

new Vue({
  el: "#app",
  components: { App },
  template: "<App/>"
});