不能在 vue 组件中包含高位图表

Question

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

我已经使用以下命令安装了 highcharts

npm install --save highcharts

npm install 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();
}
};

main.js

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
 render: h => h(App),
 }).$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.","width":600},"legend":{"align":"center","enabled":0,"floating":false,"layout":"vertical","verticalAlign":"bottom","x":0,"y":0,"z":0},"plotOptions":{"series":{"dataLabels":{"enabled":true,"format":"{point.name}"}}},"series":[{"data":[{"description":"Name","name":"xcode","x":1.02,"y":577039,"z":4092}]}],"title":{"text":""},"tooltip":{"followPointer":false,"footerFormat":"</table>","headerFormat":"<table>","pointFormat":"<tr><thcolspan=2><h5>{point.description}</h5></th></tr><tr><th>AdjustedReadmissions/ExpectedReadmissions:</th><td>{point.x}</td></tr><tr><th>ExpectedPenalty:</th><td>${point.y}</td></tr><tr><th>Index Admissions:</th><td>{point.z}</td></tr>","useHTML":1},"xAxis":{"gridLineWidth":1,"labels":{"format":"{value}"},"plotLines":[{"color":"black","dashStyle":"dot","value":1,"width":2,"zIndex":3}],"tickmarkPlacement":"on","title":{"text":"AdjustedReadmissions/ExpectedReadmissions"}},"yAxis":{"labels":{"format":"{value}"},"showFirstLabel":false,"title":{"text":"ExpectedPenalty"}}}}

Answer 1

在您的 main.js 文件中，您应该导入 highcharts-vue 并在调用 new Vue() 之前加载它

ma​​in.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/>"
});

演示：

• https://codesandbox.io/s/4p8xw74y9