• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

Vue.js集成ApexCharts-详细指南

CSS/HTML rin, seun 4个月前 (06-21) 84次浏览 0个评论

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,您应该看到图表:

Vue.js集成ApexCharts-详细指南

美化我们的图表

我们可以将图表放在页面的中心。为此,我将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>

现在,我们的图表如下所示:

Vue.js集成ApexCharts-详细指南

添加标题并更改图表颜色

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

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

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

Vue.js集成ApexCharts-详细指南

让我们通过添加自己的自定义样式来更改默认行为。我希望标题具有更大的字体大小并居中。标题对象具有一个称为的属性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]
 }]

这是条形图现在的样子:

Vue.js集成ApexCharts-详细指南
条形图的最终版本

创建折线图

首先,我们需要创建一个新的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>

现在,我们有以下折线图:

Vue.js集成ApexCharts-详细指南
折线图

Apexcharts文档

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

如果要查找其他可用的图表类型和选项,请在此处阅读其文档

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址