报表样式规范参考

📊 报表样式规范参考

📋 表格类报表

🎨 基础样式

属性	规范	备注
标题背景	第一层：#ECECEC 第二层：#F5F5F5 第三层：#FFFFFF	竖线用 #DEDEDE，层次分明
字体	微软雅黑	中文界面的不二选择
字色	标题：#333333 正文：#555555	对比度刚刚好
超链接	#1890FF	可不用下划线，简洁
字号/行高	12px / 36px （报表：9号字 / 9.53）	舒适的阅读体验
边框	#EEEEEE（横线）	竖线一般可省略

📐 格式规范

• 对齐方式：文字左对齐，数字右对齐
• 缩进：起始列 9,2，结尾列 2,9（灵活调整）
• 数字格式：
  • 金额：千分位 + 两位小数
  • 整数：千分位
  • 百分比：两位小数
• 合计行：加粗就够了

⚙️ 功能设置

自适应：表格横向自适应，图表双向自适应

分页：13或16行/页，公式 (row()-x)%13=0

长文本处理：if(len($$$)>10,left($$$,10)+"...",$$$)

筛选器美化：

• 背景透明
• 控件高度：26px
• 控件宽度：100px（查询用80px）
• 初始化隐藏：setTimeout(function(){$('.parameter-container-collapseimg-up').hide();},10)

📈 图形类报表

🌈 配色方案

主色盘（10色）：

#4D75E5 #FF8900 #F9A825 #00B341 #8BC34A
#00BFD8 #0288D1 #8453DE #ED5E32 #606D8B

备选色盘：

#B1734B #417F93 #C4665F #748A3E #C39B4A
#BAC945 #7972CD #5278DE #E46E49 #52A6D2

🎯 样式细节

元素	规格	颜色
标题	14px（10号字）	#333333
图例	12px（9号字）	#555555
坐标轴	10px（7号字）	#999999
网格线	-	#DADADA
坐标轴线	-	#9C9C9C

环形图内径：70%（黄金比例，好看！）

💡 实用小贴士

1. 参数面板：查询前不显示内容，避免空数据尴尬
2. 常用参数：记得勾选去掉，减少用户操作
3. 按钮样式：引用CSS美化，告别默认丑按钮
4. 条件显隐：用条件控制不必要的行列显示

🔗 参考资源

• CSDN相关文章

---

当然了，也还是要根据实际场景和业务习惯来的哈，一般蓝白为主色调的审美居多一些！ ✨