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

Question

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

我已经开始尝试做第一个 "Column with Data Labels"，因为它可以在这里看到 https://apexcharts.com/vue-chart-demos/column-charts/column-with-data-labels/。

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

我用 Visual Studio 代码制作了两个文件。

这是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 运行服务时，它运行s 但没有显示图表。我在 F12 显示的控制台中得到 "Uncaught ReferenceError: VueApexCharts is not defined"。

我也尝试在 app.js 文件中添加 import ApexCharts from 'apexcharts' 但后来我得到 "Uncaught SyntaxError: Cannot use import statement outside a module".

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

有人可以帮忙吗？

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 的来源，

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

Apex Charts in Vue not showing any chart, even the ones in the tutorial

vue.js

apexcharts