Vue Charts

## 使用 ApexCharts 在 Vue.js 中创建图表
Vue.js 框架对视图层的关注也考虑到了与不同库的简单集成。这就是为什么今天我们将看到 ApexChart 如何集成到 Vue.js 生态系统中。

Vue-ApexCharts 是 ApexCharts 的包装器组件，可以集成到您的 vue.js 应用程序中以创建令人惊叹的 Vue 图表。

在本文中，您将学习如何使用 Vue-ApexCharts 组件在您的 vue.js 应用程序中轻松创建各种图表。

## 安装
从 npm 在 Vue 2.0 应用程序中安装 Vue-ApexCharts 组件

```shell
npm install --save apexcharts
npm install --save vue-apexcharts
```

## 用法

```javascript
import VueApexCharts from 'vue-apexcharts'
Vue.use(VueApexCharts)

Vue.component('apexchart', VueApexCharts)
```

> 注意：如果你使用的是 Vue 3，那么你应该这样做

```shell
npm install --save apexcharts
npm install --save vue3-apexcharts
```

```javascript
import VueApexCharts from "vue3-apexcharts";

const app = createApp(App);
app.use(VueApexCharts);
// The app.use(VueApexCharts) will make <apexchart> component available everywhere.
```

## Props
以下是可以传递给 `<apexcharts>` 组件的基本属性

| Prop    | 描述                                                       | 类型             | 默认   |
|---------|-------------------------------------------------------------------|------------------|-----------|
| type    | 必须指定的图表类型               | String           | `'linex'`    |
| series  | 您要在图表中显示的数据                   | Array            | `undefined` |
| width   | 图表的宽度                                               | String &#124;&#124; Number | `'100%'`    |
| height  | 图表的高度                                               | String &#124;&#124; Number | `'auto'`    |
| options | 图表的所有可选配置都在此属性中 | Object           | `{}`        |

## 用法
安装库后，您就可以在 vue.js 中创建基本条形图了。那么，让我们开始吧。

创建 Vue 组件的模板部分，它是 HTML 和自定义标签的混合体。您在下面看到的 `<apexchart>` 标签是我们将在 Vue 组件的脚本部分声明的组件。

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

正如您在上面的模板中看到的，ApexCharts 拥有 4 个 props。现在，让我们跳到 JavaScript 部分。

下面来编写Vue组件的脚本部分。如果我们还没有导入，我们将导入 `VueApexCharts`，然后使用 `Vue.component()` 函数全局定义它，这样你就可以在任何地方使用它。

在第一个示例中，我们将从一个非常基本的条形图开始。

```javascript
import VueApexCharts from 'vue-apexcharts'

var app = new Vue({
  el: '#appl',
  data: function() {
    return {
      options: {
        chart: {
          id: 'vuechart-example'
        },
        xaxis: {
          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
        }
      },
      series: [{
        name: 'series-1',
        data: [30, 40, 45, 50, 49, 60, 70, 91]
      }]
    }
  }
});
```

这将呈现以下图表。要阅读有关您可以在条形图中配置的选项的更多信息，请查看此[plotOptions.bar](http://www.bixiaguangnian.com/manual/apexcharts/315.html "plotOptions.bar")配置。

![](/uploads/images/20221226/0126c7f5e501312fec02bc053ba24129.png)

[在 CodeSandbox 上编辑](https://codesandbox.io/s/o7339qql3z "Edit on CodeSandbox")

接下来，我们创建一个简单的折线图。为此，只需更改 type 组件 prop 中的属性。

## 折线图

```html
  <template>
    <div>
      <apexchart width="500" type="line" :options="options" :series="series"></apexchart>
    </div>
  </template>
```

这将生成以下折线图。

![](/uploads/images/20221226/72db484cb2c62e48ee8ab68238cfeff6.png)

现在，我们将创建一个具有最少配置的圆环图。为此，更改一些选项。

## 圆环图
与其他图表类型不同，圆环图接受一维序列数组。试试下面的代码。

```html
  <template>
    <div>
      <apexchart width="380" type="donut" :options="options" :series="series"></apexchart>
    </div>
  </template>
```

```javascript
var app = new Vue({
  el: '#appl',
  data: function() {
    return {
      options: {},
      series: [44, 55, 41, 17, 15]
    }
  }
});
```

这就是在上述代码的帮助下呈现的圆环图的样子。

![](/uploads/images/20221226/7f5c1f74962fb40268db3dde3b89aaae.png)

在下一节中，我们将看到如何动态更新呈现的图表

## 更新 Vue 图表数据
更新 Vue 图表数据很简单。您只需更新传递给 `<apexchart>` 组件的系列道具，它就会自动触发事件来更新图表。

我们将在下面看到一个用一些随机序列更新图表数据的例子来说明这一点。

```javascript
import VueApexCharts from 'vue-apexcharts'

export default {
 name: 'Vue Chart',
 data: function () {
  return {
   chartOptions: {
    chart: {
      id: 'vuechart-example',
    },
    xaxis: {
      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
    },
   },
   series: [{
    name: 'Vue Chart',
    data: [30, 40, 45, 50, 49, 60, 70, 81]
   }]
  }
 },
 methods: {
  updateChart() {
   const max = 90;
   const min = 20;
   const newData = this.series[0].data.map(() => {
     return Math.floor(Math.random() * (max - min + 1)) + min
   })
   // In the same way, update the series option
   this.series = [{
    data: newData
   }]
  }
 }
}
```

正如你在上面的例子中看到的，通过改变道具，我们触发了 ApexCharts 的更新事件。

[在 CodeSandbox 上编辑](https://codesandbox.io/s/50z5wrmp6k "在 CodeSandbox 上编辑")

## 更新 Vue 图表选项
除了更改图表数据之外，您还可以更改图表选项。例如，您可以更改图表的主题或更改图例位置而不影响数据。请参阅下面的示例，该示例更改了图表的主题。

```javascript
methods: {
 updateTheme(e) {
  this.chartOptions = {
   theme: {
     palette: 'palette2'
   }
  }
 }
}
```

[在 CodeSandbox 上编辑](https://codesandbox.io/embed/qzjkzmzxoj "在 CodeSandbox 上编辑")

## 更多图表示例？
通过更改几个选项可以创建其他几个图表。主要配置必须在 `optionsApexCharts` 组件的属性中完成，其余部分将落到位。

[查看 Vue 图表演示](https://apexcharts.com/vue-chart-demos/ "View Vue Chart Demos")