前置知识
效果图
使用技术
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