无法将 VueApexCharts 组件正确包含到应用程序中

如何解决无法将 VueApexCharts 组件正确包含到应用程序中

我试图使用 VueApexCharts 在我的 VueJS 应用程序中显示一些图表。它们已正确安装，已添加到 node_modules 目录中，并且导入不会引起任何问题。

主文件 App.vue 包含以下代码：

<script>
import HelloWorld from './components/HelloWorld';

export default {
  name: 'App',components: {
    HelloWorld,},data: () => ({
    //
  }),};
</script>

那么，HelloWorld.vue 组件是这样定义的：

<script>
  import { ApexCharts } from 'apexcharts'

  export default {
    name: 'HelloWorld',components: {
      apexchart: ApexCharts
    },data () {
      return {
        series: [{
          name: "Desktops",data: [10,41,35,51,62,60,52,74,91,128]
        }],chartOptions: {
          chart: {
            height: 350,type: 'line',zoom: {
              enabled: false
            }
          },dataLabels: {
            enabled: false
          },stroke: {
            curve: 'straight'
          },title: {
            text: 'Product Trends by Month',align: 'left'
          },grid: {
            row: {
              colors: ['#f3f3f3','transparent'],opacity: .5
            }
          },xaxis: {
            categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct']
          }
        },[...]
    }
</script>

在 HelloWorld.vue 的模板中有图表：

<apexchart
  type="line"
  height="350"
  :options="chartOptions"
  :series="series"
></apexchart>

就是这样，在 main.js 中没有关于 VueApexCharts 的内容，它们被导入到上面的文件中。

但是，我收到此警告，当然不会显示任何图表：

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

found in

---> <HelloWorld> at src/components/HelloWorld.vue
       <VMain>
         <VApp>
           <App> at src/App.vue
             <Root>

在官方文档中，我看到以下条目：

new Vue({
        el: '#app',components: {
          apexchart: VueApexCharts,data: {
          [...]

我也尝试将组件命名为 VueApexCharts，如上面的示例，但它也不起作用。除此之外，node_modules/apexcharts 中的类称为 ApexCharts。

我的标记有什么不正确的地方？如何让它正常工作？

解决方法

我在 official docs related to VueJS 集成中找到了非常有用的信息。

简而言之，有ApexCharts和VueApexCharts，两者都要安装：

npm install --save apexcharts
npm install --save vue-apexcharts

安装成功后，我在 main.js 中添加了以下条目：

import VueApexCharts from 'vue-apexcharts'
Vue.use(VueApexCharts)

Vue.component('apexchart',VueApexCharts)

完成此操作后，您可以在整个应用程序中使用您的 <apexchart> 组件（我必须先从 HelloWorld.vue 中删除导入，以确保库仅在一个地方导入） .