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

最新推荐文章于 2024-05-30 19:11:38 发布
最新推荐文章于 2024-05-30 19:11:38 发布
阅读量1w 收藏 42
点赞数 7
分类专栏： React技术栈 VUE技术栈 实用组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43648947/article/details/106474021
版权

简单demo ，文尾有github demo地址

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

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

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

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

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

官方效果图

最低0.47元/天 解锁文章
@baby张
关注
  • 7
    点赞
  • 踩
  • 42
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
datav-component:datav大屏数据可视化自定义组件
05-08
阿里巴巴的DataV大屏数据可视化系统，就是这样一个强大的平台，它帮助企业快速构建出专业且富有视觉冲击力的数据展示大屏。在这个主题中，我们将深入探讨"datav-component"——DataV中的大屏数据可视化自定义组件。 ...
my-datav:react + datav 炫酷的大屏数据可视化展示
04-28
my-datav Author: "@baby张 " Demo在线地址： 项目运行 # 安装依赖 1. npm install || yarn install # 直接运行项目 2.npm run dev || yarn dev || yarn start # http://localhost:3000/ 来源地址 ，来点star呗
DataV在Vue中的应用指南
letterljhx的博客
11-20 1529
利用Vue实现精彩的数据可视化 —— DataV在Vue中的应用指南
Vue数据可视化组件库源码+项目说明（类似阿里DataV，大屏数据展示）（提供SVG的边框及装饰、图表等组件）.zip
03-15
【资源说明】 1、该资源包括项目的全部源码，下载可以直接使用！ 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 3、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。 Vue数据可视化组件库源码+项目说明（类似阿里DataV，大屏数据展示）（提供SVG的边框及装饰、图表、水位图、飞线图等组件）.zip Vue数据可视化组件库源码+项目说明（类似阿里DataV，大屏数据展示）（提供SVG的边框及装饰、图表、水位图、飞线图等组件）.zip Vue数据可视化组件库源码+项目说明（类似阿里DataV，大屏数据展示）（提供SVG的边框及装饰、图表、水位图、飞线图等组件）.zip Vue数据可视化组件库源码+项目说明（类似阿里DataV，大屏数据展示）（提供SVG的边框及装饰、图表、水位图、飞线图等组件）.zip Vue数据可视化组件库源码+项目说明（类似阿里DataV，大屏数据展示）（提供SVG的边框及装饰、图表、水位图、飞线图等组件）.zip
vue开发——可视化大屏
最新发布
weixin_70056219的博客
05-30 2494
利用vue做前端大屏时的总结及一些解决方法
Vite,Vue3项目引入dataV报错的解决方法
qq_42372534的博客
09-07 7857
背景:开发一个大屏项目中,需要是要DataV的那边边框,装饰等,只是DataV是基于vue2的,vue3版的作者还在开发中,于是翻了DataV的源码,发现使用esm方式时是直接引入源码而不经过打包,其源码中使用的vue语法vue3也支持,所以可以直接在vue3中引入使用.
Vue第32篇，DataV是什么，jiaminghi/data-view是什么，如何在Vue中使用jiaminghi/data-view（如何在Vue中使用DataV）
weixin_65793170的博客
03-01 2万+
⭐相信大家在平时工作中，难免会遇到开发大屏的需求，页面中有很多比较炫酷的CSS效果。这里给大家推荐一款大屏数据展示组件库，里面有各种边框、装饰、图标、飞线图、水位图、轮播表等等，支持vue和react，有很多炫酷效果。这里给大家记录一下 DataV 是阿里云推出的数据可视化工具，是阿里云的数据可视化应用搭建平台，‌旨在让更多的人看到数据可视化的魅力，‌帮助非专业的工程师通过图形化的界面轻松搭建专业水准的可视化应用，‌满足会议展览、‌业务监控、‌风险预警、‌地理信息分析等多种业务的展示需求。‌主要用于创建
react+datav+echarts实现可视化数据大屏
m0_58002043的博客
12-14 2万+
最近有点闲，就学习了下react，没想到就把react学完了，觉得还不错，就打算出一把react+datav的简易版可视化数据大屏供大家做个参考。 📓 datav框架 📓 echarts 2，路由设计 📓在路由上，我是绑定一个index的路由作为组件，然后在index添加自适应的全局容器，当容器设置完成后，就在就在将其他的小的模块给一个个导入进来，
DataV 你值得拥有的大屏展示工具
热门推荐
叶青
04-23 3万+
DataV Vue 大屏数据展示组件库（项目地址： http://datav.jiaminghi.com/），具有以下几个特性： 开源免费 长期维护，不断添加新组件以丰富组件库 开箱即用 大部分组件设置宽高或配置简单的数据即可使用 视觉绚丽 通过组合不同的配置项可以达到多变的视觉效果 效果图 先来几张作者的效果图，看下DataV的魅力，之前我也试用过阿里云的Datav，觉得还不错，就是...
react + datav 炫酷的大屏数据可视化展示.zip
06-10
总结，"react + datav 炫酷的大屏数据可视化展示"项目展示了如何利用React的组件化特性，配合Datav的强大图表库，来创建出具有吸引力的数据展示方案。同时，项目中也运用了JavaScript、CSS和响应式设计等技术，以...
DataV-React:React数据可视化组件库（类似阿里DataV，大屏数据展示），提供SVG的边框及装饰、图表、水位图、飞线图等组件，简单易用，长期更新
05-01
DataV-React 是一个基于React的数据可视化组件库(当然也有) 提供用于提升页面视觉效果的SVG边框和装饰 提供常用的图表如折线图等 飞线图/轮播表等其他组件 注意事项 使用了 React Hooks, 简化了许多内部工作。您需要...
vue大屏 三屏显示 包含地图组件
05-25
直接npm install ， npm run serve 就可以启动了
vue-react：在Vue应用程序中将React组件用作Vue组件
02-04
vue-react是Vue.js的插件，它使您可以像使用Vue组件一样使用React组件。 安装 npm npm install vue-react --save 如果尚未安装，请安装react和react-dom软件包。 还安装babel插件。 npm install react react-dom ...
低代码数据可视化开源项目源码阅读总结
m0_57307213的博客
09-12 591
该项目是一款数据可视化应用搭建工具，是仿照的阿里云datav项目，使用vue技术栈进行实现的。因为本人工作中需要开发的可视化拖拽项目也是仿照的阿里云datav项目，但是阿里云项目并未开源，故想要通过阅读该项目的项目实现思路，以应用到后续工作中的可视化拖拽项目的开发中。画布中除了柱状图，通用标题等组件库中的组件，也有类型是组的组件，当我们选中一个或多个组件进行成组操作的时候，会创建一个类型为组的组件，将选中的组件作为children包裹起来。那么，在画布中，组组件和组件库组件的位置是如何定位的？
Mac版：基于React框架的DataV环境搭建（含nodejs、nvm、webpack与antd的配置）-- 保姆级
二狗蛋子的blog
03-07 1628
本文主要详细介绍在Mac OS上如何搭建基于React框架的DataV环境、搭建环境中可能会遇到所有的问题、环境测试及相关的技术介绍（包含nodejs、nvm、React框架、webpack、antd和DataV）。Node.js，是一个基于Chrome V8引擎（单线程）的JavaScript的运行环境。它使用了一个事件驱动，异步非阻塞式的模型，其优点是高性能、线程安全。避免了频繁创建、切换线程的开销，使执行速度更加迅速，资源占用小。
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏） 、动画组件库、文本编辑器，富文本、Markdown，3D组件库】
程序员猫爪
11-29 2万+
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏） 、动画组件库、文本编辑器，富文本Markdown，3D组件库】
DataV - 免费开源的 Vue / React 大屏数据展示组件库，使用简单、效果酷炫的前端数据可视化开发插件
那些免费的砖
04-28 2001
最近公众号有粉丝留言说想找一款数据大屏组件，这篇文章推荐的这款还不错， Vue / React 都可以用。
Vue中如何进行数据可视化大屏展示
IT徐师兄
06-16 1万+
通过本文的介绍，我们学习了如何在Vue中进行数据可视化大屏展示。首先，我们选择了Echarts作为可视化库，并创建了一个可视化组件。然后，我们创建了一个数据模型，并封装了一个大屏组件，用于从后端获取数据并生成图表选项。最后，我们学习了如何封装常用的图表组件，以提高代码的复用性和可维护性。通过这些技术，我们可以快速地实现复杂的数据可视化大屏展示。
无法找到模块“@jiaminghi/data-view-react”的声明文件。“e:/work/work/energy-manage-server/node_modules/@jiaminghi/d
shylock的可爱博客
12-10 4751
无法找到模块“@jiaminghi/data-view-react”的声明文件。“e:/work/work/energy-manage-server/node_modules/@jiaminghi/data-view-react/lib/index/index.js”隐式拥有 “any” 类型。在src/typings.d.ts文件中引入模块。(如果存在)，或者添加一个包含。的新声明(.d.ts)文件)
使用Vue-React组件库
06-12
Vue-React组件库是一个同时支持Vue和React的UI组件库，可以在Vue和React项目中使用。下面以Element-React为例，介绍如何使用Vue-React组件库。 1. 安装Element-React：可以使用npm或yarn安装，命令如下： ``` npm install element-react --save 或 yarn add element-react ``` 2. 引入样式文件：在主入口文件中引入Element-React的样式文件，如下： ``` import 'element-react/dist/theme-chalk/index.css'; ``` 3. 引入组件：在Vue或React组件中按需引入需要使用的Element-React组件，如下： 在Vue组件中： ``` <template> <div> <el-button>Vue Button</el-button> </div> </template> <script> import { Button } from 'element-react'; export default { components: { 'el-button': Button } } </script> ``` 在React组件中： ``` import { Button } from 'element-react'; class MyComponent extends React.Component { render() { return ( <div> <Button>React Button</Button> </div> ) } } ``` 4. 使用组件：在Vue或React组件中使用引入的Element-React组件，如下： 在Vue组件中： ``` <template> <div> <el-button>Vue Button</el-button> </div> </template> ``` 在React组件中： ``` import { Button } from 'element-react'; class MyComponent extends React.Component { render() { return ( <div> <Button>React Button</Button> </div> ) } } ``` 需要注意的是，不同的Vue-React组件库使用方法略有不同，需要根据具体组件库的文档进行使用。同时，也需要根据项目需要选择合适的组件库，避免出现兼容性和功能不匹配的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值