Skip to Content

Wiki源代码5.8.2.5 指标卡

由用户 maym 在 2025/03/18 08:44 保存的版本 9.3
显示最后作者
1 ==== **【使用场景】** ====
2
3 适用于需要直接显示重点数据的场景。例如可以使用指标卡展示商品的销售总额、发货数量、仓库库存数量等
4
5 如下图所示，使用指标卡直接显示销售总金额，方便以卡片形式突出显示
6
7 [[image:1742287452034-168.png]]
8
9 ==== **【基本要求】** ====
10
11 (% style="width:650.222px" %)
12 |(% style="width:290px" %)指标|(% style="width:356px" %)指标字段类型
13 |(% style="width:290px" %)必填，最多8个字段|(% style="width:356px" %)必须是聚合字段公式内字段也需要为聚合字段
14
15 **指标**：指标卡中显示的数字，是聚合后的结果，换句话说，指标卡中一定显示的是数字
16
17
18
19 ==== **【配置步骤】** ====
20
21 ①在图形选择区选择“指标卡”图形：首页点击指标卡后，显示demo假数据，效果如下图
22
23 [[image:1729843542241-466.png]]
24
25
26 ②为指标卡图形添加指标，即： 拖入表单字段作为数据源：
27
28 [[image:1737529303936-797.png]]
29
30
31 3、【样式配置】
32
33 [[image:1729843821098-935.png||height="659" width="1281"]]
34
35
36
37
38 ==== **【样式配置说明】** ====
39
40 |(% colspan="1" rowspan="1" %)(((
41
42 )))|(% colspan="1" rowspan="1" %)(((
43 样式设置分类
44 )))|(% colspan="1" rowspan="1" %)(((
45 配置项
46 )))|(% colspan="1" rowspan="1" %)(((
47 用途
48 )))
49 |(% colspan="1" rowspan="8" %)(((
50 **指标卡**
51
52
53 )))|(% colspan="1" rowspan="5" %)(((
54 基础
55
56
57 )))|(% colspan="1" rowspan="1" %)(((
58 显示标题
59 )))|(% colspan="1" rowspan="1" %)(((
60 默认关闭，开启后会在画布左上角显示指标卡的标题
61 )))
62 |(% colspan="1" rowspan="1" %)(((
63 标题名称
64 )))|(% colspan="1" rowspan="1" %)(((
65 支持用户自定义标题名称
66 )))
67 |(% colspan="1" rowspan="1" %)(((
68 帮助文字
69 )))|(% colspan="1" rowspan="1" %)(((
70 开启后，标题右侧出现小问号，鼠标悬浮时，出现帮助文字具体内容
71
72 [[image:1729844522588-836.png]]
73 )))
74 |(% colspan="1" rowspan="1" %)(((
75 帮助文字内容
76 )))|(% colspan="1" rowspan="1" %)支持用户自定义帮助文字的文案，例如“本月销售总额统计”
77 |(% colspan="1" rowspan="1" %)(((
78 每行列数
79 )))|(% colspan="1" rowspan="1" %)(((
80 (((
81 默认：4， 可选值：4，3，2
82
83 [[image:1729844573944-101.png||height="365" width="1150"]]
84 )))
85
86 (((
87
88 )))
89 )))
90 |(% colspan="1" rowspan="3" %)(((
91 指标卡样式
92
93
94 )))|(% colspan="1" rowspan="1" %)(((
95 指标卡风格
96 )))|(% colspan="1" rowspan="1" %)(((
97 支持用户切换：纯色填充，带侧边条 ，这2种展示风格
98 )))
99 |(% colspan="1" rowspan="1" %)(((
100 背景色值
101 )))|(% colspan="1" rowspan="1" %)(((
102 支持用户自定义指标卡的背景色
103 )))
104 |(% colspan="1" rowspan="1" %)(((
105 指标字号
106 )))|(% colspan="1" rowspan="1" %)(((
107 支持用户改变指标卡中数字的字号粗细，颜色
108 )))
109
110 (% contenteditable="false" style="background-image:url(http://192.168.102.35:8080/webjars/wiki%3Axwiki/xwiki-platform-ckeditor-webjar/16.8.0/plugins/widget/images/handle.png); background:rgba(220,220,220,0.5); display:none" tabindex="-1" %)[[image:data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==||draggable="true" height="15" role="presentation" title="拖曳以移動" width="15"]]