组件用.vue还是.js_ApexCharts的Vue.js组件

组件用.vue还是.js

足球表演 (vue-apexcharts)

Vue.js wrapper for ApexCharts to build interactive visualizations in vue.

用于ApexCharts的Vue.js包装器可在vue中构建交互式可视化。

View demo 查看演示 Download Source 下载源

下载及安装 (Download and Installation)

通过npm安装 (Installing via npm)

npm install vue-apexcharts apexcharts

用法 (Usage)

import VueApexCharts from 'vue-apexcharts'

Vue.use(VueApexCharts)

To create a basic bar chart with minimal configuration, write as follows:

要以最少的配置创建基本的条形图，请编写如下：

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

import VueApexCharts from 'vue-apexcharts'

export default {
    components: {
      apexcharts: VueApexCharts,
    },
    data: function() {
      return {
        chartOptions: {
          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]
        }]
      }
    },
};

This will render the following chart

这将呈现以下图表

如何更新图表？ (How do I update the chart?)

Simple! Just change the series or any option and it will automatically re-render the chart. Have a look at the below example to see this in action

简单！ 只需更改series或任何option ，它将自动重新绘制图表。 请看下面的示例，以了解实际情况

<template>
   <div class="app">
     <apexcharts width="550" type="bar" :options="chartOptions" :series="series"></apexcharts>
     <div>
       <button @click="updateChart">Update!</button>
    </div>
   </div>

</template>

export default {
    data: function() {
      return {
        chartOptions: {
          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, 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
        })

        const colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0']

        // Make sure to update the whole options config and not just a single property to allow the Vue watch catch the change.
        this.chartOptions = {
          colors: [colors[Math.floor(Math.random()*colors.length)]]
        };
        // In the same way, update the series option
        this.series = [{
          data: newData
        }]
      }
    }
};

道具 (Props)

Prop	Type	Description
series*	Array	The series is an array which accepts object in the following format. To know more about the format of dataSeries, checkout Series docs on the website.
type*	String	line, area, bar, pie, donut, scatter, bubble, heatmap, radialBar
width	Number/String	Possible values for width can be 100% or 400px or 400
height	Number/String	Possible values for width can be 100% or 300px or 300
options	Object	The configuration object, see options on API (Reference)

Struts	类型	描述
系列 *	数组	该系列是一个接受以下格式的对象的数组。 要了解有关dataSeries格式的更多信息，请在网站上查看Series docs。
类型 *	串	line ， area ， bar ， pie ， donut ， scatter ， bubble ， heatmap ， radialBar
宽度	数字/字符串	宽度的可能值为100%或400px或400
高度	数字/字符串	宽度的可能值为100%或300px或300
选项	目的	配置对象，请参阅API(参考)上的选项

如何以编程方式调用ApexCharts的方法？ (How to call methods of ApexCharts programatically?)

Sometimes, you may want to call other methods of the core ApexCharts library, and you can do so on this.$apexcharts global variable directly

有时，您可能想调用核心ApexCharts库的其他方法，并且可以在this.$apexcharts全局变量直接

Example

例

this.$apexcharts.exec('vuechart-example', 'updateSeries', [{
  data: [40, 55, 65, 11, 23, 44, 54, 33]
}])

In the above method, vuechart-example is the ID of chart, updateSeries is the name of the method you want to call and the third parameter is the new Series you want to update.

在上面的方法中， vuechart-example是图表的ID， updateSeries是您要调用的方法的名称，第三个参数是您要更新的新Series。

More info on the .exec() method can be found here

有关.exec()方法的更多信息，请参见此处

All other methods of ApexCharts can be called the same way.

ApexCharts的所有其他方法可以用相同的方式调用。

包含什么 (What's included)

The repository includes the following files and directories.

该存储库包含以下文件和目录。

vue-apexcharts/
├── dist/
│   └── vue-apexcharts.js
└── src/
    ├── ApexCharts.component.js
    ├── Utils.js
    └── index.js

运行示例 (Running the examples)

Basic Examples are included to show how to get started using ApexCharts with Vue easily.

其中包含一些基本示例，以说明如何轻松地将ApexCharts与Vue一起使用。

To run the examples,

要运行示例，

cd example
npm install
npm run serve

发展历程 (Development)

安装依赖 (Install dependencies)

npm install

捆绑 (Bundling)

npm run build

翻译自: https://vuejsexamples.com/vue-js-component-for-apexcharts/

组件用.vue还是.js