求助文本组件实现卡片效果

目前使用的是文本组件，绑定计算列。目前实现效果不理想，求助大神帮忙实现demo样式
计算列编写：

var t1 = sum(col['当期总额度-当日');
var t2 = sum(col['使用率');
var t3 = sum(col['占比');
var t4 = sum(col['信用授信使用率');
var t5 = sum(col['信用授信占比');
var t6 = sum(col['担保授信使用率');
var t7 = sum(col['担保授信占比');
var t8 = sum(col['当期信用授信额度');
var t9 = sum(col['当期担保授信额度');

"<div style='font-size: 12px;margin: 10px 0 10px 10px;border-right: 1px solid #d8d8d8;padding:0 10px 0px 0'>"
    +"<p style='font-size: 16px;height: 30px;'>实际</p>"
    +"<div style='height: 40px;text-align: LEFT;'>"
        +"<span style='font-size: 40px;line-height: 40px;font-weight: 600;'>" + formatNumber(t1,'0,000') + "</span>"
        +"<span style='font-size: 14px;'></span>"
    +"</div>"

    +"<p  style='font-size: 12px;height: 15px;'>使用率</p>"
    +"<div style='height: 10px; width: 90px; background: #f2f2f2;border: 1px solid #d8d8d8; margin: 10px 0;'>"
        +"<div style='background: #FF8D14;width: " + formatNumber(t2/1000, '0%') + ";height: 100%;'></div>"
        +"<p  style='font-size: 12px;height: 15px;'>"+formatNumber(t2/1000, '0%')+"</p>"
    +"</div>"

  
    +"<p  style='font-size: 12px;height: 15px;'>占比</p>"
    +"<div style='height: 10px; width: 90px; background: #f2f2f2;border: 1px solid #d8d8d8; margin: 10px 0;'>"
        +"<div style='background: #FF8D14;width: " + formatNumber(t3/1000, '0%') + ";height: 100%;'></div>"
        +"<p  style='font-size: 12px;height: 15px;'>"+formatNumber(t3/1000, '0%')+"</p>"
    +"</div>"
    +"<table style='width: 100%;'>"
        +"<tr style='height: 28px;line-height:28px'>"
            +"<td style='text-align: right;'>信用授信</td>"
            +"<td style='text-align: left;padding-left:-5px'>" + formatNumber(t8,'0,000')  +"</td>"
            +"<td style='text-align: right;'>担保授信</td>"
            +"<td style='text-align: left;padding-left:-5px;"+";'>" + formatNumber(t9, '0,000') + "</td>"
        +"</tr>"
        +"<tr>"
            +"<td style='text-align: right;'>使用率</td>"
            +"<td style='text-align: left;padding-left:-5px'>" + formatNumber(t4, '0%') + "</td>"
            +"<td style='text-align: right;'>使用率</td>"
            +"<td style='text-align: left;padding-left:-5px:"+";'>" + formatNumber(t6, '0%') + "</td>"
         +"</tr>"
         +"<tr>"
                 +"<td style='text-align: right;'>占比</td>"
            +"<td style='text-align: left;padding-left:-5px'>" + formatNumber(t5, '0%') + "</td>"
            +"<td style='text-align: right;'>占比</td>"
            +"<td style='text-align: left;padding-left:-5px:"+";'>" + formatNumber(t7, '0%') + "</td>"
        +"</tr>"
    +"</table>"
+"</div>"

手可摘星辰 发表于 2022-2-25 15:02
换了指标卡，自由表，文本，凑在一起组合起来。

是指样式和数据计算都没有弄对是吗，可否传一下这个case jar？

yhdata_Jenny 发表于 2022-2-24 19:16
是指样式和数据计算都没有弄对是吗，可否传一下这个case jar？

样式不对，数据是对的。

yhdata_Jenny 发表于 2022-2-24 19:16
是指样式和数据计算都没有弄对是吗，可否传一下这个case jar？

只用一个文本组件，新建一个计算列，把上面的代码放进去，计算列绑定组件就可。

这个具体我们内部看一下，需要点时间，有结果第一时间反馈给您

yhdata_Jenny 发表于 2022-2-24 19:43
这个具体我们内部看一下，需要点时间，有结果第一时间反馈给您

需求已解决，请问帖子可以删除吗？

手可摘星辰 发表于 2022-2-25 13:39
需求已解决，请问帖子可以删除吗？

为什么删除呢
可以分享下怎么实现的吗？

永洪tech-Bella 发表于 2022-2-25 13:52
为什么删除呢
可以分享下怎么实现的吗？

换了指标卡，自由表，文本，凑在一起组合起来。