前端开发——数据可视化搭建推荐

时间: 作者: 点击量:

数据可视化越来越盛行,常见的就是一些大屏展示,将数据进行以图表的形式进行展示,简单直观,清晰明了,更好的能体现出数据的价值。

前端开发——可视化搭建推荐一波

 

今天讨论不是怎么设计出这样的大屏,今天我们看看怎样实现这样的大屏设计器,先推荐一波现有的给钱就能用的大屏设计器。

大厂的大屏设计器

阿里的Datav

地址:
https://www.aliyun.com/product/bigdata/datav

我个人版使用过期了,图片就贴了张官网的,感兴趣有计划的可以去看看,一个账号只有一次的免费30天试用机会,在此期间可以创建大屏应用,保存预览查看。

前端开发——可视化搭建推荐一波

datav

 

京东云数据大屏

地址:
https://login.jdcloud.com/oauth/wechat/login?returnUrl=https%3A%2F%2Fultrav-console.jdcloud.com%2F&eid=4BRTMKVEDQU6U7LTI5LFQKU6P4H3JI2ZGRT7VI6JNHS5GFWGM2XT77KOOHEXJ3X2LWLJ7GXP7O2YET7NZMXXLERLQM

目前测试阶段免费,40个大屏应用,具体啥时候收费,这个就不知道了。

前端开发——可视化搭建推荐一波

京东云

 

腾讯云图

登录 腾讯云控制台,在顶部导航云产品中,选择大数据可视化服务下的腾讯云图,进入腾讯云图控制台。

前端开发——可视化搭建推荐一波

腾讯云图

 

百度数据可视化Sugar

地址: https://cloud.baidu.com/product/sugar.html

一个账号只有一次免费30天的试用机会

前端开发——可视化搭建推荐一波

sugar

袋鼠云Easy[V]数据可视化平台

地址: https://easyv.dtstack.com/

试用需要测试,面向企业

前端开发——可视化搭建推荐一波

easy [v]

我们怎么做呢

从以上几个中我们大体可以看出,可视化图片大体突出功能就是图表拖拽,数据填充,样式修改,边框底色处理。具体他们用的图表是开源的还是他们自己写了,看看我们可以采用的图表。

百度Echarts

地址: https://echarts.apache.org/zh/index.html

前端开发——可视化搭建推荐一波

echarts

 

蚂蚁金服AntV

地址: https://antv.vision/

前端开发——可视化搭建推荐一波

antv

Chart.js

地址: http://chartjs.cn/

前端开发——可视化搭建推荐一波

chart.js

以上几个都是开源免费的,可以用于商业开发,图库我们可以采用这些开源的图表库然后进行封装动态配置

前端开发——可视化搭建推荐一波

自己开发的图库配置器

 

拖拽图表可以用开源的插件vue-draggable-resizable 来实现,插件地址如下:

插件: vue-draggable-resizable

地址: https://github.com/mauricius/vue-draggable-resizable

前端开发——可视化搭建推荐一波

配置中心

 

数据配置这个时候MVVM框架的数据双向绑定就用起来很爽了,根据选择的框架可以选择响应的拖拽缩放库,本人用vue了也就放上了基于vue封装的拖拽缩放库。

 

图表边框及一些装饰库可以采用开源的插件库DataV,挺不错的不但有边框和装饰库,还有一些基础图谱和地图去使用。

插件: DataV

地址: http://datav.jiaminghi.com/

前端开发——可视化搭建推荐一波

DataV

个人写的这个暂时还没有开源,一方面是没有完善另一方面我觉得定位有问题,我写的图表配置库中几乎实现了echarts 的完全配置,但很多的东西及名词业务人员完全不知,这个东西做出来肯定不会是让程序员去操作,所以最简单最直接的展示出这个业务想要的效果就好了,所以我打算删减掉一些配置,提取出重要的属性,或者组件拆分。

说明:以上图片有些是我自己截图,有些是从官网上截图而来,如有有侵权,请及时通知我删除!如果对数据可视化有啥好的想法或者有啥建议,我们可以一起讨论,或者你们有知道大厂的那些是如何实现的也可以告诉我,感谢!

上一篇:一文读懂ICP网站备案、经营性网站备案、公安联网备案、ICP许可证、EDI许可证

下一篇:春松客服 - 开源智能客服系统

注册体验: