VUE 整合 ECharts

一、vue 引入 ECharts依赖

npm install echarts --save

二、创建盒子

<div ref="chars" style="height: 500px;width:800px;"></div>

解释说明

ref="chars" 是 Vue.js 中一个非常有用的特性，用于给 DOM 元素或组件实例添加引用。通过使用 ref，你可以在 Vue 组件中轻松访问这些元素或组件。

主要功能

1.直接访问 DOM 元素:

使用 ref 可以在 Vue 组件的方法中直接访问该元素，例如获取其大小、位置等信息。

在你的例子中，this.$refs.chars 将指向对应的

元素。

2.方便与第三方库集成:

当你使用诸如 ECharts、D3.js 等第三方图表库时，可以通过 ref 轻松获取到用于渲染图表的 DOM 元素，并进行初始化和配置。

注意点

盒子需要给号长和宽，不然图例加载不出

三、vue页面导入 ECharts 库

import * as echarts from 'echarts'

四、ECharts 具体实现

1.访问ECharts官网

ECharts链接: Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html

访问之后如以下页面，点击所有示例就可以看到图

2.粘贴代码

注：这里以折线图、柱状图、饼图三个常用图例举例

（1）先明确一下使用的图例

a.折线图

b.柱状图

c.饼图

注：以上就是这次举例的三个图例

（2）点击图例，点击完整代码

a.折线图

b.柱状图

c.饼图

（3）创建一个方法将图例代码放进去

a.折线图

b.柱状图

c.饼图

（4）注意事项和要改的地方

1.官网复制

注：复制时要选择完整代码复制

2.复制到方法时，要该的地方

说明：

const myChart: 定义一个常量 myChart，用于存储创建的 ECharts 实例。

echarts.init(this.$refs.chars): 调用 ECharts 的 init 方法来初始化图表。this.$refs.chars 是 Vue.js 中的一个引用，指向模板中定义的某个 DOM 元素（通常是一个

），这个元素将用于展示图表。

3.柱状图和饼图与以上改的地方一样

4.确保 ECharts 的初始化代码放在 mounted 钩子中，而不是 created 钩子中。这样可以确保 DOM 元素已经被挂载。

 

五、启动VUE项目测试

a.折线图

b.柱状图

c.饼图

六、动态数据的实现

以上代码只是测试所有数据都是静态，实现动态数据只需要掉后台接口查询，然后将数据赋值就行了

1.定义数据存储

2.赋值

这里只表明三个常用图例数据赋值地点

a.折线图

b.柱状图

c.饼图

饼图和折线图、柱状图存储数据格式不同

3.调用

注意：这里和静态数据创建图例是有区别的

需要在获取数据之后直接创建图例