Vue 中的 Apex 图表没有显示任何图表，即使是教程中的图表

Question

我是 vue 开发的新手，我正在尝试显示一个包含 4 个图表的页面。我希望它们以 2x2 格式显示，因此 2 个彼此相邻，另一个在它们下方，彼此也是一个。

我已经开始尝试做第一个，它是“带有数据标签的列”，可以在此处看到 https://apexcharts.com/vue-chart-demos/column-charts/column-with-data-labels/。

我已经使用 npm install apexcharts --save 安装了模块。

我在 Visual Studio Code 中制作了两个文件。

这是 index.html

<html>
    <head>
        <meta charset="utf-8">
        <title>Vue JS Tutorial</title>
        <link href="styles.css" rel="stylesheet"/>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>

        <div id="chart">
            <apexchart type="pie" width="380" :options="chartOptions" :series="series"></apexchart>
          </div>



        <script src="app.js"></script>
    </body>
</html>

这是 app.js

new Vue({
    el: '#app',
    components: {
      apexchart: VueApexCharts,
    },
    data: {

      series: [{
        name: 'Inflation',
        data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
      }],
      chartOptions: {
        chart: {
          height: 350,
          type: 'bar',
        },
        plotOptions: {
          bar: {
            dataLabels: {
              position: 'top', // top, center, bottom
            },
          }
        },
        dataLabels: {
          enabled: true,
          formatter: function (val) {
            return val + "%";
          },
          offsetY: -10,
          style: {
            fontSize: '12px',
            colors: ["#304758"]
          }
        },

        xaxis: {
          categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
          position: 'top',
          axisBorder: {
            show: false
          },
          axisTicks: {
            show: false
          },
          crosshairs: {
            fill: {
              type: 'gradient',
              gradient: {
                colorFrom: '#D8E3F0',
                colorTo: '#BED1E6',
                stops: [0, 100],
                opacityFrom: 0.4,
                opacityTo: 0.5,
              }
            }
          },
          tooltip: {
            enabled: true,
          }
        },
        yaxis: {
          axisBorder: {
            show: false
          },
          axisTicks: {
            show: false,
          },
          labels: {
            show: false,
            formatter: function (val) {
              return val + "%";
            }
          }

        },
        title: {
          text: 'Monthly Inflation in Argentina, 2002',
          floating: true,
          offsetY: 330,
          align: 'center',
          style: {
            color: '#444'
          }
        }
      },


    },

  })

当我执行 npm run serve 时，它​​会运行但没有显示图表。我在 F12 显示的控制台中收到“未捕获的 ReferenceError：未定义 VueApexCharts”。

我还尝试在 app.js 文件中添加 import ApexCharts from 'apexcharts'，但随后出现“未捕获的语法错误：无法在模块外使用 import 语句”。

我真的不知道我错过了什么。

有人可以帮忙吗？

Answer 1

如果您使用的是模块系统，则缺少导入行

import VueApexCharts from 'vue-apexcharts'

如果你是在浏览器环境中直接使用Vue，则需要包含这2个脚本

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>

关于如何使用vue-apexcharts，您可以参考这份完整指南。

您可能还想查看网站上使用的samples 的来源，