在vue3中，如何优雅的使用echarts之实现大屏项目

前置知识 

效果图

使用技术 

Vue3 + Echarts + Gasp

Gasp：是一个 JavaScript动画库,它支持快速开发高性能的 Web 动画。在本项目中，主要是用于做轨迹运动

所需安装的插件

npm i echarts
npm i countup.js 数字滚动特效
npm i gsap javascript动画库
npm i axios
npm i normalize.css 初始化样式文件 
npm i lodash javascript工具函数库    https://www.lodashjs.com/
npm i sass css预处理工具 

适配目标

1920*1080px 设计稿尺寸

目标设备：16:9

前期准备

封装echarts

在大屏中，如果每个图表都去单独写 init 以及进行resize监听机会显得很麻烦，这里我们可以将这些重复的步骤封装成一个hooks，这样在使用的时候就可以统一的进行初始化和进行resize监听。

具体代码如下：

src/hooks/useEcharts.js

import * as echarts from "echarts";
import { ref, onMo