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

Charts and graphs are a great way to display information/data to your app's users. In this article I will show you exactly how to do that with vue-apexcharts.

图表是向应用程序用户显示信息/数据的好方法。 在本文中，我将向您确切演示如何使用vue-apexcharts。

入门 (Getting Started)

Using the Vue CLI we can easily create a starter application. First, we need to install the Vue CLI with the command below. You can skip this if you have it installed already.

使用Vue CLI，我们可以轻松创建启动程序。 首先，我们需要使用以下命令安装Vue CLI。 如果已安装，则可以跳过此步骤。

Note: In order to use the CLI, you’ll need to have Node.js version 8 or above installed (8.10.0+ is recommended).

注意：要使用CLI，您需要安装Node.js版本8或更高版本(建议使用8.10.0+)。

To install the CLI, run this command in your terminal:

要安装CLI，请在终端中运行以下命令：

npm install @vue/cli

Now we can use it to create our project. We will create the project using this command:

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

vue create vue-apexcharts-demo

We’ll then be prompted with the option to pick a default preset or to manually select features. Select default.

然后，系统将提示您选择默认预设或手动选择功能的选项。 选择default 。

A new project directory will be created, and you can navigate into it using this command:

将创建一个新的项目目录，您可以使用以下命令导航到该目录：

cd vue-apexcharts-demo

安装Apexcharts (Installing Apexcharts)

Before we continue, you might be wondering…

在我们继续之前，您可能想知道...

What is apexcharts?!

什么是顶点图？

ApexCharts is a modern charting library that helps developers create beautiful and interactive visualizations for web pages. You can view their demo here.

ApexCharts是一个现代的图表库，可帮助开发人员为网页创建漂亮的交互式可视化文件。 您可以在此处查看他们的演示。

We can easily use ApexCharts with our Vue application by integrating its wrapper component for Vue called vue-apexcharts.

我们可以通过集成其针对Vue的包装组件vue-apexcharts来轻松地将ApexCharts与我们的Vue应用程序一起使用 。

To install the vue-apexcharts component in our application, use this command:

要在我们的应用程序中安装vue-apexcharts组件，请使用以下命令：

npm install --save apexcharts 
npm install --save vue-apexcharts

配置vue-apexcharts (Configuring vue-apexcharts)

Now that we have vue-apexcharts installed we need to install it in our application. Open up the src directory and create a new directory called plugins. Inside the new plugins directory create a file called apexcharts.js.

现在我们已经安装了vue-apexcharts，我们需要在应用程序中安装它。 打开src目录并创建一个名为plugins的新目录。 在新的plugins目录内，创建一个名为apexcharts.js的文件。

Next, we will create a Vue component for apexcharts in our apexcharts.js. This will make the component globally available in our application.

接下来，我们将为我们的apexcharts一个Vue的组件apexcharts.js 。 这将使组件在我们的应用程序中全局可用。

To do this, we'll be importing both Vue and vue-apexcharts. Next, we will create a global component called apexchart. Here is what your apexcharts.js file should look like:

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

import Vue from 'vue'
import VueApexCharts from 'vue-apexcharts'

Vue.component('apexchart', VueApexCharts)

导入我们的插件文件 (Importing our plugin file)

We have to make Vue aware of the file we just created. To do that, we import it in the main.js file. Open up the main.js file and add the following line after the last import statement:

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

import '@/plugins/apexcharts'

Now we are ready to create our first chart.

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

创建我们的第一个图表 (Creating our First Chart)

We will be creating our charts in the HelloWorld component. This component was created automatically when we used the Vue CLI to create our application.

我们将在HelloWorld组件中创建图表。 当我们使用Vue CLI创建应用程序时，会自动创建此组件。

Open up the file HelloWorld.vue and delete all the demo code there.

打开文件HelloWorld.vue然后删除其中的所有演示代码。

Your file should look like this:

您的文件应如下所示：

<template>
</template>
<script>  
export default {
 name: 'HelloWorld'
}
</script>
<style scoped>
</style>

Remember in our plugin, we called our component apexchart.

记住，在我们的插件中，我们将组件称为apexchart 。

Vue-Apexcharts builds charts by using the data you pass into it using props, as seen in the code below. We will use that to create the HTML for our first chart. In the first example, we will start with a very basic bar chart.

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

<template>
  <div>
   <apexchart 
     width="500" type="bar" 
     :options="options" :series="series">
   </apexchart>  
  </div>
</template>

As you can see in the above template, the apexchart component holds 4 props. Now, let’s jump to the script part.

如您在上面的模板中看到的， 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>

解释图表数据 (Explaining Chart Data)

Our bar chart contains monthly stock pricing for a fictional organization. We have 12 data points in our bar chart. Each month will be displayed on the x-axis of the chart. Their pricing is displayed on the y-axis of the chart.

我们的条形图包含一个虚构组织的每月股票定价。 条形图中有12个数据点。 每个月将显示在图表的x轴上。 它们的价格显示在图表的y轴上。

To provide the data that will be displayed in our bar chart, we will add a series array. A series is an array of objects. Each object defines the type of chart to be created and will have a data array of values to be plotted on the graph.

为了提供将在条形图中显示的数据，我们将添加一个序列数组。 系列是一组对象。 每个对象都定义了要创建的图表的类型，并将具有要在图表上绘制的值的数据数组。

You can start your server with the command:

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

npm run serve

Now, open your browser to localhost:8080 and you should see your chart:

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

造型我们的图表 (Styling our charts)

We can place our chart in the center of the page. To do this I am going to add a class chart-wrapper inside our div. I also want to increase the width of the chart to 800px. My template now looks like this:

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

<template>
  <div class="chart-wrapper">
    <apexchart 
      width="800" type="bar" 
      :options="options" :series="series">
    </apexchart>
</div>
</template>

Next, let’s add some styling to the new chart-wrapper class that will place our chart in the center of the page. Here is the style I have added:

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

<style scoped>
div.chart-wrapper {
  display: flex;
  align-items: center;
  justify-content: center
}
</style>

While we are adding styles I want to replace the Vue logo with a title. Open up the App.vue file. Delete the <img> tag and replace it with:

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

<h1>Vue Apexcharts Demo</h1>

Our charts now looks like this:

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

添加标题并更改图表颜色 (Adding a Title and Changing Chart Color)

We can add a title to our bar chart to add further context and an explanation of what the chart is all about.

我们可以在条形图中添加标题以添加更多上下文，并解释该图的全部含义。

To add a title to our bar chart, go back to your HelloWorld.vue component and add a title to the options object.

要将标题添加到我们的条形图中，请返回到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]
 }]

By default, the title is placed on the left side of the bar chart. Here is what our chart looks like now:

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

Let’s change the default behaviour by adding our own custom style. I want the title to have a bigger font size and to be centered. The title object has a property called align which represents the horizontal plane. I want the title centered on this. To make the title have a bigger font size we need to add a style option.

让我们通过添加自己的自定义样式来更改默认行为。 我希望标题具有更大的字体大小并居中。 标题对象具有一个称为align的属性，它表示水平面。 我希望标题以此为中心。 为了使标题具有更大的字体，我们需要添加style选项。

Also, we can set the bar chart to have a different color. Here is what options look like now:

另外，我们可以将条形图设置为其他颜色。 这是现在的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]
 }]

This is what the bar chart looks like now:

这是条形图现在的样子：

创建折线图 (Creating a Line Chart)

First, we need to create a new chart-wrapper div and a new apexchart element. The new apexchart element will hold props like the previous example. But the interesting thing here is all you need to do is to change the prop type in the template to line.

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

Here is what my HTML code looks like now:

这是我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>

We now have this line graph:

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

Apexcharts文档 (Apexcharts Documentation)

Apexcharts have different charts type you can choose from apart from bar and line. They also have various options that you can add to your chart. You can add legends or markers, and tooltips for example.

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

If you want to find out about the other chart types and options that are available you can read their documentation here

如果您想了解其他可用的图表类型和选项，请在此处阅读其文档。

回购 (Repo)

You can find the code for this article in my github account.

您可以在我的github帐户中找到本文的代码。

结论 (Conclusion)

Charts helps us visualize data and help users view and interact with it. Integrating ApexCharts to your Vue application is just as easy as you have seen above.

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

Feedback is welcome! And please share this article if you found it helpful.

欢迎反馈！ 如果您觉得有帮助，请与我们分享。

Thanks for reading!

谢谢阅读！

翻译自: https://www.freecodecamp.org/news/a-detailed-guide-to-integrating-apexcharts-with-vuejs/