瀑布图没有KPI值时, 显示原数据

src/components/StatisticCard2.jsx

@@ -1,7 +1,7 @@
 import { useContext, useState } from 'react';
 import { observer } from 'mobx-react';
 import { StatisticCard } from '@ant-design/pro-components';
-import { RingProgress, Progress, Bullet, } from '@ant-design/plots';
+import { RingProgress, Progress, Bullet } from '@ant-design/plots';
 import RcResizeObserver from 'rc-resize-observer';
 import { stores_Context } from '../config';
 import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
@@ -16,45 +16,25 @@ export default observer((props) => {
   const VSIcon = () => ((props?.VSrate || -1) < 0 ? <ArrowDownOutlined /> : <ArrowUpOutlined />);
   // console.log(props, ';;;;');
   const [responsive, setResponsive] = useState(false);
+  const showMulti = traditional.value && biz.value;
   const bulletData = [
     {
       title: '',
       // ranges: [0, kpiVal || (traditional.value + biz.value + 100 )],
-      ranges: [0, Math.ceil(originVal*1.1)],
+      ranges: [0, Math.ceil(originVal * 1.1)],
       measures: [traditional.value, biz.value],
       target: kpiVal || 0,
     },
   ];
-  // console.log(bulletData, 'bbbbbbbbb');
-
-  const RingProgressConfigBlue = {
-    height: 60,
-    width: 60,
-    autoFit: false,
-    color: ['#5B8FF9', '#E8EDF3'],
-    label: false,
-  };
-  const RingProgressConfigGreen = {
-    height: 50,
-    width: 50,
-    autoFit: false,
-    // color: ['#f6bd16', '#E8EDF3'],
-    color: ['#61ddaa', '#E8EDF3'], // #7cb305
-    // innerRadius: 0.90,
-  };
 
   const bulletConfig = {
-    // data,
     measureField: 'measures',
     rangeField: 'ranges',
     targetField: 'target',
     xField: 'title',
-    // autoFit: false,
-    // width: 20,
     height: 60,
-    // renderer: 'svg',
     color: {
-      range: [ '#E8EDF3', '#FFF3E1'],
+      range: ['#E8EDF3', '#FFF3E1'],
       // range: ['#FFbcb8', '#FFe0b0', '#bfeec8'],
       measure: ['#5B8FF9', '#61DDAA'],
       target: kpiVal ? '#FF9845' : '#5B8FF9',
@@ -92,36 +72,8 @@ export default observer((props) => {
             value: props.valueSuffix ? `${props.value} ${props.valueSuffix}` : props.value,
             prefix: <ValueIcon twoToneColor="#89B67F" />,
           }}
-          chart={<Bullet data={bulletData} {...bulletConfig} layout={'horizontal'} />}
-        />
-        {false && <>
-        {/* {props.childrenVisible && <> */}
-        <Divider type={responsive ? 'horizontal' : 'vertical'} />
-        <StatisticCard
-          statistic={{
-            className: '__hn-sta-wrapper',
-            valueStyle,
-            // title: '付费流量',
-            // value: 3701928,
-            value: props.traditional.value,
-            // description: <Statistic title="占比" value="61.5%" />,
-          }}
-          chart={<RingProgress {...RingProgressConfigBlue} percent={0.7} statistic={{title: false,}} />}
-          chartPlacement="left"
-        />
-        <StatisticCard
-          statistic={{
-            className: '__hn-sta-wrapper',
-            valueStyle,
-            value: props.biz.value,
-            // title: '免费流量',
-            // value: 1806062,
-            description: <Statistic title="占比" value="38.5%" />,
-          }}
-          chart={<img src="https://gw.alipayobjects.com/zos/alicdn/6YR18tCxJ/huanlv.svg" alt="百分比" width="100%" />}
-          chartPlacement="left"
+          chart={showMulti ? <Bullet data={bulletData} {...bulletConfig} layout={'horizontal'} />: false}
         />
-        </>}
       </StatisticCard.Group>
     </RcResizeObserver>
   );

src/views/Home.jsx

@@ -107,7 +107,7 @@ export default observer(() => {
       },
     },
     label: {
-      formatter: (v) => (summaryData.kpi.value === 0 ? dataFieldAlias.SumML?.formatter(v.SumML) || v.SumML : ((v.SumML / summaryData.kpi.value) * 100).toFixed(2) + '%'),
+      formatter: (v) => ((summaryData.kpi?.value || 0) === 0 ? dataFieldAlias.SumML?.formatter(v.SumML) || v.SumML : ((v.SumML / summaryData.kpi.value) * 100).toFixed(2) + '%'),
     },
   };
 
@@ -243,7 +243,7 @@ export default observer(() => {
       </section>
       <section>
         <h3>
-          英语区目标客户
+          英语区目标客户 (仅传统订单)
           <Spin spinning={topData?.GuestGroupType?.loading || false}>
             <Table {...targetTableProps} pagination={false} />
           </Spin>