Wiki源代码5.8.2.5 指标卡

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

version	line-number	content
8.1	1	==== 【使用场景】 ====
1.1	2
	3	适用于需要直接显示重点数据的场景。例如可以使用指标卡展示商品的销售总额、发货数量、仓库库存数量等
	4
	5	如下图所示，使用指标卡直接显示销售总金额，方便以卡片形式突出显示
	6
9.3	7	[[image:1742287452034-168.png]]
1.1	8
8.1	9	==== 【基本要求】 ====
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"]]