如何将ApexCharts与Vue.js集成-详细指南

图表是应用程序向用户显示信息/数据的一种方法。在本文中，我将向你精确演示如何使用Vue-apexcharts。

从头开始

使用Vue CLI，我们可以轻松创建启动程序。首先，我们需要使用以下命令安装Vue CLI。如果已安装，则可以跳过此步骤。注意：要使用CLI，你需要安装Node.js-8或更高的版本（建议使用8.10.0+）。要安装CLI，请在终端中运行以下命令：

现在，我们可以使用它来创建我们的项目。我们将使用以下命令创建项目：

然后，系统将提示你选择默认预设或手动选择功能的选项。选择default。将创建一个新的项目目录，你可以使用以下命令导航到该目录：

安装Apexcharts

ApexCharts是一个现代的图表库，可帮助开发人员为网页创建漂亮的交互式可视化文件。我们可以通过集成其针对Vue的组件vue-apexcharts来轻松地将ApexCharts与我们的Vue应用程序一起使用。使用下面的命令为我们的应用程序安装vue-apexcharts组件：

配置vue-apexcharts

现在我们已经安装了vue-apexcharts。打开src目录并创建一个名为的新目录plugins。在新的插件目录中，创建一个名为的文件apexcharts.js。

接下来，为顶点图表创建Vue组件apexcharts.js。让组件在我们的应用程序中全局可用。

为此，我们将同时导入Vue和vue-apexcharts。接下来，我们将创建一个名为全局组件的apexchart。这是apexcharts.js文件：

导入我们的插件文件

我们必须让Vue知道我们刚刚创建的文件。为此，我们将其导入main.js文件中。打开main.js文件，并在最后一个import语句之后添加以下行：

现在我们准备创建我们的第一个图表。

创建我们的第一个图表

我们在Hello World组件中创建图表。当我们使用Vue CLI创建应用程序时，会自动创建此组件。打开文件Hello World.vue并删除里面所有的演示代码。你的文件应如下所示：

记住，在我们的插件中，我们称它为component apexchart。

Vue-Apexcharts通过使用工具传递给你的数据来构建图表，如以下代码所示。我们将使用它为我们的第一个图表创建HTML。在第一个示例中，我们将从一个非常基本的条形图开始。

如你在上面的模板中看到的，该apexchart组件包含4个道具。现在，让我们跳到脚本部分。

解释图表数据

你可以使用以下命令启动服务器：

现在，打开浏览器到localhost：8080，你应该看到图表：

打造我们的图表

我们可以将图表放在页面的中心。为此，我将chart-wrapper在div中添加一个类。我还想将图表的宽度增加到800px。我的模板现在如下所示：

接下来，让我们为新chart-wrapper类添加一些样式，这些样式会将我们的图表放置在页面的中心。这是我添加的样式：

在添加样式时，我想用标题替换Vue的徽标。打开App.vue文件。删除标记并将其替换为：

现在，我们的图表如下所示：

添加标题并更改图表颜色

我们可以在条形图中添加标题以添加更多上下文，并解释该图的意思。要将标题添加到我们的条形图中，请返回到HelloWorld.vue组件并将标题添加到该options对象。

默认情况下，标题位于条形图的左侧。这是我们的图表现在的样子：

让我们通过添加自己的自定义样式来更改默认行为。我希望标题的字体更大并居中。标题对象具有一个称为的属性align，它代表水平面。我希望标题以此为中心。为了使标题具有更大的字体，我们需要添加一个style选项。另外，我们可以将条形图设置为其他颜色。这是现在的options样子：

这是条形图现在的样子：

创建折线图

首先，我们需要创建一个新的chart-wrapper div和一个新的apexchart元素。新的apexchart元素会像前面的示例一样保留。但是这里有趣的是，你需要做的就是将type模板中的prop更改为line。这是我的HTML代码现在的样子：

现在，我们有以下折线图：

最后

图表帮助我们可视化数据并帮助用户查看数据并与之交互。将ApexCharts集成到你的Vue应用程序就像你在上面看到的一样容易。