数据可视化分析平台1.x

平台背景介绍

可视化分析平台1.x

设计目标：使场景设计人员可通过提供的设计器对业务数据进行模型分析、配置、授权等操作后，决策者可使用播放器查看业务指标，对业务有辅助决策价值。

项目背景：项目完成于2015底，虽然整个项目功能不算完善，但平台也已通过生产项目的验证，对于特定的项目需求亦可进行二次开发，相对比较灵活。

注：由于技术迭代，催生了 2.x 的产品 datacolour，对于 1.x 我们做了开源，2.x的开源也在筹划中。欢迎访问 2.x

产品组织地址： https://gitee.com/DataColour

真实项目截图：

平台访问地址

1.x 地址：http://39.101.138.43:8070

用户： admin

密码： admin

演示： 体验

2.x 地址：http://39.101.138.43:8080

注意：请选择 【公开项目集】

用户： test

密码： 123456

平台技术特点

可视化分析平台采用前后端分离模式，后端服务架构设计采用微服务架构模式。

客户端技术：采用Angularjs、Jquery、Bootstrap4、Html5、Css3、Echart、Threejs、D3js等前端技术。

服务端技术：基于Dubbo分布式微服务架构，采用的相关框架及工具有：springboot、spring security、mybatis、jackson、gson、zookeeper、redis、nginx等技术。

前端项目地址：https://gitee.com/DataColour/DashboardClient

后端项目地址：https://gitee.com/DataColour/DashboardService

平台使用说明

产品使用手册： http://39.101.138.43:8070/dvp1.xhelp.pdf

产品部署手册： http://39.101.138.43:8070/dvp1.xinstall.pdf

数据库初始脚本： http://39.101.138.43:8070/dashboard-init.sql

二次开发说明

指标展现组件采用插件式设计方式，便于对其进行扩展，开发人员可针对不同用户的需求，对组件进行定制化的扩展开发。

二次开发文档地址： http://39.101.138.43:8070/doc/index.html

依赖环境说明

前端开发依赖环境如下。注：JS组件已经提交版本管理，无需单独安装，前端只需部署至nginx之类的web容器即可。

(1).install nodejs & git
(2).npm install http-server -g
(3).npm install bower -g
(4).npm install less -g
(5).npm install grunt-cli -g

项目使用说明

1. 在实际项目中一般会采用集成方式来调用可视化平台配置的页面，简单来说就是依据项目要求做一个外壳，然后嵌入可视化配置的场景。

2. 平台1.x版本当前支持jdbc数据源（可以扩展），接口服务调用（当前版只支持get方式），excel数据源（可以在线简单修改），满足了一般的场景需求。

3. 平台1.x版本当前支持数据过滤，需要在数据集种定义变量以进行常规分析中的过滤、筛选、钻取的需求，具体需要使用相应的api进行操作。

4. 平台1.x版本已经初步具备二次开发的能力，包括属性编辑器，布局形式，渲染插件等多个部分，具体可参看相关的文档。

5. 平台1.x项目已经归档，不会进行后续的更新，如需支持可关注我们的2.x产品。

6. 平台1.x支持插件的事件脚本调用，满足一些复杂的需求，如下面的一些形式：

   //页面跳转或服务端过滤。要至支持过滤需要在SQL中指定动态参数，如果当前页面过滤则只需指定当前页面id即可。
   this._layout.navigate("pageid",[{ParamName:"name",ParamValue:"value"}])；
   
   //客户端过滤。需要组件自身实现支持。
   if (this._layout){
       this._layout.emitEvent("filterData", [{
           "name": "value"
       }]);
   }
   
   //组建之间的调用。如弹出内容，需要页面添加弹出组件支持。
   if (this._layout){
       var videoHtml = "app/plugins/controls/common/video/resource/video.html?video=";
       this._layout.emitEvent("showModal", [{
           width: 2400,
           iframe: true,
           iframeHeight: 1080,
           iframeURL: videoHtml + encodeURIComponent("中文.mp4")
       }]);
   }

技术交流

联系作者

freezesoul@gmail.com

netssoul@gmail.com