Skip to Content
由用户 maym 在 2025/03/18 09:12 保存的版本 10.4
显示最后作者
1 ==== **[Usage Scenario]** ====
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.
4
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.
6
7 [[image:1742287452034-168.png]]
8
9 ==== **[Basic Requirements ]** ====
10
11 (% style="width:650.222px" %)
12 |(% style="width:290px" %)Indicator|(% style="width:356px" %)Indicator field type
13 |(% style="width:290px" %)Required, maximum of 8 fields.|(% style="width:356px" %)Must be an aggregatable field.
14
15 **Indicator：**The numbers displayed in the indicator cards are aggregated results, meaning that the indicator cards must exclusively show numerical values.
16
17
18
19 ==== **[Configuration steps]** ====
20
21 **Step-1 Select chart and configure data sources**
22
23 Select the 'Indicator Card' in the chart selection panel: Clicking the indicator card on the homepage displays demo sample data, as shown in the figure below.
24
25 [[image:1729843542241-466.png]]
26
27
28 ②为指标卡图形添加指标，即： 拖入表单字段作为数据源：
29
30 [[image:1737529303936-797.png]]
31
32
33 3、【样式配置】
34
35 [[image:1729843821098-935.png||height="659" width="1281"]]
36
37
38
39
40 ==== **【样式配置说明】** ====
41
42 |(% colspan="1" rowspan="1" %)(((
43
44 )))|(% colspan="1" rowspan="1" %)(((
45 样式设置分类
46 )))|(% colspan="1" rowspan="1" %)(((
47 配置项
48 )))|(% colspan="1" rowspan="1" %)(((
49 用途
50 )))
51 |(% colspan="1" rowspan="8" %)(((
52 **指标卡**
53
54
55 )))|(% colspan="1" rowspan="5" %)(((
56 基础
57
58
59 )))|(% colspan="1" rowspan="1" %)(((
60 显示标题
61 )))|(% colspan="1" rowspan="1" %)(((
62 默认关闭，开启后会在画布左上角显示指标卡的标题
63 )))
64 |(% colspan="1" rowspan="1" %)(((
65 标题名称
66 )))|(% colspan="1" rowspan="1" %)(((
67 支持用户自定义标题名称
68 )))
69 |(% colspan="1" rowspan="1" %)(((
70 帮助文字
71 )))|(% colspan="1" rowspan="1" %)(((
72 开启后，标题右侧出现小问号，鼠标悬浮时，出现帮助文字具体内容
73
74 [[image:1729844522588-836.png]]
75 )))
76 |(% colspan="1" rowspan="1" %)(((
77 帮助文字内容
78 )))|(% colspan="1" rowspan="1" %)支持用户自定义帮助文字的文案，例如“本月销售总额统计”
79 |(% colspan="1" rowspan="1" %)(((
80 每行列数
81 )))|(% colspan="1" rowspan="1" %)(((
82 (((
83 默认：4， 可选值：4，3，2
84
85 [[image:1729844573944-101.png||height="365" width="1150"]]
86 )))
87
88 (((
89
90 )))
91 )))
92 |(% colspan="1" rowspan="3" %)(((
93 指标卡样式
94
95
96 )))|(% colspan="1" rowspan="1" %)(((
97 指标卡风格
98 )))|(% colspan="1" rowspan="1" %)(((
99 支持用户切换：纯色填充，带侧边条 ，这2种展示风格
100 )))
101 |(% colspan="1" rowspan="1" %)(((
102 背景色值
103 )))|(% colspan="1" rowspan="1" %)(((
104 支持用户自定义指标卡的背景色
105 )))
106 |(% colspan="1" rowspan="1" %)(((
107 指标字号
108 )))|(% colspan="1" rowspan="1" %)(((
109 支持用户改变指标卡中数字的字号粗细，颜色
110 )))
111
112 (% 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"]]