一.实现效果：

Vue3-Vite-Ts数据大屏

二.vue3项目构建：

前言：随着vue2官宣年底停止维护不在提供解决问题的帮助后，vue3+ts+vite大家已经都开始用了，最近也在学习，并结合DataV和Echarts搭建了一个数据大屏，多端自适应，拿来即用！

1.使用vite构建一个vue3项目

npm create vite@latest

Project name：你的项目名； Select a framework:框架选择Vue； Select a variant:语言选择TypeSceript

cd vite-project npm install npm run dev

这样你的项目就创建好了

三.安装DataV

这里因为我们用的是Vue3+TS+Vite，所以推荐大家使用下边这个：

DataV

安装，此处使用pnpm工具，也可以yarn,npm等：

pnpm install @kjgl77/datav-vue3

全局引入：

// main.ts中全局引入 import { createApp } from ‘vue’ import DataVVue3 from ‘@kjgl77/datav-vue3’ const app = createApp(App) app.use(DataVVue3) app.mount(‘#app’)

引入后在.vue文件中可以直接使用:

局部引入：

安装并配置好以后就可以使用它里边的一些组件了，有炫酷的动态边框、装饰以及一些基本的图表等等，并且有详细的配置项文档可以帮助我们更快地去做排版。本文中展示效果的边框就是使用的DataV中的组件构建的。

四.安装Echarts

npm i echarts -S 或 npm install echarts --save

在页面中使用：

import * as echarts from 'echarts';

import {init, EChartsOption} from 'echarts';

Echarts中文社区网址：

Echarts中文社区

里边有好多炫酷的各类图表，大家可以更具自己业务需求去配置。

五.实现代码：

代码中ifrname引入的是canvas实现的粒子效果，大家需要的话可以翻看我的相关博文；需要图片的话留或者私信我。

六.所需图片等资源下载：

所需图片等资源下载

七.地图数据工具：

推荐大家使用阿里云的数据可视化平台后续会整理一期这个平台的使用方法。

数据可视化平台后

八.留在最后：

感谢大家对我的支持； 如果我的博文可以帮到大家，记得点个关注一键三连哦； 乾坤未定，你我皆是黑马！！

查看原文