-
-
方菁 小试身手Lv3
发表于2018-8-9 16:46
楼主
一、页面一览
二、页面分析
1、整体框架
主题表： DM_APP_JTSR
页面结构：宽百分比，高固定，自定义布局四行三列
报表背景：#FFFFFF
布局标题：图片+文字+居中
布局背景：使用图片组件自动撑满
2、模块详解
1）资金投放分布
三个指标框：一个大容器套三个小容器，通过百分比控制位置自适应
H5渲染地图：
a）地图边框颜色设置
b）值域设置
启用值域，并且隐藏，设置值域颜色黄蓝绿渐变['#3BC06B','#18DDF8','#FFD925']
2）重点专业分布
单轴双系列堆积柱状图
3）类型和部门分布
饼图+面积图组合
a）统计图类型
b）饼图位置控制
c）组合图类型设置
d）图例都显示数据点
4）利润
单轴双系列无折点折线图
5）收支
单轴双系列带折点的面积图
6）回收情况
同重点专业分布
7）经营比率
一个大容器嵌套四个小容器，边距百分比
8）IRR分区
表格水平撑满
三、脚本分析
更改表体滚动条样式
- //更改滚动条样式
- addStyleSheet("#BODYAREA{overflow:hidden !important}");
- addStyleSheet(".scrollBarContainerClass{width:10px !important;}");
- addStyleSheet(".scrollBarClass{border-radius:10px !important;background-color:#DADADA !important;}");
- include("vfs/root/demojs/slimscrollbody.js");
四、配色说明
1、表体和布局
报表背景颜色：#FFFFFF
布局边框颜色：# 33E3CD
标题字体颜色：#08BAAB，大小：16
2、三个指标框
日投放总额：字体颜色#FFFFFF，
人民币&美元：数值字体颜色#254D4B，单位和标题字体颜色#326563
字体大小：数值20，单位12，标题14
3、地图
边框颜色：#C0C0C0
值域颜色：['#3BC06B','#18DDF8','#FFD925']
4、饼图
蓝：#00D7CF
橙：#E78448
黄：#FFCB4D
绿：#00CF7B
显示文字颜色：#06C7C0
5、堆积柱状体
柱子颜色：蓝色本月#0FCADB，绿色本月#86DD2A
颜色透明度：蓝色本年70，绿色本年60
坐标轴标签&图例字体颜色：#59616B
坐标轴轴线：#DEDEDE
网格线颜色：#F0F0F0
6、折线图
蓝色：#26DAC4
黄色：#EFD02F
坐标轴设置同上
7、面积图
绿色：#86DD2A，透明度30
蓝色：#0FCADB，透明度50
折点大小：3
折点边框：#FFFFFF
8、仪表盘
黄：#FFD131
蓝：#00DCFA
绿：#3BC06B
指针字体颜色：#59616B大小14加粗
标题文本字体颜色：#59616B大小14
9、统计图提示信息
背景颜色：#A9ADB3
字体颜色：#FFFFFF
10、表格
标题行字体颜色：#08BAAB
标题行背景颜色：#DDFAF7
表体字体颜色：#969AA0
大小自适应：水平撑满
四、资源文件
1、 报表资源
说明：.rptttpl后缀文件新建空报表后如下图所示上传
2、 图片资源
直接上传到资源管理器，默认的路径：
/root/products/ebi/sys/picture/pcdemo/领导驾驶舱/rent
注意：可以压缩为zip文件后上传。路径不要轻易修改，报表中在引用时使用了文件路径。
3、 脚本资源
slimscrollbody.js
直接上传到资源管理器，默认的路径：/root/demojs
注意：路径不要轻易修改，报表中在引用时使用了文件路径
4、 资源文件
金融行业.rar
(244.69 KB, 下载次数: )
赞赞 
