Vue：无法将 class 作为函数调用 Apex

Question

我正在尝试使用 ApexCharts 向我的网站添加饼图。我从他们的网站复制了源代码，但我在网站的控制台中收到错误 "Cannot call a class as a function"。

当我删除这一行时，错误消失了：

<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'

Answer 2

同样的问题，它缺少正确的导入，就像提到的@junedchhipa。

虽然安装页面 (https://apexcharts.com/docs/installation/) 说要安装和导入 apexcharts，但对于 vue.js 我们需要安装 vue-apexcharts（这取决于 apexcharts, 所以两者都安装).

最后，只导入 vue-apexcharts。我的最终组件代码（遵循基本折线图示例）如下所示：它应该无需进一步配置即可工作 =).


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

<script>
import VueApexCharts from 'vue-apexcharts'

export default {

  name: 'MyComponent',

  components: {
    'apexchart': VueApexCharts'
  }

  data: () => ({
    series: [{
      name: 'Desktops',
      data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
    }],
    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'], // takes an array which will be repeated on columns
          opacity: 0.5
        },
      },
      xaxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
      }
    },
  })

}
</script>

Vue：无法将 class 作为函数调用 Apex

Vue: Cannot call a class as a function Apex

vue.js

apexcharts