vue.js 图表_如何将图表添加到Vue.js应用程序

vue.js 图表

使用echarts和vue-echarts的快速指南 (Quick Guide to using echarts and vue-echarts)

The heart of every application is displaying data to users. Sometimes it is very challenging to display that data using text. Charts and graphs are a great way to provide a visual representation of that data. In this article, I will show you how easy it is to create visually appealing charts in your Vue.js application.

每个应用程序的核心都是向用户显示数据。 有时使用文本显示数据非常具有挑战性。 图表是提供该数据可视化表示的一种好方法。 在本文中，我将向您展示在Vue.js应用程序中创建吸引人的图表是多么容易。

入门 (Getting Started)

I will be using the Vue CLI to scaffold out a starter application quickly. I will use both echarts and vue-echarts to add charts to our starter application. So let’s get started.

我将使用Vue CLI快速搭建启动程序。 我将同时使用echarts和vue-echarts将图表添加到我们的入门应用程序中。 因此，让我们开始吧。

Install the Vue CLI with this command:

使用以下命令安装Vue CLI：

npm install @vue/cli

Next, we will use the Vue CLI to scaffold out a Vue application that we will use. We will create the application using this command:

接下来，我们将使用Vue CLI搭建将要使用的Vue应用程序。 我们将使用以下命令创建应用程序：

vue create vue-echarts-demo

The Vue CLI will ask you if you want to use the default preset or manually select features. Select default.

Vue CLI会询问您是否要使用默认预设或手动选择功能。 选择default 。

This will create our application in a folder called vue-echarts-demo. Change into this directory with this command:

这将在名为vue-echarts-demo的文件夹中创建我们的应用程序。 使用以下命令进入此目录：

cd vue-echarts-demo

安装图表包 (Installing the chart packages)

eCharts is one of the largest and most widely used chart programs. We will be using this in our vue application. To allow it to be used in Vue, we will also be using a product called vue-echarts. Vue-echarts is a wrapper for eCharts to allow it to work in the Vue environment.

eCharts是规模最大，使用最广泛的图表程序之一。 我们将在vue应用程序中使用它。 为了使其能够在Vue中使用，我们还将使用名为vue-echarts的产品。 Vue-echarts是eCharts的包装，以使其可以在Vue环境中工作。

You can install them both with this command:

您可以使用以下命令将它们都安装：

npm install echarts vue-echarts

配置图表包 (Configuring the chart packages)

Now that we have the chart packages installed we need to install them in our application. Open up the src directory and create a new directory called plugins. Inside the new plugins directory create a file called echarts.js.

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

We will create a Vue component for eCharts in this file. The component will be globally available in our application. The steps we need to take is to import both vue and vue-echarts. Next, we will import the parts of eCharts that we will be using. Our first chart will be a bar chart so we will need to import that too. Finally, we create a global component called chart. Here is what your echarts.js file should look like:

我们将在此文件中为eCharts创建一个Vue组件。 该组件将在我们的应用程序中全局可用。 我们需要采取的步骤是导入vue和vue-echarts。 接下来，我们将导入将要使用的eCharts部分。 我们的第一个图表将是条形图，因此我们也需要将其导入。 最后，我们创建一个称为chart的全局组件。 这是您的echarts.js文件的外观：