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.调用
注意：这里和静态数据创建图例是有区别的
需要在获取数据之后直接创建图例
