vue.js集成apexcharts
图表是向应用程序用户显示信息/数据的好方法。在本文中,我将向您精确演示如何使用vue-apexcharts。
入门
使用Vue CLI,我们可以轻松创建启动程序。首先,我们需要使用以下命令安装Vue CLI。如果已安装,则可以跳过此步骤。
注意:要使用CLI,您需要安装Node.js版本8或更高版本(建议使用8.10.0+)。
要安装CLI,请在终端中运行以下命令:
npm install @vue/cli
现在,我们可以使用它来创建我们的项目。我们将使用以下命令创建项目:
vue create vue-apexcharts-demo
然后,系统将提示您选择默认预设或手动选择功能的选项。选择default
。
将创建一个新的项目目录,您可以使用以下命令导航到该目录:
cd vue-apexcharts-demo
安装Apexcharts
在我们继续之前,您可能想知道…
什么是顶点图?
ApexCharts是一个现代的图表库,可帮助开发人员为网页创建漂亮的交互式可视化文件。您可以在此处查看他们的演示。
我们可以通过集成其针对Vue的包装组件vue-apexcharts来轻松地将ApexCharts与我们的Vue应用程序一起使用。
要在我们的应用程序中安装vue-apexcharts组件,请使用以下命令:
npm install --save apexcharts
npm install --save vue-apexcharts
配置vue-apexcharts
现在我们已经安装了vue-apexcharts,我们需要在应用程序中安装它。打开src
目录并创建一个名为的新目录plugins
。在新的插件目录中,创建一个名为的文件apexcharts.js
。
接下来,我们将在中为顶点图表创建Vue组件apexcharts.js
。这将使组件在我们的应用程序中全局可用。
为此,我们将同时导入Vue和vue-apexcharts。接下来,我们将创建一个名为的全局组件apexchart
。这是apexcharts.js
文件的外观:
import Vue from 'vue'
import VueApexCharts from 'vue-apexcharts'
Vue.component('apexchart', VueApexCharts)
导入我们的插件文件
我们必须让Vue知道我们刚刚创建的文件。为此,我们将其导入main.js
文件中。打开main.js文件,并在最后一个import语句之后添加以下行:
import '@/plugins/apexcharts'
现在我们准备创建我们的第一个图表。
创建我们的第一个图表
我们将在HelloWorld组件中创建图表。当我们使用Vue CLI创建应用程序时,会自动创建此组件。
打开文件HelloWorld.vue
并删除那里的所有演示代码。
您的文件应如下所示:
<template>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
<style scoped>
</style>
记住,在我们的插件中,我们称为component apexchart
。
Vue-Apexcharts通过使用道具传递给您的数据来构建图表,如以下代码所示。我们将使用它为我们的第一个图表创建HTML。在第一个示例中,我们将从一个非常基本的条形图开始。
<template>
<div>
<apexchart
width="500" type="bar"
:options="options" :series="series">
</apexchart>
</div>
</template>
如您在上面的模板中看到的,该apexchart
组件包含4个道具。现在,让我们跳到脚本部分。
<script>
export default {
name: 'HelloWorld',
data: () => ({
options: {
chart: {
id: 'vuechart-example'
},
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]
}
},
series: [{
name: 'series-1',
data: [55, 62, 89, 66, 98, 72, 101, 75, 94, 120, 117, 139]
}]
})
}
</script>
解释图表数据
我们的条形图包含一个虚构组织的每月股票定价。条形图中有12个数据点。每个月将显示在图表的x轴上。它们的价格显示在图表的y轴上。
为了提供将在条形图中显示的数据,我们将添加一个序列数组。系列是一组对象。每个对象都定义了要创建的图表的类型,并且将具有要在图表上绘制的值的数据数组。
您可以使用以下命令启动服务器:
npm run serve
现在,打开浏览器到localhost:8080,您应该看到图表:

美化我们的图表
我们可以将图表放在页面的中心。为此,我将chart-wrapper
在div中添加一个类。我还想将图表的宽度增加到800px。我的模板现在如下所示:
<template>
<div class="chart-wrapper">
<apexchart
width="800" type="bar"
:options="options" :series="series">
</apexchart>
</div>
</template>
接下来,让我们为新chart-wrapper
类添加一些样式,这些样式会将我们的图表放置在页面的中心。这是我添加的样式:
<style scoped>
div.chart-wrapper {
display: flex;
align-items: center;
justify-content: center
}
</style>
在添加样式时,我想用标题替换Vue徽标。打开App.vue文件。删除<img>标记并将其替换为:
<h1>Vue Apexcharts Demo</h1>
现在,我们的图表如下所示:

添加标题并更改图表颜色
我们可以在条形图中添加标题以添加更多上下文,并解释该图的全部含义。
要将标题添加到我们的条形图中,请返回到HelloWorld.vue组件并将标题添加到该options
对象。
options: {
chart: {
id: 'vuechart-example'
},
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]
},
title: {
text: 'Monthly Stock Pricing'
}
},
series: [{
name: 'series-1',
data: [55, 62, 89, 66, 98, 72, 101, 75, 94, 120, 117, 139]
}]
默认情况下,标题位于条形图的左侧。这是我们的图表现在的样子:

让我们通过添加自己的自定义样式来更改默认行为。我希望标题具有更大的字体大小并居中。标题对象具有一个称为的属性align
,它代表水平面。我希望标题以此为中心。为了使标题具有更大的字体,我们需要添加一个style
选项。
另外,我们可以将条形图设置为其他颜色。这是现在的options
样子:
options: {
chart: {
id: 'vuechart-example'
},
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]
},
title: {
text: 'Monthly Stock Pricing',
align: 'center',
style: {
fontSize: '20px',
},
},
colors: ['#00897b']
},
series: [{
name: 'series-1',
data: [55, 62, 89, 66, 98, 72, 101, 75, 94, 120, 117, 139]
}]
这是条形图现在的样子:

创建折线图
首先,我们需要创建一个新的chart-wrapper div和一个新的apexchart元素。新的apexchart元素将像前面的示例一样保留道具。但是这里有趣的是,您需要做的就是type
将模板中的prop更改为line
。
这是我的HTML代码现在的样子:
<template>
<div>
<div class="chart-wrapper">
<apexchart
width="800" type="bar"
:options="options" :series="series">
</apexchart>
</div>
<hr>
<div class="chart-wrapper">
<apexchart
width="800" type="line"
:options="options" :series="series">
</apexchart>
</div>
</div>
</template>
现在,我们有以下折线图:

Apexcharts文档
尖峰图表有不同的图表类型,您可以从条形图和折线图中选择。它们还具有可以添加到图表中的各种选项。您可以添加图例或标记,以及工具提示。