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

Question

我试图使用 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中的class被称为ApexCharts。

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

Answer 1

我在 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 中删除导入，以确保只在一个应用程序中导入该库地方）。

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

Can't get VueApexCharts component properly included into app

vue.js

vuejs2

apexcharts