style: 首页: TOP条形图: 负数红色

src/components/BulletWithSort.jsx

@@ -13,32 +13,47 @@ export default observer((props) => {
     const maxKPI = Math.max(...(origin || []).map((ele) => (ele?.[targetField] || 0)));
     const maxValue = Math.max(...(origin || []).map((ele) => ele[measureField]));
     const _max = Math.max(maxKPI, maxValue);
+    const minValue = Math.min(...(origin || []).map((ele) => ele[measureField]));
+    const _min = Math.ceil(Math.min(0, minValue));
     const sortData = origin.sort(sortBy(measureField)).slice(-itemLength);
     // 顶格的值定在更远
     const _parseData = sortData?.map((ele) => ({ ...ele,
-      [rangeField]: [0, Math.ceil(_max / 0.9)],
+      [rangeField]: [_min, Math.ceil(_max / 0.9)],
       // [measureField]: [ele[measureField]],
       [measureField]: ele[measureFieldArrKey] || [ele[measureField]],
       [targetField]: (ele?.[targetField] || 0)
     }));
-    return _parseData;
+    return { _parseData, _max, _min };
   };
   const dataMapped = dataSource.reduce((r, v) => ({...r, [v.groupsLabel]: v}), {});
   const ifMergeTB = isEmpty(dataSource) ? false : !isEmpty(dataSource[0]?.[`${extProps.measureField}_arr`]);
 
   const [parseData, setParseData] = useState([]);
+  const [maxV, setMaxV] = useState(0);
+  const [minV, setMinV] = useState(0);
   useEffect(() => {
-    setParseData(dataParser(dataSource));
+    const _pdata = dataParser(dataSource);
+    setParseData(_pdata._parseData);
+    setMaxV(_pdata._max);
+    setMinV(_pdata._min);
     return () => {};
   }, [extProps.measureField, dataSource]);
 
   const config = merge({
     color: {
-      range: [ '#FFF3E1', '#FFF3E1'],
+      range: [].concat((minV < 0 ? ['#ffe4e4'] : []), [ '#FFF3E1', '#FFF3E1']),
-      // range: [ '#FFF3E1', '#FFF3E1', '#FFe0b0', '#bfeec8'], // '#FFbcb8', '#FFe0b0',
       measure: ['#5B8FF9', '#61ddaa'],
       target: '#FF9845',
     },
+    bulletStyle: {
+      measure: (item, ...r) => {
+        if (item[extProps.measureField] < 0) {
+          return {
+            fill: '#F4664A',
+          };
+        }
+      },
+    },
     label: {
       target: false,
       measure: {

src/components/MapCountry.jsx

@@ -26,7 +26,7 @@ export default observer((props) => {
         type: 'mapbox',
         // style: 'blank',
         center: [120.19382669582967, 30.258134],
-        zoom: 3,
+        zoom: 2,
         pitch: 0,
         // scrollZoom: false,
         // dragPan: false,

src/views/Home.jsx

@@ -19,9 +19,9 @@ import './home.css';
 const topSeries = [
   { key: 'dept', label: '小组', graphVisible: true },
   { key: 'operator', label: '顾问', graphVisible: true },
-  { key: 'country', label: '国籍', graphVisible: false },
-  { key: 'GuestGroupType', label: '客群类别', graphVisible: false },
   { key: 'destination', label: '目的地', graphVisible: true },
+  { key: 'GuestGroupType', label: '客群类别', graphVisible: false },
+  { key: 'country', label: '国籍', graphVisible: true },
 ];
 
 // const iconSets = [CheckCircleTwoTone, <MoneyCollectTwoTone />, <FlagTwoTone />, <ClockCircleTwoTone />, <DashboardTwoTone />,<SmileTwoTone />,];
@@ -264,22 +264,14 @@ export default observer(() => {
               </Col>
             ) : null
           )}
-        </Row>
+          <Col {...layoutProps3} key={'mapG'} lg={{ span: 16 }}>
-      </section>
-      <section>
             <Spin spinning={topData?.country?.loading || false}>
-        <Row gutter={layoutProps3.gutter}>
-          <Col {...layoutProps3} key={'mapD'} lg={{ span: 6 }}>
-            <h3 style={{ textAlign: 'center' }}>国籍</h3>
-            <Bullet {...BulletConfig} dataSource={topData?.country?.dataSource || []} itemLength={10} key={`countryD`} />
-          </Col>
-          <Col {...layoutProps3} key={'mapG'} lg={{ span: 18 }}>
             <div id='topC' style={{height: '700px'}}>
               <MapCountry sourceField={'groupsLabel'} valueField={BUConfig.measureField} dataSource={topData?.country?.dataSource || []} />
             </div>
+            </Spin>
           </Col>
         </Row>
-      </Spin>
       </section>
     </>
   );