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所示的控制台中收到“ Uncaught ReferenceError：VueApexCharts未定义”。

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

我真的不知道我在想什么。

有人可以帮忙吗？

Answer 1

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

import VueApexCharts from 'vue-apexcharts'

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

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

您可以参考完整的指南，了解如何使用vue-apexcharts。

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

Vue中的Apex图表未显示任何图表，即使在教程中也未显示

1 个答案: