推荐这几个数据大屏可视化开发工具
❝
前沿:最近有需求开始接触数据可视化的开发,前期调研和体验了国内几家比较大的数据可视化解决方案提供商,并对开发中会涉及到一些工具做了筛选,经常在社区看到有小伙伴反馈相关方面的需求,于是借此机会把我整理的一些工具分享出来,后期开发完成再针对整个过程中的心得体会进行分享
❞
1.前期调研
❝
开发前,大概先参考下国内现有优秀的数据大屏解决方案提供商,知道如下几个
❞
阿里云(DataV)文档链接
网易有数(EasyScreen)文档链接
腾讯云(腾讯云图)文档链接
❝
不过这几家厂商都是付费版本,唯独阿里云和网易有数还有个15天的免费试用体验时间
❞
2.功能解剖
通过前期调研,大概梳理了一个简单的数据大屏可视化编辑所需要的功能包括如下几点
3.工具推荐
❝
针对功能解剖后,拆解涉及的功能模块,不同模块中涉及到比如图表、拖拽、收缩放大、代码编辑器、图片导出、grid布局、动态表单等功能,如果你的前端团队比较小,无法独立去开发涉及到的这些功能模块,可以通过使用社区现有的成熟的开源工具来解决这些问题,避免重复造轮子
❞
3.1 Antv
❝
官方介绍:
AntV
是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。官网链接 数据大屏开发中,可用于做组件控件区如饼图、环型图等的渲染❞
Antv的产品线很多,我主要用的是G2Plot
开箱即用的图表库,简单易用,而且蚂蚁金服家的ChartCube
图表魔方也用的是G2Plot
,主要借Antv来在线制作图,并快速生成code ChartCube官方链接
3.2 Codemirror
❝
Codemirror
是一个在线代码编辑器工具,能够实时在线代码高亮显示,而且许多社区很火的在线代码编辑器也是基于Codemirror开发的,数据大屏开发中,可用于做数据源的管理,支持在线编辑代码 官网链接❞
也有开发者在原先基础上封装了vue和react版本的
vue-codemirror
:文档链接react-codemirror
:文档链接
如果是配置json数据源还可以用
jsoneditor
:文档链接
3.3 Vue.Draggable(Sortable.js)
❝
官方介绍:
Vue.Draggable
是基于 Sortable.js 的 Vue 拖放组件。它允许拖放和视图同步,基于并提供 Sortable.js 的所有功能,数据大屏开发中,可用于做控件拖拉功能,将不同控件的拖拉到画布中形成大屏。文档链接❞
如果你不想用工具库,你也可以直接在H5的Drag
和Drop
API基础上开发,直接在要拖拽的元素上将draggable属性设置为true即可 文档链接
3.4 vue-draggable-resizable
❝
vue-draggable-resizable
组件用于可调整大小和可拖动的元素,且没有第三方库依赖。数据大屏开发中,可用于做画布中组件大小的调整。文档链接❞
3.5 vue-grid-layout
❝
官方介绍:
vue-grid-layout
是一个类似于Gridster的栅格布局系统, 适用于Vue.js。灵感源自于 React-Grid-Layout,简单说就是一个vue栅格拖动布局的组件,用来实现可以拖拽的vue布局。数据大屏开发中,可用于画布中组件的布局。文档链接❞
3.6 html2canvas
❝
html2canvas
可以轻松地帮你将HTML代码转换成Canvas,数据大屏开发中,可用于做大屏的图片生成,通过静态图片生成来分享数据。文档链接❞
3.7 vcolorpicker
❝
vcolorpicker
是vue颜色选择器组件,是仿照Angular的color-picker插件开发的 在数据大屏开发中,可用于做背景色等进行颜色选择 文档链接❞
不过还是建议使用第三方组件库的颜色选择器,比如element组件库的ColorPicker,用户体验更佳
3.8 vue-form-maker
❝
vue-form-maker
是Vue动态生成表单组件,可以根据数据配置表单,不过使用的UI库是iView,当然你可以根据你使用的组件库进行修改。数据大屏开发中,可用于组件区的基本属性等表单的动态生成文档链接❞
你也可以参考之前????酱的从0到1开发动态表单
4.文章彩蛋
之前刚上掘金lv4
的时候,有小伙伴就调侃树酱说,“树酱君,你要“女装”呀”(啊呆你看你带的好节奏),树酱我这一个180的大壮汉女装是见不得人的,还是不要玷污社区这一片净土。于是我换一种文明点的形式,树酱君一直很喜欢音乐,平时唱歌????也是我生活中不可缺少的一种乐趣,一首周杰伦的《我是如此相信》(快手网页版)送给各位支持我的小伙伴????
推荐这几个数据大屏可视化开发工具相关推荐
- 大屏数据可视化源码_AxureBI数据大屏可视化原型设计软件
产品名称:70套BI数据大屏可视化Axure RP原型设计软件 软件版本: Axure 8,Axure 9(兼容) 作品类型: BI数据大屏可视化Axure原型 文件类型: .rp (可通过 Axur ...
- 一个基于Python数据大屏可视化开源项目
今天给大家介绍一个开源数据大屏可视化工具. 项目简介 这是一个基于Python开发的,结构简单的项目.可通过配置Json的数据,实现数据报表大屏显示. 优点:代码清晰.结构简单.配置Json数据 ...
- 数据大屏可视化展示系统有什么作用
数据大屏可视化展示系统指的是用在大数据领域前端实时显示的显示屏,这在当前数字化经济兴起的今天越来越普及,比如一些企业的展厅或者控制室都会打造一个显示大数据平台用来展示企业的各种数据,帮助管理人员分析各 ...
- 基于Vue的数据可视化设计框架,数据大屏可视化编辑器
开发文档(★★★★★) 请访问 https://lizhensheng.github.io/vue-data-view/ 完整代码下载地址:基于Vue的数据可视化设计框架,数据大屏可视化编辑器 简介 ...
- 前端基础第二天项目 大数据大屏可视化项目
大数据大屏可视化项目 01-项目介绍 应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出.我们引 ...
- 数据大屏可视化2-超全的基础图形模板(基础模版)
内容整理于网络,因为忘了之前是从那几篇文章中整理的了,所以转载的连接不知道填啥,如果作者有看到的话,可以联系下我,谢谢 注意:所有带有import random的都是生成随机数展示的,如果有需要研究对 ...
- 思迈特软件Smartbi:如何快速打造数据大屏可视化展示系统
数据大屏可视化展示系统的定义 数据大屏可视化展示系统指的是用在大数据领域前端实时显示的显示屏,这在当前数字化经济兴起的今天越来越普及,比如一些企业的展厅或者控制室都会打造一个显示大数据平台用来展示企业 ...
- 数聚易视重磅推出,助力企业级数据大屏可视化
数字化转型趋势下,以大屏为主要载体的数据可视化需求日益增加.大屏给人以震撼的视觉冲击,呈现直观丰富的信息,有效帮助管理或业务人员决策.判断.发现问题.诊断问题,已经成为数字化管理中不可或缺的场景之一. ...
- 【可视化开发】数据大屏可视化技术汇总
由于工作原因,需要用到一些大屏可视化技术,于是通过网上整理.自我学习等多途径,汇总了一份大屏可视化技术的思维导图,如下: 这里主要汇总的是: 大屏可视化技术! 大屏可视化技术! 大屏可视化技术! 重要 ...
- python flask大作业,疫情数据大屏可视化展示
整体效果 功能描述 本作业从MongoDB取出中国和世界疫情的相关数据进行处理和分析,然后将处理好的数据以Json的形式分别加载到相应的网站,基于ajax异步加载实现轮询,设定每一个小时发起一次请求, ...
最新文章
- 【c语言】蓝桥杯算法提高 P0402
- python django bootstrap_导入 201901
- ICDE:POLARDB定义云原生数据库
- 把一个人的特点写具体作文_五年级下册语文习作把一个人的特点写具体教学视频+教案课件+范文...
- 3.第九章 树--9.3 二叉树结点类表示
- servlet监听器Listener介绍和使用
- 时间定位表达式-用于时间的加、减调整
- 游戏筑基开发之环形数组(C语言)
- [linux]查看机器有几个cpu,是否支持64位
- MTK FM收音机修改门限减少杂台
- October CMS - 快速入门 1 安装 1
- 佐治亚理工计算机科学录取,佐治亚理工学院计算机科学排名第4(2018年TFE美国排名)...
- html内部css调节背景图片的大小,css中怎么改变背景图片大小?
- Hexo博客搭建之PicGo+Github免费图床使用指南
- python随笔:round函数的使用
- 签电子合同的流程是怎样的
- JAVA基于局域网的聊天室系统(源代码+论文)
- 水星mw300r虚拟服务器,水星(Mercury)MW300R无线路由器设置
- 临床执业助理医师(综合练习)题库【5】
- 论文推荐-计算机视觉
热门文章
- java:xml数据转json
- 机器学习 | MATLAB实现GLM广义线性模型参数设定
- IPV4怎么转换成IPV6?
- 浏览器引擎系列:Webkit
- 三阶矩阵的lu分解详细步骤_矩阵的LU分解
- format mla_mlaformat是什么
- 【运筹学】整数规划、分支定界法总结 ( 整数规划 | 分支定界法 | 整数规划问题 | 松弛问题 | 分支定界法 | 分支定界法概念 | 分支定界法步骤 ) ★★
- oracle查询锁表SQL
- matlab中dzdx,MatConvnet工具箱使用手册翻译理解一
- 浙江服务器机房动环监控系统,一种基于组态王软件的服务器机房动环监控系统...