|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+import React, { useState, useEffect } from 'react';
|
|
|
2
|
+import Echart from '../../components/EchartsTest/EChart';
|
|
|
3
|
+import { fetch, apis } from '@/utils/request';
|
|
|
4
|
+
|
|
|
5
|
+const geoOptions = {
|
|
|
6
|
+ backgroundColor: '#fff',
|
|
|
7
|
+ title: {
|
|
|
8
|
+ text: '城市分布',
|
|
|
9
|
+ left: 20,
|
|
|
10
|
+ top: 20
|
|
|
11
|
+ },
|
|
|
12
|
+ tooltip : {
|
|
|
13
|
+ trigger: 'item',
|
|
|
14
|
+ formatter: (params) => {
|
|
|
15
|
+ return `${params.data.name}: ${params.data.value[2]}`
|
|
|
16
|
+ }
|
|
|
17
|
+ },
|
|
|
18
|
+ geo: {
|
|
|
19
|
+ map: 'china',
|
|
|
20
|
+ roam: true,
|
|
|
21
|
+ zoom: 1.2,
|
|
|
22
|
+ label: {
|
|
|
23
|
+ normal: {
|
|
|
24
|
+ show: true,
|
|
|
25
|
+ color: '#aaa',
|
|
|
26
|
+ },
|
|
|
27
|
+ emphasis: {
|
|
|
28
|
+ show: true
|
|
|
29
|
+ }
|
|
|
30
|
+ },
|
|
|
31
|
+ itemStyle: {
|
|
|
32
|
+ normal: {
|
|
|
33
|
+ areaColor: '#f3f3f3',
|
|
|
34
|
+ borderColor: '#ddd'
|
|
|
35
|
+ },
|
|
|
36
|
+ emphasis: {
|
|
|
37
|
+ areaColor: '#eee'
|
|
|
38
|
+ }
|
|
|
39
|
+ }
|
|
|
40
|
+ },
|
|
|
41
|
+}
|
|
|
42
|
+
|
|
|
43
|
+const getCityData = fetch(apis.indexEcharts.userCity)
|
|
|
44
|
+
|
|
|
45
|
+const mapDataRange = x => {
|
|
|
46
|
+ // 映射区间 [1, 100000] => [rangeStart, rangeEnd]
|
|
|
47
|
+ const min = 1
|
|
|
48
|
+ const max = 100000
|
|
|
49
|
+ const rangeStart = 16
|
|
|
50
|
+ const rangeEnd = 24
|
|
|
51
|
+
|
|
|
52
|
+ return rangeStart + (x - min) * (rangeEnd - rangeStart) / (max - min)
|
|
|
53
|
+}
|
|
|
54
|
+
|
|
|
55
|
+const CityNums = (props) => {
|
|
|
56
|
+ const [data, setData]= useState([])
|
|
|
57
|
+
|
|
|
58
|
+ useEffect(() => {
|
|
|
59
|
+ getCityData().then(response => {
|
|
|
60
|
+ const { selectCityUser = [] } = response || {}
|
|
|
61
|
+ const data = selectCityUser.map((item) => {
|
|
|
62
|
+ return {
|
|
|
63
|
+ name: item.name,
|
|
|
64
|
+ value: [item.lng - 0, item.lat - 0, item.cityCount]
|
|
|
65
|
+ }
|
|
|
66
|
+ })
|
|
|
67
|
+ setData(data)
|
|
|
68
|
+ })
|
|
|
69
|
+ }, [])
|
|
|
70
|
+
|
|
|
71
|
+ const options = {
|
|
|
72
|
+ ...geoOptions,
|
|
|
73
|
+ series: [
|
|
|
74
|
+ {
|
|
|
75
|
+ name: '人数',
|
|
|
76
|
+ type: 'scatter',
|
|
|
77
|
+ coordinateSystem: 'geo',
|
|
|
78
|
+ data,
|
|
|
79
|
+ symbolSize: 10,
|
|
|
80
|
+ label: {
|
|
|
81
|
+ normal: {
|
|
|
82
|
+ formatter: '{b}',
|
|
|
83
|
+ position: 'right',
|
|
|
84
|
+ show: false
|
|
|
85
|
+ },
|
|
|
86
|
+ emphasis: {
|
|
|
87
|
+ show: true
|
|
|
88
|
+ }
|
|
|
89
|
+ },
|
|
|
90
|
+ itemStyle: {
|
|
|
91
|
+ normal: {
|
|
|
92
|
+ color: '#DB3C4B'
|
|
|
93
|
+ }
|
|
|
94
|
+ }
|
|
|
95
|
+ },
|
|
|
96
|
+ {
|
|
|
97
|
+ name: '前三',
|
|
|
98
|
+ type: 'effectScatter',
|
|
|
99
|
+ coordinateSystem: 'geo',
|
|
|
100
|
+ data: data.sort(function (a, b) {
|
|
|
101
|
+ return b.value[2] - a.value[2];
|
|
|
102
|
+ }).slice(0, 3),
|
|
|
103
|
+ symbolSize: function (val) {
|
|
|
104
|
+ return mapDataRange(val[2]);
|
|
|
105
|
+ },
|
|
|
106
|
+ showEffectOn: 'render',
|
|
|
107
|
+ rippleEffect: {
|
|
|
108
|
+ brushType: 'stroke'
|
|
|
109
|
+ },
|
|
|
110
|
+ hoverAnimation: true,
|
|
|
111
|
+ label: {
|
|
|
112
|
+ normal: {
|
|
|
113
|
+ formatter: '{b}',
|
|
|
114
|
+ position: 'right',
|
|
|
115
|
+ show: false
|
|
|
116
|
+ }
|
|
|
117
|
+ },
|
|
|
118
|
+ itemStyle: {
|
|
|
119
|
+ normal: {
|
|
|
120
|
+ color: '#DB3C4B',
|
|
|
121
|
+ shadowBlur: 10,
|
|
|
122
|
+ shadowColor: '#333'
|
|
|
123
|
+ }
|
|
|
124
|
+ },
|
|
|
125
|
+ zlevel: 1
|
|
|
126
|
+ }
|
|
|
127
|
+ ],
|
|
|
128
|
+ }
|
|
|
129
|
+
|
|
|
130
|
+ return (
|
|
|
131
|
+ <div style={{ margin: '24px 0', width: '100%', borderRadius: '8px', boxShadow: '0px 0px 9px 1px rgba(0,0,0,0.12)', overflow: 'hidden' }}>
|
|
|
132
|
+ <Echart options={options} style={{ width: '100%', height: '600px' }} ></Echart>
|
|
|
133
|
+ </div>
|
|
|
134
|
+ )
|
|
|
135
|
+}
|
|
|
136
|
+
|
|
|
137
|
+export default CityNums;
|
