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文档
尖峰图表有不同的图表类型，您可以从条形图和折线图中选择。它们还具有可以添加到图表中的各种选项。您可以添加图例或标记，以及工具提示。
