这是Power BI制作的订单明细表:

这是FineBI模拟的结果:

两个BI原理相同,都是使用SVG矢量图实现支付方式、客户类型和客户满意度美化,细节略有区别。以下对FineBI实现过程展开说明。
新建数据分析主题,并上传订单数据:

新建组件,添加计算字段:

新建三个SVG字段,字段公式如下:

"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='25'><rect rx='10' x='0' y='5' width='100' height='20' fill='" + SWITCH(${data_客户类型},"非会员","Tomato","初级会员","rgba(0,128,0,0.6)","green") + "'/><text x='50' y='14' dominant-baseline='central' text-anchor='middle' font-size='12' fill='white'>"+ ${data_客户类型}+"</text></svg>"
"data:image/svg+xml;utf8,<svgxmlns='http://www.w3.org/2000/svg'height='25'width='150' ><linex1='0'y1='12.5'x2='150'y2='12.5'style='stroke:DimGray;stroke-width:1;stroke-dasharray:2;'/><circletransform='translate(10,0)'cx='" + 130 * (${data_客户满意度}-1) / 9 + "'cy='12.5'r='10'fill='" + IF(${data_客户满意度}<=5, "tomato", "darkcyan") + "'/><texttransform='translate(10,0)'x='" + 130 * (${data_客户满意度}-1) / 9 + "'y='17'font-size='12'text-anchor='middle'fill='snow'>" + ${data_客户满意度}+ "</text></svg>"
SWITCH(${data_支付方式}, "支付宝","data:image/svg+xml;utf8,<svgwidth='48'height='48'viewBox='0 0 48 48'fill='none'xmlns='http://www.w3.org/2000/svg'><rectrx='7.2' x='0'y='0'width='48'height='48' fill='RoyalBlue' fill-opacity='0.2' stroke-width='0' /><pathd='M24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0ZM24 4.36364C13.1551 4.36364 4.36364 13.1551 4.36364 24C4.36364 34.8449 13.1551 43.6364 24 43.6364C30.7379 43.6364 36.6832 40.2427 40.2199 35.0715C38.7865 34.647 36.4967 33.9121 33.537 32.6689C32.3002 32.1494 30.4531 31.3299 27.9958 30.2104C25.0556 33.1735 20.769 36 16.1742 36C12.9855 35.9844 7.63636 34.3728 7.63636 29.3458C7.63636 24.3188 12.5923 23.1225 15.8076 23.1225C17.7535 23.1225 21.1973 24.1964 26.1389 26.3443L26.2149 26.3741C27.5413 24.7514 28.4513 22.867 28.9459 20.7208L29.0455 20.2571L20.3944 20.2571C19.0841 20.257 17.6773 20.2569 16.1742 20.2568V17.9371L22.032 17.9367V15.0371L13.8306 15.0375V13.2977L22.032 13.2971L22.033 9.81818H26.72L26.7196 13.2971L36.0941 13.2977V15.0375L26.7196 15.0371V17.9367L34.2059 17.9371C34.0959 18.661 33.9722 19.3186 33.8347 19.91L33.7506 20.2568C33.4061 21.5023 32.6313 23.3162 31.4262 25.6986C31.1062 26.3312 30.6437 27.0626 30.0599 27.838C31.904 28.5215 33.771 29.1844 35.6605 29.8275C38.1068 30.6601 40.2216 31.3339 42.005 31.8487C43.0543 29.445 43.6364 26.7905 43.6364 24C43.6364 13.1551 34.8449 4.36364 24 4.36364ZM10.3154 28.5436C10.3154 31.7418 17.0047 33.0159 22.4246 29.6497C23.0347 29.2707 23.6048 28.8664 24.1348 28.4369L24.1166 28.4286L23.69 28.1665C20.308 26.1089 17.6806 24.9932 15.8076 24.8194C14.0892 24.66 10.3154 25.3455 10.3154 28.5436ZM29.0455 20.2568L29.0455 20.2571L31.2536 20.2574L29.0455 20.2568Z'fill='RoyalBlue'/></svg>","微信", "data:image/svg+xml;utf8,<svgxmlns='http://www.w3.org/2000/svg'class='icon icon-tabler icon-tabler-brand-wechat'width='48'height='48'viewBox='0 0 24 24'stroke-width='2'stroke='MediumSeaGreen'fill='none'stroke-linecap='round'stroke-linejoin='round'><rectrx='3.6' x='0'y='0'width='24'height='24' fill='MediumSeaGreen' fill-opacity='0.2' stroke-width='0' /><pathstroke='none'd='M0 0h24v24H0z'fill='none'/><pathd='M16.5 10c3.038 0 5.5 2.015 5.5 4.5c0 1.397 -.778 2.645 -2 3.47l0 2.03l-1.964 -1.178a6.649 6.649 0 0 1 -1.536 .178c-3.038 0 -5.5 -2.015 -5.5 -4.5s2.462 -4.5 5.5 -4.5z' /><pathd='M11.197 15.698c-.69 .196 -1.43 .302 -2.197 .302a8.008 8.008 0 0 1 -2.612 -.432l-2.388 1.432v-2.801c-1.237 -1.082 -2 -2.564 -2 -4.199c0 -3.314 3.134 -6 7 -6c3.782 0 6.863 2.57 7 5.785l0 .233' /><pathd='M10 8h.01' /><pathd='M7 8h.01' /><pathd='M15 14h.01' /><pathd='M18 14h.01' /></svg>","data:image/svg+xml;utf8,<svgwidth='48'height='48'viewBox='0 0 48 48'fill='none'xmlns='http://www.w3.org/2000/svg'><rectrx='7.2' x='0'y='0'width='48'height='48' fill='Red' fill-opacity='0.2' stroke-width='0' /><pathd='M38 15V7H10V15'stroke='Red'stroke-width='2'stroke-linecap='round'stroke-linejoin='round'/><pathd='M43 27V15H5V41H43'stroke='Red'stroke-width='2'stroke-linecap='round'stroke-linejoin='round'/><pathd='M29 27L24 34L43 34'stroke='Red'stroke-width='2'stroke-linecap='round'stroke-linejoin='round'/><pathd='M26 21H22'stroke='Red'stroke-width='2'stroke-linecap='round'stroke-linejoin='round'/><pathd='M16 21H12'stroke='Red'stroke-width='2'stroke-linecap='round'stroke-linejoin='round'/></svg>")明细表数据区域拖入对应字段:

为使SVG正常显示,需要将显示类型设置为图片:
