feat: 首页: 地图显示国籍业绩

src/components/MapCountry.jsx

@@ -0,0 +1,109 @@
+import { useContext, useState, useEffect, useMemo } from 'react';
+import { observer } from 'mobx-react';
+import { ChoroplethMap } from '@ant-design/maps';
+import { dataFieldAlias } from '../libs/ht';
+import { cloneDeep } from '../utils/commons';
+
+export default observer((props) => {
+  const { dataSource, sourceField, valueField, ...extConfig } = props;
+
+  const [mdataSource, setMdataSource] = useState([]);
+  useEffect(() => {
+    const dataMapped = (cloneDeep(dataSource) || []).reduce((r, v) => ({...r,
+      [(v.groupsLabel || '_').replace('(待删除)', '')]: v
+    }), {});
+    if (dataMapped?.['中国']) {
+      dataMapped['中国'].groupsLabel = '中华人民共和国';
+    }
+    setMdataSource(Object.values(dataMapped));
+    return () => {};
+  }, [dataSource, valueField]);
+
+  const config = {
+      container: '#topC',
+      map: {
+        // type: 'amap',
+        type: 'mapbox',
+        // style: 'blank',
+        center: [120.19382669582967, 30.258134],
+        zoom: 3,
+        pitch: 0,
+        // scrollZoom: false,
+        // dragPan: false,
+        // zoomEnable: false,
+        // token: 'd78b5ba25a4699a1cb567b7a933e630b', // amap
+      },
+      // geoArea: {
+      //   url: 'https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.2/choropleth-data',
+      //   type: 'topojson',
+      // },
+      source: {
+        data: mdataSource.filter((ele) => ele[sourceField]),
+        joinBy: {
+          geoField: 'name',
+          sourceField: sourceField || 'name',
+        },
+      },
+      autoFit: true,
+      color: {
+        field: valueField || 'value',
+        value: [
+          '#001D70',
+          '#0047A5',
+          '#1A4397',
+          '#2555B7',
+          '#3165D1',
+          '#3D76DD',
+          '#467BE8',
+          '#6296FE',
+          '#7EA6F9',
+          '#98B7F7',
+          '#BDD0F8',
+          '#DDE6F7',
+          '#F2F5FC'].reverse(),
+        scale: { type: 'quantile' },
+      },
+      viewLevel: {
+        // level: 'country',
+        // adcode: '100000',
+        // granularity: 'province',
+        level: 'world',
+        adcode: 'all',
+        granularity: 'country',
+      },
+      chinaBorder: false,
+      style: {
+        opacity: 1,
+        stroke: '#fff',
+        lineWidth: 0.6,
+        lineOpacity: 1,
+      },
+      state: {
+        active: {
+          stroke: 'yellow',
+          lineWidth: 0.6,
+          // lineOpacity: 0.8,
+        },
+      },
+      label: {
+        visible: true,
+        field: 'name',
+        style: {
+          fill: '#000',
+          opacity: 0.8,
+          fontSize: 10,
+          stroke: '#fff',
+          strokeWidth: 1.5,
+          textAllowOverlap: false,
+          padding: [8, 8],
+        },
+      },
+      tooltip: {
+        items: ['name', { field: valueField, alias: dataFieldAlias[valueField].alias, customValue: (v) => dataFieldAlias[valueField].formatter(v) }],
+      },
+      zoom: false,
+      legend: false,
+    };
+
+  return <ChoroplethMap {...config} />;
+});

src/views/Home.jsx

@@ -8,6 +8,7 @@ import Bullet from '../components/BulletWithSort';
 import Waterfall from '../components/Waterfall';
 import MixTBWithKPI from './../components/MixTBWithKPI';
 import Donut from './../components/Donut';
+import MapCountry from './../components/MapCountry';
 import DataFieldRadio from '../components/DataFieldRadio';
 import { datePartOptions } from './../components/DateGroupRadio/date';
 import SearchForm from './../components/search/SearchForm';
@@ -18,7 +19,7 @@ import './home.css';
 const topSeries = [
   { key: 'dept', label: '小组', graphVisible: true },
   { key: 'operator', label: '顾问', graphVisible: true },
-  { key: 'country', label: '国籍', graphVisible: true },
+  { key: 'country', label: '国籍', graphVisible: false },
   { key: 'GuestGroupType', label: '客群类别', graphVisible: false },
   { key: 'destination', label: '目的地', graphVisible: true },
 ];
@@ -252,10 +253,10 @@ export default observer(() => {
             <DataFieldRadio value={valueKey} onChange={handleChangeValueKey} />
           </div>
         </Space>
-        <Row gutter={layoutProps.gutter}>
+        <Row gutter={layoutProps3.gutter}>
           {topSeriesSet.map((item) =>
             item.graphVisible ? (
-              <Col {...layoutProps} key={item.key}>
+              <Col {...layoutProps3} key={item.key}>
                 <Spin spinning={topData[item.key]?.loading || false}>
                   <h3 style={{ textAlign: 'center' }}>{item.label}</h3>
                   <Bullet {...BulletConfig} dataSource={topData[item.key]?.dataSource || []} itemLength={10} key={item.key} />
@@ -265,6 +266,21 @@ export default observer(() => {
           )}
         </Row>
       </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>
+          </Col>
+        </Row>
+      </Spin>
+      </section>
     </>
   );
 });