在vue中使用echarts图表实例代码详解

在Vue中轻松集成ECharts图表：一步步指南

想要为你的Vue应用添加丰富的数据可视化功能吗？ECharts是一个绝佳的选择！跟随我，一步步了解如何在Vue中轻松集成ECharts。

一、安装ECharts依赖

使用npm或yarn来安装ECharts。选择以下任一方式：

使用npm：

```bash

npm install echarts --save

```

使用yarn：

```bash

yarn add echarts

```

如果你在国内，可能会遇到下载速度慢的问题。可以使用淘宝镜像来加速下载：

```bash

// 安装淘宝镜像

npm install -g pm --registry=

// 从淘宝镜像下载ECharts

pm install echarts -S

```

二、引入ECharts

安装完成后，ECharts会出现在你的node_modules目录下。接下来，你需要将它引入到你的Vue项目中。

1. 全部引入

直接在项目代码中引入：

在需要使用的页面（如Home.vue）中，通过`require('echarts')`得到ECharts。然后，声明一个`echarts`变量，直接使用它初始化图表。

```javascript

var echarts = require('echarts');

var myChart = echartsit(document.getElementById('main'));

myChart.setOption({

// 图表配置...

});

```

2. 全局引入

为了在代码中更方便地使用ECharts，你可以选择在main.js中全局引入，并通过Vue.prototype添加`$echarts`属性。这样，在任何Vue组件中都可以通过`this.$echarts`来使用ECharts。

在main.js中：

```javascript

import echarts from 'echarts';

Vue.prototype.$echarts = echarts;

```

在Home.vue中：

```javascript

var myChart = this.$echartsit(document.getElementById('main'));

myChart.setOption({

// 图表配置...

});

```

三、运行结果

完成以上步骤后，你的Vue应用中就应该能成功显示ECharts图表了。

四、按需引入

默认引入的ECharts包包含了所有图表和组件，体积较大。如果你的项目对体积有严格要求，你可以按需引入所需的模块。例如，如果你只使用了柱状图、提示框和标题组件，那么只引入这些模块即可。这样可以将打包后的体积从多KB减小到170多KB。引入后的使用方式和全局引入相同。

在Vue项目中引入ECharts图表库

方法一：直接在Home.vue中引入所需模块

在Vue组件Home.vue中，我们需要引入ECharts图表库的相关模块来创建图表。下面是引入模块的一种常见方式：

我们通过 `require` 命令引入ECharts主模块：

```javascript

var echarts = require('echarts/lib/echarts');

```

接着，为了绘制柱状图，我们需要引入柱状图模块：

```javascript

require('echarts/lib/chart/bar');

```

为了增强用户体验，我们还需要引入提示框和标题组件：

```javascript

require('echarts/lib/component/tooltip');

require('echarts/lib/component/title');

```

方法二：全局在main.js中引入ECharts模块

在Vue项目的入口文件main.js中，我们可以选择全局引入ECharts模块及其相关组件，这样在项目的其他组件中就可以直接使用ECharts了。下面是具体的引入方式：

通过 `import` 命令全局引入ECharts主模块和其他相关模块：

```javascript

import ECharts from 'echarts/lib/echarts';

import 'echarts/lib/chart/bar';

import 'echarts/lib/chart/pie'; // 引入饼状图等其他需要的图表类型

import 'echarts/lib/component/tooltip';

import 'echarts/lib/component/title';

import 'echarts/lib/component/toolbox'; // 引入工具箱组件，提供保存图片等功能

import 'echarts/lib/component/legend'; // 引入图例组件

```

然后，我们将ECharts库挂载到Vue的原型上，方便在其他组件中使用：

```javascript

Vue.prototype.$echarts = ECharts;

```

注意的问题及解决方案

在获取DOM元素时，传统的做法是通过元素的id来获取，如 `document.getElementById('main')`。但在Vue单页面应用中，如果一个页面内存在多个相同的id，这种方法就会导致问题。例如，如果在同一个页面内复用组件并都使用相同的id，只有第一个组件能正常显示，而后续的组件则无法显示。

为了解决这个问题，我们可以使用Vue提供的 `$refs` 对象来获取DOM。通过在需要获取DOM的组件上设置 `ref` 属性，我们就可以通过 `this.$refs` 来访问这个DOM元素。例如：

在HTML模板中设置 `ref="main"`：`

`。然后，在Vue组件中通过 `this.$refs.main` 或 `this.$refs['main']` 来获取这个DOM元素。这种方式获取DOM元素无需担心id的唯一性问题。这样我们就可以在Vue的任意组件中方便地创建和配置ECharts图表了。