4

我正在尝试使用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>
4

2 回答 2

13

您正在导入错误的库。

代替

import VueApexCharts from 'apexcharts'

它应该是

import VueApexCharts from 'vue-apexcharts'
于 2019-07-11T07:28:47.897 回答
0

同样的问题，它缺少正确的导入，就像提到的@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>
于 2020-06-11T19:45:06.897 回答