Skip to Content
由用户 maym 在 2025/03/18 09:13 保存的版本 10.5
显示最后作者
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 **Step-2 Add indicator field**
28
29 ②为指标卡图形添加指标，即： 拖入表单字段作为数据源：
30
31 [[image:1737529303936-797.png]]
32
33
34 3、【样式配置】
35
36 [[image:1729843821098-935.png||height="659" width="1281"]]
37
38
39
40
41 ==== **【样式配置说明】** ====
42
43 |(% colspan="1" rowspan="1" %)(((
44
45 )))|(% colspan="1" rowspan="1" %)(((
46 样式设置分类
47 )))|(% colspan="1" rowspan="1" %)(((
48 配置项
49 )))|(% colspan="1" rowspan="1" %)(((
50 用途
51 )))
52 |(% colspan="1" rowspan="8" %)(((
53 **指标卡**
54
55
56 )))|(% colspan="1" rowspan="5" %)(((
57 基础
58
59
60 )))|(% colspan="1" rowspan="1" %)(((
61 显示标题
62 )))|(% colspan="1" rowspan="1" %)(((
63 默认关闭，开启后会在画布左上角显示指标卡的标题
64 )))
65 |(% colspan="1" rowspan="1" %)(((
66 标题名称
67 )))|(% colspan="1" rowspan="1" %)(((
68 支持用户自定义标题名称
69 )))
70 |(% colspan="1" rowspan="1" %)(((
71 帮助文字
72 )))|(% colspan="1" rowspan="1" %)(((
73 开启后，标题右侧出现小问号，鼠标悬浮时，出现帮助文字具体内容
74
75 [[image:1729844522588-836.png]]
76 )))
77 |(% colspan="1" rowspan="1" %)(((
78 帮助文字内容
79 )))|(% colspan="1" rowspan="1" %)支持用户自定义帮助文字的文案，例如“本月销售总额统计”
80 |(% colspan="1" rowspan="1" %)(((
81 每行列数
82 )))|(% colspan="1" rowspan="1" %)(((
83 (((
84 默认：4， 可选值：4，3，2
85
86 [[image:1729844573944-101.png||height="365" width="1150"]]
87 )))
88
89 (((
90
91 )))
92 )))
93 |(% colspan="1" rowspan="3" %)(((
94 指标卡样式
95
96
97 )))|(% colspan="1" rowspan="1" %)(((
98 指标卡风格
99 )))|(% colspan="1" rowspan="1" %)(((
100 支持用户切换：纯色填充，带侧边条 ，这2种展示风格
101 )))
102 |(% colspan="1" rowspan="1" %)(((
103 背景色值
104 )))|(% colspan="1" rowspan="1" %)(((
105 支持用户自定义指标卡的背景色
106 )))
107 |(% colspan="1" rowspan="1" %)(((
108 指标字号
109 )))|(% colspan="1" rowspan="1" %)(((
110 支持用户改变指标卡中数字的字号粗细，颜色
111 )))
112
113 (% 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"]]