图表是应用程序向用户显示信息/数据的一种方法。在本文中,我将向你精确演示如何使用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应用程序就像你在上面看到的一样容易。
领取专属 10元无门槛券
私享最新 技术干货