语法作用
同时展示指标值与同比值的卡片，同比值位于指标值同一行的右下角，将根据指标数值大小自动调整显示位置。
MainValue参数：指标主值，MainColor参数：指标主值颜色，YoYValue参数：右下角同比值，YoYColor参数：同比值的颜色。
注意：MainValue与YoYValue参数请传入格式化后的文本，该函数将原样展示传递的值。另外，如果同比值需要动态颜色，请在YoYColor参数中使用表达式来动态返回不同颜色。
XF.HtmlChart.KPICard(MainValue:string,MainColor:string,YoYValue:string,YoYColor:string)函数代码
该函数的实现代码如下：
/// 同时展示指标值与同比值的卡片，同比值位于指标值同一行的右下角，将根据指标数值大小自动调整显示位置。MainValue参数：指标主值，MainColor参数：指标主值颜色，YoYValue参数：右下角同比值，YoYColor参数：同比值的颜色。注意：MainValue与YoYValue参数请传入格式化后的文本，该函数将原样展示传递的值。另外，如果同比值需要动态颜色，请在YoYColor参数中使用表达式来动态返回不同颜色
FUNCTION XF.HtmlChart.KPICard = (MainValue:string,MainColor:string,YoYValue:string,YoYColor:string) =>
VAR MainFontSize = "28px" // 主值字号（推荐28-40px，使用px单位保证基准尺寸）
VAR MainFontWeight = "600" // 主值字重（400=正常，600=半粗，700=加粗）
VAR YoYFontSize = "1em" // 同比值字号（推荐0.4-0.6em，基于主值字号的比例）
VAR YoYFontWeight = "600" // 同比值字重（通常比主值小100-200权重）
VAR HorizontalGap = "0.6em" // 水平间距（主值与同比值间距，推荐0.3-1em）
VAR VerticalAdjust = "0.15em" // 垂直微调（正值下移/负值上移，推荐±0.3em内）
RETURN
"<div class='xifeng' style='
display: flex; /* 启用flex布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
width: 100%; /* 撑满容器宽度 */
height: 100%; /* 撑满容器高度 */
line-height: 1; /* 消除行高影响 */
'>
<div style='
display: flex; /* 嵌套flex布局 */
align-items: baseline; /* 基线对齐 */
gap: " & HorizontalGap & "; /* 元素间距 */
transform: translateY( /* 垂直位置微调 */
" & VerticalAdjust & " /* 微调量（基于em单位） */
);
'>
<!-- 主值 -->
<span style='
font-size: " & MainFontSize & ";
font-weight: " & MainFontWeight & ";
color: " & MainColor & ";
line-height: 1; /* 防止行高影响 */
'>" & MainValue & "</span>
<!-- 同比值 -->
<span style='
font-size: " & YoYFontSize & ";
font-weight: " & YoYFontWeight & ";
color: " & YoYColor & ";
line-height: 1; /* 保持行高一致 */
white-space: nowrap; /* 防止换行 */
'>" & YoYValue & "</span>
</div>
</div>"应用示例
该卡片图的样式如下图所示：
当指标的数值发生变化时，将根据指标数值大小自动调整显示位置，如下图所示：
