Datav超炫酷的可视化,大屏数据展示组件库-dataV组件库,“react-vue -组件库”_@baby张~的博客-CSDN博客

baacloud免费翻墙vpn注册使用

来源: Datav超炫酷的可视化,大屏数据展示组件库-dataV组件库,“react-vue -组件库”_@baby张~的博客-CSDN博客

简单demo ,文尾有github demo地址

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

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

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

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

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

官方效果图


看着还是有点东西的,那么我们来实际操作一波看看。

自己动手撸

创建一个react或者vue项目

npm install @jiaminghi/data-view
或 yarn add @jiaminghi/data-view
  • 1
  • 2

也支持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> 
  • 1
  • 2
  • 3
  • 4

安装完引入我们需要用到的组件,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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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

最后实现的就是主图展示的

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

实际应用,升级版数据大屏项目

核心:Datav+G2+L7+Canvas+手写翻牌器
在这里插入图片描述
面朝科技-欢迎你的加入:https://www.mianchao.com/

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏