超炫酷的可视化,大屏数据展示组件库-dataV组件库,“react-vue -组件库”

超炫酷的可视化,大屏数据展示组件库-dataV组件库,“react-vue -组件库”_第1张图片
对可视化有所了解的应该都知道,某云平台的一款datav大屏可视化的工具,作者前年买了个个人版的,直接在页面上拖住就可以了确实很强。最近平台发来邮件,说我的个人版datav到期了,本来想续租,发现之前的个人版下架了,只剩下企业版、专业版、至尊版,最便宜的企业版一年4800,看着这价钱我慌了,够我吃一年小龙虾的了,不香嘛。果断放弃续费。。。

于是乎,就发现了这款github刚出来几个月的组件库。datav

超炫酷的可视化,大屏数据展示组件库-dataV组件库,“react-vue -组件库”_第2张图片

如他所言:开源长期维护, 目前支持vue 、react、npm

所以组件都有vue和react版可以切换,很贴心。

svg绘制的特效,也就避免大屏幕缩放失真的问题

官方效果图

超炫酷的可视化,大屏数据展示组件库-dataV组件库,“react-vue -组件库”_第3张图片

超炫酷的可视化,大屏数据展示组件库-dataV组件库,“react-vue -组件库”_第4张图片

超炫酷的可视化,大屏数据展示组件库-dataV组件库,“react-vue -组件库”_第5张图片
看着还是有点东西的,那么我们来实际操作一波看看。

自己动手撸

创建一个react或者vue项目

npm install @jiaminghi/data-view
或 yarn add @jiaminghi/data-view

也支持cdn

<!--调试版-->
  <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.map.vue.js"></script>
<!--压缩版 生产版本-->
  <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.min.vue.js"></script> 

安装完引入我们需要用到的组件,dom里直接使用组件

注意:它有react和vue版本,使用时别忘了切换

import { BorderBox1 ,BorderBox8 ,BorderBox13,Decoration1 ,ScrollBoard,ScrollRankingBoard } from '@jiaminghi/data-view-react'

 <BorderBox8>
  <div className="xpanel">
    <div className="fill-h" id="mainMap3"></div>
  </div>
 </BorderBox8>

还可以配合其他的图表使用,我这里还用了echarts

最后实现的就是主图展示的
超炫酷的可视化,大屏数据展示组件库-dataV组件库,“react-vue -组件库”_第6张图片

github Demo地址:https://github.com/babybrotherzb/my-datav

你可能感兴趣的:(React技术栈,VUE技术栈,实用组件)