大家注意：因为微信最近又改了推送机制，经常有小伙伴说错过了之前被删的文章，或者一些限时福利，错过了就是错过了。所以建议大家加个星标，就能第一时间收到推送。

大家好，我是「前端实验室」爱分享的了不起~

大屏数据可视化，在前端数据展示方面越来越普遍！毕竟这对项目的高-大-上有着非常重要的效用~

今天，就为大家分享一款开源免费，开箱即用的组件库：DataV

DataV 是一款基于 Vue 开发的数据可视化组件库，主要用于开发大屏数据展示页面，即数据可视化。

DataV具体怎么样？语言太抽象，让我们来看几个Demo图例。

通过DataV就能完成上图中的效果！如果这满足你的预期，我们接着往下看。

DataV内置了多种类型组件，让开发者可以轻松构建出专业酷炫、视觉丰富的数据大屏界面。

注意：阿里云也有一款叫 DataV 的产品，用于大屏数据展示的付费数据化产品，输入表格数据可以得到大屏数据面板。不要搞混淆了哦~

DataV组件库依赖Vue或React，要想使用它，创建一个Vue/React项目是必须的。

步骤 1：搭建 Vue2 项目

搭建 Vue2 项目不是本文重点，这里就跳过了。大家可以查阅 Vue官网进行了解：https://cn.vuejs.org/

Vue3也是可以的，但Vue3中有些组件还没兼容完成。建议大家用Vue2先

步骤 2：在Vue项目下进行组件库安装。

也支持按需引入。按需引入仅支持基于ES module的tree shaking，示例如下：

DataV有15个大类的组件库。

大家可以根据自己的需求进行选择。

最后再来一个瞎混搭的页面！有点丑~