# DashboardClient **Repository Path**: DataColour/DashboardClient ## Basic Information - **Project Name**: DashboardClient - **Description**: 关键字:数据可视化、大屏可视化。数据可视化工具 1.x,欢迎访问DataColour可视化平台 2.x。 - **Primary Language**: JavaScript - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: http://datacolour.cn/ - **GVP Project**: No ## Statistics - **Stars**: 400 - **Forks**: 133 - **Created**: 2020-12-06 - **Last Updated**: 2024-12-29 ## Categories & Tags **Categories**: charting-components **Tags**: None ## README # 数据可视化分析平台1.x ## 平台背景介绍 **可视化分析平台1.x** 设计目标:使场景设计人员可通过提供的设计器对业务数据进行模型分析、配置、授权等操作后,决策者可使用播放器查看业务指标,对业务有辅助决策价值。 项目背景:项目完成于2015底,虽然整个项目功能不算完善,但平台也已通过生产项目的验证,对于特定的项目需求亦可进行二次开发,相对比较灵活。 _注:由于技术迭代,催生了 2.x 的产品 [datacolour](http://datacolour.cn/),对于 1.x 我们做了开源,2.x的开源也在筹划中。欢迎访问 [2.x](http://39.101.138.43:8080)_ 产品组织地址: 真实项目截图: ![截图](https://images.gitee.com/uploads/images/2020/1207/095405_b486a70f_447631.jpeg "175056_df8ff475_447631.jpeg") ## 平台访问地址 1.x 地址: 用户: admin 密码: admin 演示: [体验](http://39.101.138.43:8070/screen.html) 2.x 地址: **注意:请选择 【公开项目集】** 用户: test 密码: 123456 ## 平台技术特点 > 可视化分析平台采用前后端分离模式,后端服务架构设计采用微服务架构模式。 **客户端技术**:采用Angularjs、Jquery、Bootstrap4、Html5、Css3、Echart、Threejs、D3js等前端技术。 **服务端技术**:基于Dubbo分布式微服务架构,采用的相关框架及工具有:springboot、spring security、mybatis、jackson、gson、zookeeper、redis、nginx等技术。 前端项目地址: 后端项目地址: ## 平台使用说明 产品使用手册: 产品部署手册: 数据库初始脚本: ## 二次开发说明 > 指标展现组件采用插件式设计方式,便于对其进行扩展,开发人员可针对不同用户的需求,对组件进行定制化的扩展开发。 二次开发文档地址: ## 依赖环境说明 前端开发依赖环境如下。注: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支持插件的事件脚本调用,满足一些复杂的需求,如下面的一些形式: ```javascript //页面跳转或服务端过滤。要至支持过滤需要在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") }]); } ``` ## 技术交流 ![TIM群](https://images.gitee.com/uploads/images/2020/1209/094516_6675f82c_447631.png "TIM群.png") ## 联系作者 ![freezesoul](https://images.gitee.com/uploads/images/2020/1207/094952_72d96afe_447631.jpeg "WeChat Image_20201207094758.jpg") freezesoul@gmail.com ![netssoul](https://images.gitee.com/uploads/images/2020/1207/095000_082ac510_447631.jpeg "WeChat Image_20201207092400.jpg") netssoul@gmail.com