style:

src/components/StatisticCard.jsx

@@ -9,7 +9,6 @@ export default observer((props) => {
   return (
     <Card>
       <Statistic
-        {...props}
         className={'__hn-sta-wrapper'}
         valueStyle={valueStyle}
         suffix={
@@ -23,6 +22,8 @@ export default observer((props) => {
         }
         prefix={<ValueIcon twoToneColor="#89B67F" />}
         // title={<Space><ValueIcon twoToneColor="#89B67F" /><span>{props.title}</span></Space>}
+        {...props}
+        value={props.valueSuffix ? `${props.value} ${props.valueSuffix}` : props.value}
       />
       {props.showProgress !== false && <Progress percent={props.KPIrate} size="small" format={(percent) => `${props.KPIrate}%`} />}
     </Card>

src/libs/ht.js

@@ -96,7 +96,7 @@ export const dataFieldOptions = [
   { label: '毛利', value: 'SumML', formatter: (v) => `${v / 10000} 万`, nestkey: { p: 'MLKPIrates', v: 'MLKPIvalue' } },
   { label: '订单数', value: 'SumOrder', formatter: (v) => v, nestkey: { p: 'OrderKPIrates', v: 'OrderKPIvalue' } },
   { label: '成交数', value: 'ConfirmOrder', formatter: (v) => v, nestkey: { p: 'ConfirmOrderKPIrates', v: 'ConfirmOrderKPIvalue' } },
-  { label: '成交率', value: 'ConfirmRates', formatter: (v) => v, nestkey: { p: 'ConfirmRatesKPIrates', v: 'ConfirmRatesKPIvalue' } },
+  { label: '成交率', value: 'ConfirmRates', formatter: (v) => `${v} %`, nestkey: { p: 'ConfirmRatesKPIrates', v: 'ConfirmRatesKPIvalue' } },
   // { label: '人数', value: 'CJPersonNum', formatter: (v) => v },
   // todo: more...
 ];

src/stores/Trade.js

@@ -26,6 +26,7 @@ class Trade {
               {
                 title: '成团',
                 value: summary?.ConfirmOrder,
+                valueSuffix: summary?.ConfirmRates ? ` / ${summary.ConfirmRates} %` : undefined,
                 // VSrate: summary?.ConfirmOrderrate,
                 KPIrate: summary?.[dataFieldAlias.ConfirmOrder.nestkey.p],
                 // hasKPI: !isEmpty(summary?.[dataFieldAlias.ConfirmOrder.nestkey.p]),

src/views/Home.jsx

@@ -102,6 +102,13 @@ export default observer(() => {
     targetField: 'MLKPIvalue', //
     xField: 'groupsLabel',
     layout: 'vertical',
+    xAxis: {
+      line: null,
+      label: {
+        autoHide: true,
+        autoRotate: false,
+      },
+    }
   };
 
   const lineConfigSet = {