今天在网上冲浪的时候发现一个可以快速开发一些简单但是很炫酷的图表：

# DataV Vue3

介绍：

DataV Vue3 是一个基于 Vue3+vite+ts 开发的pc、移动端组件库，全面拥抱 Vue3 生态，由二次开发而来，里面封装了风格样式好看的组件

看下图！

屏幕截图 2023-03-17 230910.png

屏幕截图 2023-03-17 231159.png

屏幕截图 2023-03-17 231300.png

图中的样式都是动态的，使用也比较简单，下面我们来配置一下

使用方法也可以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文件中可以直接使用

<dv-decoration-1 :color="['pink','yellow']" style="width:200px;height:50px;" />

局部引入

<!-- 在.vue文件的script中import部分组件 -->
<script lang="ts" setup>
import { Decoration1, Decoration2 } from '@kjgl77/datav-vue3'
</script>
<template>
  <!-- 引入之后就可以在vue的template中直接使用 -->
  <decoration-1 :color="['pink','yellow']" style="width:200px;height:50px;" />
  <decoration-2 :reverse="true" style="width:5px;height:150px;" />
</template>

目前看来库中封装的组件有点少，但是库中的组件真的挺好用的，其它的要等你们自己去封装进来，或者是期待作者的更新，也期待以后的组件库都会做成响应式的

如果感兴趣的人就加入来改造一下吧，进步空间还是很大的。

好吧！地址自取：DataV - Vue3

不使用Echarts快速开发移动图表