Question

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

我已经使用以下命令安装了高级图表

npm install-保存高级图表

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

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()

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/>"
});

演示：

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

Vue组件中不能包含高图表

1 个答案: