一、dataV介绍
一别多日，好久没有和大家相见了。其一的原因是因为公司的项目，其二就是因为太懒了。现在给大家浅浅的介绍一下这个好用的大屏展示框架吧。如果后续有深入的话，我会出一个详解版本的。
一、dataV介绍
前言:由于当前的大数据时代，人们对所产生的数据都有十分大的展示需求，都需要更美观，更加直接的方式去查看数据。
datav网址：Welcome | DataV
二、dataV的使用
注意：目前的使用版本只支持vue2，不支持vue3.虽然官网上面有vue3的版本，但是我实际用起来很麻烦，网上看了很多的解决办法，选择了使用了有人把datav重新改写了一次的版本。但是内容是完全一致的。如果你的项目是vue3的话可以选择使用这个网站
套壳网站：DataV Vue3+TS+Vite版 | DataV - Vue3
由于我使用的是这个修改版本，那我就这个版本+vue3来进行讲解。
2.1 安装
安装，此处使用pnpm工具，也可以yarn,npm等
pnpm install @kjgl77/datav-vue3
2.2全局引入
// main.ts中全局引入
import { createApp } from 'vue'
import DataVVue3 from '@kjgl77/datav-vue3'
const app = createApp(App)
app.use(DataVVue3)
app.mount('#app')
2.3使用全屏容器
数据可视化页面一般在浏览器中进行全屏展示，全屏容器将根据屏幕比例及当前浏览器窗口大小，自动进行缩放处理。浏览器全屏后，全屏容器将充满屏幕。
使用datav可以快速的构建出一个大屏框架
三、使用echarts
3.1 下载echarts
从npm获取
npm install echarts
3.2示例代码
第一步：引入
import * as echarts from "echarts";
第二步：在mounted生命周期函数中调用方法
mounted() {
this.setMap()
},
第三步：创建一个dom元素
第四步：在setMap()方法中找到这个dom元素
let myChart = echarts.init(this.$refs.chart)
第五步：将echarts中的示例option引入进来
const option = {...你需要的配置}
第六步：将刚才的设置挂载到上这个dom元素中去
myChart.setOption(option)
将这个封装成一个组件，然后使用组件。