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

宇文俊明

2023-12-01

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文件的外观：

import Vue from 'vue';
import Echarts from 'vue-echarts';

import 'echarts/lib/chart/bar';

Vue.component('chart', Echarts);

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

We have to make Vue aware of the file we just created. We do that by importing 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/echarts";

Now we are ready to create our first chart.

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

创建条形图 (Creating a Bar Chart)

We will be creating all 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 do the following:

打开文件HelloWorld.vue并执行以下操作：

delete all the html inside the template tags
删除模板标记内的所有html
delete the props in the script tags
删除脚本标签中的道具
delete all the CSS in the style tags
删除样式标签中的所有CSS

Your file should look like this:

您的文件应如下所示：

<template>
</template>

<script>
export default {
  name: 'HelloWorld',
}
</script>

<style scoped>
</style>

In our plugin, we called our component chart. Vue-echarts builds charts by using the data you pass into it using a prop called options. Let’s use that to create the html for our first chart. Add the following code inside the template tags:

在我们的插件中，我们将其称为组件chart 。 Vue-echarts使用称为options的道具使用传递给它的数据来构建图表。让我们用它来为第一个图表创建html。在模板标签内添加以下代码：

<chart :options="chartOptionsBar"></chart>

定义我们的图表 (Defining our chart)

Next, we need to define the data that will be used to create our chart. Inside the script tags create a new data object with an entry for chartOptionsBar. Your script tag should look like this:

接下来，我们需要定义将用于创建图表的数据。在脚本标签内部，创建一个新数据对象，并带有chartOptionsBar的条目。您的脚本标签应如下所示：

<script>
export default {
  name: 'HelloWorld',
  data: () => ({
    chartOptionsBar: {}
  })
}
</script>

创建图表数据 (Creating chart data)

Our first bar chart will contain quarterly sales data for a fictional company. Each quarter will be displayed on the x-axis of the chart. The sales amount will be displayed on the y-axis of the chart.

我们的第一个条形图将包含一个虚构公司的季度销售数据。每个季度将显示在图表的x轴上。销售量将显示在图表的y轴上。

Let’s define our xAxis first. We will provide a data array which will contain entries for each quarter of the year. Add the following to our chartOptionsBar object:

首先定义xAxis。我们将提供一个数据数组，其中包含一年中每个季度的条目。将以下内容添加到我们的chartOptionsBar对象中：

chartOptionsBar: {
  xAxis: {
    data: ['Q1', 'Q2', 'Q3', 'Q4']
  }
}

Our yAxis will only display the value of sales for each quarter. For that reason, we do not need to create a data array for it. Instead, we tell it that it will display the value. Add the following to our chartOptionsBar object:

我们的yAxis仅显示每个季度的销售价值。因此，我们不需要为其创建数据数组。相反，我们告诉它它将显示value 。将以下内容添加到我们的chartOptionsBar对象中：

chartOptionsBar: {
  xAxis: {
    data: ['Q1', 'Q2', 'Q3', 'Q4']
  },
  yAxis: {
    type: 'value'
  }
}

The last step is to provide the data that will be displayed in our bar chart. You do this by adding a series array. 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 add it with this:

最后一步是提供将在我们的条形图中显示的数据。您可以通过添加一系列数组来实现。系列是一组对象。每个对象都定义了要创建的图表的类型，并将具有要在图表上绘制的值的数据数组。您可以添加它：

chartOptionsBar: {
  xAxis: {
    data: ['Q1', 'Q2', 'Q3', 'Q4']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      data: [63, 75, 24, 92]
    }
  ]
}

You can start your server with the command:

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

npm run serve

Then open your browser to localhost:8080 and you will see your first chart that looks like this:

然后将浏览器打开到localhost：8080，您将看到第一个如下图的图表：

向我们的图表添加样式 (Adding Styling To Our Charts)

By default, vue-echarts sets a width of 600px for a chart. I would much rather have our charts to be full-width of its container. To do this I am going to place the chart inside a div. I will give this div a class of chart-wrapper. My template now looks like this:

默认情况下，vue-echarts设置图表的宽度为600px。我更希望我们的图表能够完全容纳其容器。为此，我将把图表放在div内。我将给这个div一类chart-wrapper 。我的模板现在如下所示：

<template>
  <div class="chart-wrapper">
    <chart :options="chartOptionsBar"></chart>
  </div>
</template>

Next, I want to add some styling to the new chart-wrapper class. I will make this class have a width equal to the screen size and have a height of 700px. Here is the style I have added:

接下来，我想为新的chart-wrapper类添加一些样式。我将使此类的宽度等于屏幕尺寸，并且高度为700px。这是我添加的样式：

.chart-wrapper {
  width: 100%;
  height: 700px;
}

Vue-echarts adds a class called echarts to all its charts. We will also style that in our CSS. We will tell this class to take up 100% of the height and width of its container which is chart-wrapper. Here is the CSS I have added:

Vue-echarts在其所有图表中添加了一个称为echarts的类。我们还将在CSS中设置样式。我们将告诉此类占用其chart-wrapper容器的高度和宽度的100％。这是我添加CSS：

.echarts {
  width: 100%;
  height: 100%;
}

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 eCharts Demo</h1>

Now our chart looks like this:

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

添加标题和颜色 (Adding a Title and Color)

This is a great start for our first chart. When people view the chart they are not sure what they are viewing. We can resolve that dilemma by adding a title to our chart.

这是我们第一个图表的良好起点。当人们查看图表时，他们不确定他们正在查看的内容。我们可以通过在图表中添加标题来解决该难题。

Each component of eCharts that you want to use has to be imported. A title is a component so we need to import it. Open up the echarts.js file and add the following line:

您要使用的eCharts的每个组件都必须导入。标题是一个组成部分，因此我们需要导入它。打开echarts.js文件并添加以下行：

import 'echarts/lib/component/title';

Next, we can add a title to our bar chart. Back in HelloWorld.vue component let’s add a title to our chartOptionsBar object.

接下来，我们可以在条形图中添加标题。回到HelloWorld.vue组件，让我们为我们的chartOptionsBar对象添加标题。

chartOptionsBar: {
  xAxis: {
    data: ['Q1', 'Q2', 'Q3', 'Q4']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      data: [63, 75, 24, 92]
    }
  ],
  title: {
    text: 'Quarterly Sales Results'
  }
}

eCharts by default places the title on the left side of the bar chart. Here is what our chart looks like now:

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

I don’t like how this title looks so let’s change it. I want the title to have a bigger font size and to be centered. The chart has an option called x 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 textStyle. The last change that I want to make is to set the bar to be a different color. Here is what my options look like now:

我不喜欢这个标题的外观，所以让我们对其进行更改。我希望标题具有更大的字体大小并居中。该图表有一个称为x的选项，代表水平平面。我希望标题以此为中心。为了使标题具有更大的字体，我们需要添加textStyle 。我要进行的最后更改是将条形设置为其他颜色。这是我现在的选择：

chartOptionsBar: {
  xAxis: {
    data: ['Q1', 'Q2', 'Q3', 'Q4']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      data: [63, 75, 24, 92]
    }
  ],
  title: {
    text: 'Quarterly Sales Results',
    x: 'center',
    textStyle: {
      fontSize: 24
    }
  },
  color: ['#127ac2']
}

Here is the final version of my bar chart:

这是我的条形图的最终版本：

创建折线图 (Creating a Line Chart)

Next, I will show you how to create a line chart. We will create a line chart showing monthly stock prices for a fictional company. So let’s get started.

接下来，我将向您展示如何创建折线图。我们将创建一个折线图，显示一个虚构公司的每月股票价格。因此，让我们开始吧。

First, we need to create a new chart-wrapper div and a new chart element. The new chart element will get its options from the chartOptionsLine object. Here is what my html code looks like now:

首先，我们需要创建一个新的chart-wrapper div和一个新的chart元素。新的图表元素将从chartOptionsLine对象获取其选项。这是我的html代码现在的样子：

<div>
  <div class="chart-wrapper">
    <chart :options="chartOptionsBar"></chart>
  </div>
  <hr />
  <div class="chart-wrapper">
    <chart :options="chartOptionsLine"></chart>
  </div>
</div>

Next, in our data object create a new chartOptionsLine object. Instead of creating a new object copy the existing chartOptionsBar object. Rename the copy to chartOptionsLine. For right now we only need to change the type in series from bar to line. Here is what our chartOptionsLine object looks like:

接下来，在我们的数据对象中创建一个新的chartOptionsLine对象。代替创建新对象，而是复制现有的chartOptionsBar对象。将副本重命名为chartOptionsLine 。现在，我们只需要将系列的类型从条形更改为线形即可。这是我们的chartOptionsLine对象的样子：

chartOptionsLine: {
  xAxis: {
    data: ["Q1", "Q2", "Q3", "Q4"]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      type: "line",
      data: [63, 75, 24, 92]
    }
  ],
  title: {
    text: "Quarterly Sales Results",
    x: "center",
    textStyle: {
      fontSize: 24
    }
  },
  color: ["#127ac2"]
}

If you go to your browser you will notice that the line chart does not display. This is because we need to import it into our plugin as we did with the bar chart.

如果您使用浏览器，则会注意到折线图未显示。这是因为我们需要像使用条形图一样将其导入到插件中。

Open up echarts.js and add the following line:

打开echarts.js并添加以下行：

import 'echarts/lib/chart/line';

We now have this line graph:

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

更改标题和数据 (Change title and data)

We want the line chart to display monthly stock pricing for a fictional company. We will need more than four data points. We will have 12 data points four our line graph. We also want the title displayed on the x-axis to be the months of the year instead of quarters. We also need to change the title of our graph.

我们希望折线图显示一个虚构公司的每月股票价格。我们将需要四个以上的数据点。我们将有12个数据点四个折线图。我们还希望x轴上显示的标题是一年中的月份而不是季度。我们还需要更改图的标题。

We can update our chartOptionsLine with these values:

我们可以使用以下值更新chartOptionsLine：

chartOptionsLine: {
  xAxis: {
    data: [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      type: "line",
      data: [55, 72, 84, 48, 59, 62, 87, 75, 94, 101, 127, 118]
    }
  ],
  title: {
    text: "Monthly Stock Prices",
    x: "center",
    textStyle: {
      fontSize: 24
    }
  },
  color: ["#127ac2"]
}

Now our line chart looks like this:

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

访问图表文档 (Accessing Chart Documentation)

eCharts provides many more types of charts besides bar and line. eCharts provides a plethora of options that you can add to your chart. You can add legends or tooltips for example.

除条形图和折线图之外，eCharts还提供许多其他类型的图表。 eCharts提供了许多可以添加到图表中的选项。例如，您可以添加图例或工具提示。

If you want to find out about the other chart types and options that are available you can read their documentation. Here is a link to the documentation.

如果要查找其他可用的图表类型和选项，请阅读其文档。这是文档的链接。

获取代码 (Get the Code)

All the code for this article can be found in my GitHub account.

可以在我的GitHub帐户中找到本文的所有代码。

结论 (Conclusion)

It is very easy to add custom charts and graphs to your Vue.js application using eCharts and vue-echarts. Charts provide a way to visualize data for users to view.

使用eCharts和vue-echarts将自定义图表添加到您的Vue.js应用程序中非常容易。图表提供了一种可视化数据的方式，供用户查看。

If you have any feedback please leave a comment below. Please clap for this article. Thanks for reading.

如果您有任何反馈意见，请在下面发表评论。请拍一下这篇文章。谢谢阅读。

翻译自: https://www.freecodecamp.org/news/how-to-add-charts-and-graphs-to-a-vue-js-application-29f943a45d09/