vue.js - Vue : Cannot call a class as a function Apex

Question

我正在尝试使用 ApexCharts 向我的网站添加饼图。我已经从他们的网站复制了源代码，但在我网站的控制台中收到错误“无法将类作为函数调用”。

删除此行时错误消失:

<vue-apex-charts type="pie" width="380" :options="chartOptions" :series="series"> </vue-apex-charts>

也许有一个小问题。

来自文件 PieChart.vue 的源代码

<template>
  <div id="chart">
    <vue-apex-charts type="pie" width="380" :options="chartOptions" :series="series"> </vue-apex-charts>
  </div>
</template>
<script>
import VueApexCharts from 'apexcharts'

export default {
  name: 'PieChart',
  components: { VueApexCharts },
  data () {
    return {
      series: [44, 55, 13, 43, 22],
      chartOptions: {
        labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
        responsive: [{
          breakpoint: 480,
          options: {
            chart: {
              width: 200
            },
            legend: {
              position: 'bottom'
            }
          }
        }]
      }
    }
  }
}
</script>

还有我的第二个文件，我在其中导入 PieChart.vue

<script>
import PieChart from '@/components/activities/PieChart.vue'

export default {
  name: 'Activities',

  components: { PieChart }

}
</script>

Answer 1

您正在导入错误的库。

代替

import VueApexCharts from 'apexcharts'

它应该是

import VueApexCharts from 'vue-apexcharts'