开发可自定义配置的数据可视化界面及通用BI展示界面

随着笔者所在的IT业务行业的基础系统越来越健全,数据越来越全,越来越多;业务指标的分析需要越来越多,所以开发一套高大上的业务指标分析系统越来越迫切了。考虑到业务指标的随意性及展现样式的多变性,必定需要开发出来的系统是支持自定义的。

由于笔者能力有限,开发周期共计4周,先上几个效果图

1.自定义出来的Metro导航页面

开发可自定义配置的数据可视化界面及通用BI展示界面_第1张图片

2. 自定义出来的蓝色太空数据可视化展现界面

开发可自定义配置的数据可视化界面及通用BI展示界面_第2张图片

3.自定义出来的通用BI风格界面

开发可自定义配置的数据可视化界面及通用BI展示界面_第3张图片

4.二级页面弹出层效果

开发可自定义配置的数据可视化界面及通用BI展示界面_第4张图片

思路:我的整体思路是这样的 页面中所有的图表实现自定义配置,页面布局实现可拖拽图表自定义布局

技术手段:图形用到Echart,代码编辑用到了codemirror,图标用到了fonts-awesome,弹出层用到了layer,图表的数据展现通过Ajax访问获得

组件:通过封装支持自定义表格,自定义图形,自定义卡片

1.自定义表格

开发可自定义配置的数据可视化界面及通用BI展示界面_第5张图片

2.自定义图表

开发可自定义配置的数据可视化界面及通用BI展示界面_第6张图片

 

3.可拖拽界面利用bootstrap框架

开发可自定义配置的数据可视化界面及通用BI展示界面_第7张图片

 

系统基本开发完了,但有一点小遗憾就是未能支持带参数的数据查询,欢迎有兴趣的同志们,一起讨论  QQ:615209099

你可能感兴趣的:(开发可自定义配置的数据可视化界面及通用BI展示界面)