fix

config/proxy.js

@@ -8,8 +8,8 @@
 export default {
   dev: {
     '/api/': {
-      // target: 'https://xlk.njyz.tech/',
-      target: 'http://localhost:8567/',
+      target: 'https://xlk.njyz.tech/',
+      // target: 'http://localhost:8567/',
       // target: 'https://xlj.newlandsh.com/',
       changeOrigin: true,
       pathRewrite: {

src/components/EchartsTest/EChart.jsx

@@ -17,10 +17,37 @@ import 'echarts/lib/component/dataZoom';
 import 'echarts/lib/component/geo';
 import 'echarts/lib/component/visualMap';
 
-import { ChinaData } from './china';
+// import china from 'echarts/map/json/china-cities.json'
+// echarts.registerMap('china', china)
+
+import china from 'echarts/map/json/china.json'
+echarts.registerMap('china', china)
+console.log(china,'chinachinachina')
+// import china from 'echarts/map/json/china.json'
+// echarts.registerMap('china', china)
+// import { ChinaData } from './china';
 
 // echarts.registerMap('china', ChinaData);
 
+// import * as echarts from 'echarts/core';
+// import {
+//     TitleComponent,
+//     TooltipComponent
+// } from 'echarts/components';
+// import {
+//     ScatterChart,
+//     EffectScatterChart,
+//     CustomChart
+// } from 'echarts/charts';
+// import {
+//     CanvasRenderer
+// } from 'echarts/renderers';
+
+// echarts.use(
+//     [TitleComponent, TooltipComponent, ScatterChart, EffectScatterChart, CustomChart, CanvasRenderer]
+// );
+
+
 class EchartsTest extends Component {
     chartRef = React.createRef();
     chart = undefined

src/pages/statistics/dataReport/CityNums/index.jsx

@@ -0,0 +1,156 @@
+import React, { useState, useEffect } from 'react';
+import { Card, Slider } from 'antd';
+import Echart from '@/components/EchartsTest/EChart';
+import { fetch, apis } from '@/utils/request';
+// import  ECharts from './echarts';
+
+const geoOptions = {};
+
+const getCityData = fetch(apis.indexEcharts.personCity);
+
+const mapDataRange = x => {
+  // 映射区间 [1, 100000] => [rangeStart, rangeEnd]
+  const min = 1;
+  const max = 100000;
+  const rangeStart = 16;
+  const rangeEnd = 24;
+
+  return rangeStart + ((x - min) * (rangeEnd - rangeStart)) / (max - min);
+};
+
+const CityNums = props => {
+  const [data, setData] = useState([]);
+  const [zoom, setZoom] = useState(1.2);
+  const [option, setOption] = useState({});
+
+  useEffect(() => {
+    getCityData().then(response => {
+      const { selectCityUser = [] } = response || {};
+      const data = selectCityUser.map(item => {
+        return {
+          name: item.name,
+          value: [item.lng - 0, item.lat - 0, item.cityCount],
+        };
+      });
+      setData(data);
+    });
+  }, []);
+
+  useEffect(() => {
+    setOption({
+      tooltip: {
+        trigger: 'item',
+        formatter: params => {
+          return `${params.data.name}: ${params.data.value[2]}`;
+        },
+      },
+      geo: {
+        map: 'china',
+        roam: 'move',
+        zoom: zoom,
+        label: {
+          normal: {
+            show: true,
+            color: '#aaa',
+          },
+          emphasis: {
+            show: true,
+          },
+        },
+        itemStyle: {
+          normal: {
+            areaColor: '#f3f3f3',
+            borderColor: '#ddd',
+          },
+          emphasis: {
+            areaColor: '#eee',
+          },
+        },
+      },
+      series: [
+        {
+          name: '人数',
+          type: 'scatter',
+          coordinateSystem: 'geo',
+          data,
+          symbolSize: 10,
+          label: {
+            normal: {
+              formatter: '{b}',
+              position: 'right',
+              show: false,
+            },
+            emphasis: {
+              show: true,
+            },
+          },
+          itemStyle: {
+            normal: {
+              color: '#DB3C4B',
+            },
+          },
+        },
+        {
+          name: '前三',
+          type: 'effectScatter',
+          coordinateSystem: 'geo',
+          data: data
+            .sort(function(a, b) {
+              return b.value[2] - a.value[2];
+            })
+            .slice(0, 3),
+          symbolSize: function(val) {
+            return mapDataRange(val[2]);
+          },
+          showEffectOn: 'render',
+          rippleEffect: {
+            brushType: 'stroke',
+          },
+          hoverAnimation: true,
+          label: {
+            normal: {
+              formatter: '{b}',
+              position: 'right',
+              show: false,
+            },
+          },
+          itemStyle: {
+            normal: {
+              color: '#DB3C4B',
+              shadowBlur: 10,
+              shadowColor: '#333',
+            },
+          },
+          zlevel: 1,
+        },
+      ],
+    });
+  }, [data, zoom]);
+
+  const marks = [0.5,2];
+
+  return (
+    <Card
+      title={
+        <div>
+          城市分布
+          <span style={{ fontSize: '8px', color: '#c4c4c4' }}>(数据会存在一定时间延迟)</span>
+        </div>
+      }
+      headStyle={{ textAlign: 'left' }}
+      // extra={<TimeSelect onChange={onTimeChange}></TimeSelect>}
+    >
+      <div style={{ display: 'flex' }}>
+        <div style={{ width: '50px', display: 'inline-block', height: 300 }}>
+          <Slider value={zoom} vertical min={0.5} step={0.1} max={5} defaultValue={1} onChange={(value)=>{setZoom(value)}}/>
+        </div>
+        <div style={{flex:'1'}}>
+        <Echart options={option} style={{ width: '100%', height: '600px' }}></Echart>
+        </div>
+        
+      </div>
+    </Card>
+  );
+};
+
+export default CityNums;

src/pages/statistics/dataReport/index.jsx

@@ -10,6 +10,7 @@ import SourceRole from './components/SourceRole';
 import UserSex from './components/UserSex';
 import UserConversion from './components/UserConversion';
 import BuildingStatistic from './BuildingStatistic';
+import CityNums from './CityNums';
 
 const DataReport = props => {
   const [data, setData] = useState([]);
@@ -19,6 +20,9 @@ const DataReport = props => {
       <div style={{ marginBottom: '20px' }}>
         <Count></Count>
       </div>
+      <div style={{ marginBottom: '20px' }}>
+        <CityNums></CityNums>
+      </div>
       <div style={{ marginBottom: '20px' }}>
         <Row gutter={16} style={{ textAlign: 'center' }}>
           <Col span={8}>