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

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

vue.js

Vue.js Vue中的Apex图表不显示任何图表，即使是教程中的图表,vue.js,apexcharts,Vue.js,Apexcharts,我是vue开发的新手，我正在尝试显示一个包含4个图表的页面。我希望它们以2x2格式显示，因此2个相邻，另一个在它们下面，也彼此相邻我已经开始尝试做第一个，它是一个“带有数据标签的列”，如这里所示我已经用npm安装apexcharts安装了模块——保存我用visualstudio代码创建了两个文件这是index.html <html> <head> <meta charset="utf-8"> <title&

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

我已经开始尝试做第一个，它是一个“带有数据标签的列”，如这里所示

我已经用npm安装apexcharts安装了模块——保存

我用visualstudio代码创建了两个文件

这是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>

当我执行npm运行服务时，它运行，但不显示图表。我在F12显示的控制台中得到“未捕获引用错误：未定义VueAppCharts”

我还尝试在app.js文件中添加

import-ApexCharts from'ApexCharts'

，但随后我得到了“Uncaught-SyntaxError:无法在模块外使用import语句”

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

有人可以帮忙吗？

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

从“vue-apexcharts”导入VueAppExCharts

如果在浏览器环境中直接使用Vue，则需要包含以下两个脚本

关于如何使用，您可以参考本完整指南

您可能还想查看网站上使用的源代码，

您好，我正在使用浏览器，所以我在index.html文件中添加了这两行，但我仍然无法确定VueAppExCharts。我找到了在代码中放置第一行（导入…）的位置。谢谢

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


    },

  })