Wiki源代码5.8.2.5 Indicator Card

由用户 maym 在 2025/03/18 08:53 保存的版本 10.3

version	line-number	content
10.2	1	==== [Usage Scenario] ====
1.1	2
10.2	3	It is suitable for scenarios that require directly highlighting key data. For example, indicator cards can be used to display metrics such as total product sales, delivery quantity, and warehouse inventory levels.
1.1	4
10.2	5	As shown in the figure below, the indicator card directly displays the total sales amount, effectively highlighting this key metric in a card format.
1.1	6
9.3	7	[[image:1742287452034-168.png]]
1.1	8
10.3	9	==== [Basic Requirements ] ====
1.1	10
3.1	11	(% style="width:650.222px" %)
	12	\|(% style="width:290px" %)指标\|(% style="width:356px" %)指标字段类型
	13	\|(% style="width:290px" %)必填，最多8个字段\|(% style="width:356px" %)必须是聚合字段公式内字段也需要为聚合字段
1.1	14
3.1	15	指标：指标卡中显示的数字，是聚合后的结果，换句话说，指标卡中一定显示的是数字
1.1	16
	17
	18
8.1	19	==== 【配置步骤】 ====
1.1	20
3.1	21	①在图形选择区选择“指标卡”图形：首页点击指标卡后，显示demo假数据，效果如下图
1.1	22
3.1	23	[[image:1729843542241-466.png]]
1.1	24
	25
	26	②为指标卡图形添加指标，即：拖入表单字段作为数据源：
	27
9.1	28	[[image:1737529303936-797.png]]
1.1	29
	30
	31	3、【样式配置】
	32
4.1	33	[[image:1729843821098-935.png\|\|height="659" width="1281"]]
1.1	34
	35
	36
	37
8.1	38	==== 【样式配置说明】 ====
5.1	39
1.1	40	\|(% colspan="1" rowspan="1" %)(((
	41
	42	)))\|(% colspan="1" rowspan="1" %)(((
	43	样式设置分类
	44	)))\|(% colspan="1" rowspan="1" %)(((
	45	配置项
	46	)))\|(% colspan="1" rowspan="1" %)(((
6.1	47	用途
1.1	48	)))
7.1	49	\|(% colspan="1" rowspan="8" %)(((
1.1	50	指标卡
	51
	52
7.1	53	)))\|(% colspan="1" rowspan="5" %)(((
1.1	54	基础
	55
	56
	57	)))\|(% colspan="1" rowspan="1" %)(((
	58	显示标题
	59	)))\|(% colspan="1" rowspan="1" %)(((
7.1	60	默认关闭，开启后会在画布左上角显示指标卡的标题
1.1	61	)))
	62	\|(% colspan="1" rowspan="1" %)(((
	63	标题名称
	64	)))\|(% colspan="1" rowspan="1" %)(((
7.1	65	支持用户自定义标题名称
1.1	66	)))
	67	\|(% colspan="1" rowspan="1" %)(((
	68	帮助文字
	69	)))\|(% colspan="1" rowspan="1" %)(((
7.1	70	开启后，标题右侧出现小问号，鼠标悬浮时，出现帮助文字具体内容
	71
	72	[[image:1729844522588-836.png]]
1.1	73	)))
	74	\|(% colspan="1" rowspan="1" %)(((
	75	帮助文字内容
7.1	76	)))\|(% colspan="1" rowspan="1" %)支持用户自定义帮助文字的文案，例如“本月销售总额统计”
1.1	77	\|(% colspan="1" rowspan="1" %)(((
	78	每行列数
	79	)))\|(% colspan="1" rowspan="1" %)(((
7.1	80	(((
1.1	81	默认：4，可选值：4，3，2
7.1	82
	83	[[image:1729844573944-101.png\|\|height="365" width="1150"]]
1.1	84	)))
7.1	85
	86	(((
	87
	88	)))
	89	)))
1.1	90	\|(% colspan="1" rowspan="3" %)(((
	91	指标卡样式
	92
	93
	94	)))\|(% colspan="1" rowspan="1" %)(((
	95	指标卡风格
	96	)))\|(% colspan="1" rowspan="1" %)(((
7.1	97	支持用户切换：纯色填充，带侧边条，这2种展示风格
1.1	98	)))
	99	\|(% colspan="1" rowspan="1" %)(((
	100	背景色值
	101	)))\|(% colspan="1" rowspan="1" %)(((
7.1	102	支持用户自定义指标卡的背景色
1.1	103	)))
	104	\|(% colspan="1" rowspan="1" %)(((
	105	指标字号
	106	)))\|(% colspan="1" rowspan="1" %)(((
7.1	107	支持用户改变指标卡中数字的字号粗细，颜色
1.1	108	)))
	109
2.1	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"]]