页面树结构
转至元数据结尾
转至元数据起始

概述

WEB电子表格可以基于“条件格式"功能实现传统的告警效果。

本示例将设计一个简单的金融报表,通过Web电子表格的“条件格式”功能突出显示不同预算金额之间的差异。

示例效果

操作步骤

1. 拖拽组件

创建仪表盘,点击 组件,在 “表格” 类型下找到 WEB电子表格 组件,将其拖拽至画布中:

2. 设计静态表

双击显示区,弹出“WEB电子表格编辑界面“,先按照如下样式在表格中设计好表样:

该静态表表样的样式配置如下:

行高列头底色列头字体样式对齐方式边框样式颜色

50px

#274E13

  • 字体:微软雅黑
  • 字号:11
  • 颜色:白色
  • 其它:加粗
中间对齐#666666

更多详情请参见:样式设置 章节。

3. 字段及表达式

在右侧数据资源区中的数据模型”费用类型“中分别拖拽以下字段到对应单元格上,或者在单元格上填写指定函数表达式。

并设置对应的单元格格式和对齐方式,具体如下:

列名字段名或表达式单元格单元格格式对齐方式
费用类型费用类型B3自动中间对齐
具体费用业务开支C3
分部省份D3
预算预算E3货币
实际实际F3货币
差距(¥)=E3-F3G3“自定义格式”>“更多数字格式”>选择整数
差距(%)=IFERROR(G3/E3,"")H3百分比

4. 设置条件格式

4.1. 数据条

① 点击工具栏中的条件格式”,对“E3”单元格添加一个“绿-白渐变数据条”

“F3”单元格的配置同理,对“F3”单元格添加一个“红-白渐变数据条”

4.2. 色阶

点击工具栏中的条件格式”,对“G3”单元格添加一个“红-白-绿色阶”

4.3. 图标集

点击工具栏中的条件格式”,对“H3”单元格添加一个“三符号标记

5. 保存并预览

单击工具区中的 保存 按钮,将该web电子表格保存在仪表盘中。打开该仪表盘即可浏览到示例效果。

示例下载

条件格式.xml

data.csv

将该资源导入环境后,访问数据模型“费用预算”,资源导入位置为:“数据准备”模块>“公共空间”>"web电子表格功能示例">"费用预算"

进入该数据模型后,参考 导入资源-特殊场景 进行后续操作。

  • 无标签