vue 可视化布局工具_简单的可视化大屏，让你的前端页面炫起来！

做可视化大屏的应该知道，阿里云有一套dataV大屏可视化工具，但是个人版只能免费试用几天。里面有企业版，专业版，至尊版，都是要付费的，而且价格不菲。让原本就不富裕的我望而却步。

最近我们找到了一款类阿里的dataV工具，开箱即用，简单粗暴。能够支持vue、react前端框架，让人爱不释手。文章结尾附上了vue版和react版的地址。有兴趣的可以收藏起来。

先来观摩一下官方效果图:

看着还是非常高逼格，有么有？

阿里云的官方对dataV是这么说的，可以借鉴的看一看。

DataV数据可视化是使用可视化应用的方式来分析并展示庞杂数据的产品。DataV旨让更多的人看到数据可视化的魅力，帮助非专业的工程师通过图形化的界面轻松搭建专业水准的可视化应用，满足您会议展览、业务监控、风险预警、地理信息分析等多种业务的展示需求。

相比于传统图表与数据仪表盘，如今的数据可视化致力于用更生动、友好的形式，即时呈现隐藏在瞬息万变且庞杂数据背后的业务洞察。无论在零售、物流、电力、水利、环保、还是交通领域，通过交互式实时数据可视化应用来帮助业务人员发现并诊断业务问题，越来越成为大数据解决方案中不可或缺的一环。

最关键的来了，如何使用？

自己创建一个vue或者react项目，然后执行下载命令。

npm install @jiaminghi/data-view

或 yarn add @jiaminghi/data-view

也支持cdn

在vue项目里使用

import Vue from 'vue'

import DataV from '@jiaminghi/data-view'

Vue.use(DataV)

// 按需引入

import { borderBox1 } from '@jiaminghi/data-view'

Vue.use(borderBox1)

在react项目里使用，注意您的React版本需要在16.8及以上。

import datav from "@jiaminghi/data-view-react";

datav.BorderBox1;

// 或者

import { BorderBox1 } from "@jiaminghi/data-view-react";

// 按需引入

import BorderBox1 from "@jiaminghi/data-view-react/es/borderBox1";

具体的细节操作可以查看官网，事例还是非常的详细的。

vue版地址:datav.jiaminghi.com

react版地址:datav-react.jiaminghi.com

git地址:

https://gitee.com/sdwl_git/DataV-React

https://github.com/DataV-Team/DataV

---

如果对你有帮助，点个赞吧，感谢你的支持！