Skip to content

Commit 6b09c4e

Browse files
introvert-yintrovert-y
committed
update
1 parent 5299117 commit 6b09c4e

File tree

5 files changed

+10644
-35
lines changed

5 files changed

+10644
-35
lines changed

‎src/page/chinaMap/index.js

Lines changed: 61 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ function initChart(inst, opt = {}) {
3232
return;
3333
}
3434
const mydata = [
35-
{name: '北京',value: '100' },{name: '天津',value: randomData() },
35+
{name: '北京',value: randomData() },{name: '天津',value: randomData()},
3636
{name: '上海',value: randomData() },{name: '重庆',value: randomData() },
3737
{name: '河北',value: randomData() },{name: '河南',value: randomData() },
3838
{name: '云南',value: randomData() },{name: '辽宁',value: randomData() },
@@ -61,41 +61,71 @@ function initChart(inst, opt = {}) {
6161
},
6262
tooltip : {
6363
trigger: 'item'
64-
},
64+
},
6565

6666
//左侧小导航图标
67-
visualMap: {
68-
show : true,
69-
x: 'left',
70-
y: 'center',
71-
splitList: [
72-
{start: 500, end:600},{start: 400, end: 500},
73-
{start: 300, end: 400},{start: 200, end: 300},
74-
{start: 100, end: 200},{start: 0, end: 100},
75-
],
76-
color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']
77-
},
67+
visualMap: [
68+
// {
69+
// show : true,
70+
// x: 'left',
71+
// y: 'center',
72+
// splitList: [
73+
// {start: 500, end:600},{start: 400, end: 500},
74+
// {start: 300, end: 400},{start: 200, end: 300},
75+
// {start: 100, end: 200},{start: 0, end: 100},
76+
// ],
77+
// color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']
78+
// },
79+
{
80+
min: 0,
81+
max: 500,
82+
left: 'left',
83+
top: 'bottom',
84+
text: ['高', '低'],
85+
calculable: true,
86+
color: '#fff',
87+
textStyle: {
88+
color: 'black',
89+
},
90+
inRange: {
91+
color: ['#00467F', '#A5CC82']
92+
},
93+
orient: 'horizontal',
94+
itemWidth: 9,
95+
},
96+
],
7897

7998
//配置属性
80-
series: [{
81-
name: '数据',
82-
type: 'map',
83-
mapType: 'china',
84-
roam: true,
85-
label: {
86-
position: 'inside',
87-
emphasis: {
88-
show: false
89-
}
99+
series: [
100+
{
101+
type: 'map',
102+
mapType: 'china',
103+
roam: false,
104+
label: {
105+
position: 'inside',
106+
emphasis: {
107+
show: false,
108+
},
109+
},
110+
itemStyle: {
111+
normal: {
112+
areaColor: '#091a5c',
113+
borderColor: '#17398e',
114+
borderWidth: 1,
115+
},
116+
emphasis: {
117+
areaColor: '#4ffbbd',
118+
},
119+
},
120+
data: mydata.map(item => ({
121+
name: replaceProvinceName(item.name),
122+
value: item.value,
123+
label: {
124+
show: true,
90125
},
91-
data: mydata.map(item => ({
92-
name: replaceProvinceName(item.name),
93-
value: item.value,
94-
label: {
95-
show: true,
96-
},
97-
})), //数据
98-
}]
126+
})),
127+
},
128+
]
99129
};
100130

101131
//使用制定的配置项和数据显示图表

‎src/page/echartBox/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,7 @@ function initChart(inst, opt = {}) {
155155
function DataChart() {
156156
const myChart = useRef(null);
157157
useEffect(() => {
158+
console.log('渲染了');
158159
myChart.current = echarts.init(myChart.current);
159160
initChart(myChart.current, {
160161
notMerge: true,
@@ -164,6 +165,7 @@ function DataChart() {
164165
myChart.current.dispose();
165166
};
166167
}, []);
168+
167169
return (
168170
<>
169171
<div style={{ marginLeft: 50 }}>series数组里的对象可以有formatter</div>

‎src/page/heightEchart/index.js

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
import React, {
2+
useEffect, useRef,
3+
} from 'react';
4+
import echarts from '../../echarts';
5+
6+
const frontMap = {
7+
type: 'map',
8+
map: 'china',
9+
label: {
10+
emphasis: {
11+
show: false,
12+
},
13+
},
14+
roam: false,
15+
itemStyle: {
16+
normal: {
17+
areaColor: '#091a5c',
18+
borderColor: '#17398e',
19+
borderWidth: 1,
20+
},
21+
emphasis: {
22+
areaColor: '#2a333d',
23+
},
24+
},
25+
tooltip: {
26+
show: false,
27+
},
28+
};
29+
30+
const convertData = (data, map) => {
31+
const res = [];
32+
for (let i = 0; i < data.length; i += 1) {
33+
const dataItem = data[i];
34+
const fromCoord = map[dataItem[0].name];
35+
const toCoord = map[dataItem[1].name];
36+
if (fromCoord && toCoord) {
37+
res.push({
38+
fromName: dataItem[0].name,
39+
toName: dataItem[1].name,
40+
coords: [fromCoord, toCoord],
41+
});
42+
}
43+
}
44+
return res;
45+
};
46+
47+
/**
48+
* 初始化chart
49+
*/
50+
function initChart(el, opt={}) {
51+
if (!el) {
52+
return;
53+
}
54+
const option = {
55+
tooltip: {
56+
trigger: 'item',
57+
},
58+
geo: {
59+
map: 'china',
60+
label: {
61+
emphasis: {
62+
show: false,
63+
},
64+
},
65+
roam: false,
66+
itemStyle: {
67+
normal: {
68+
shadowColor: 'rgba(31, 205, 255, 0.8)',
69+
shadowBlur: 30,
70+
},
71+
},
72+
},
73+
series: [frontMap],
74+
};
75+
el.setOption(option, opt);
76+
}
77+
78+
function updateChart(el) {
79+
const location = {"id":null,"province":"广东省","city":"广州市","county":"番禺区","longitude":113.41239161249568,"latitude":23.067357458890267}
80+
const geoCoordMap = {
81+
[location.province]: [location.longitude, location.latitude],
82+
};
83+
84+
const GZData = [];
85+
86+
const list = [
87+
{"id":null,"province":"广东省","city":"广州市","county":"番禺区","longitude":113.3842,"latitude":22.9377,"projectCounts":5,"workerCounts":19},
88+
{"id":null,"province":"湖南省","city":"邵阳市","county":"隆回县","longitude":111.0086,"latitude":27.1158,"projectCounts":1,"workerCounts":8},
89+
{"id":null,"province":"北京市","city":"北京市","county":"西城区","longitude":116.3978,"latitude":39.9037,"projectCounts":1,"workerCounts":0}
90+
]
91+
92+
list.sort((a, b) => b.workerCounts - a.workerCounts);
93+
const maxWorkerCounts = list.length ? list[0].workerCounts : 0;
94+
const minWorkerCounts = list.length ? list[list.length - 1].workerCounts : 0;
95+
96+
list.map((p) => {
97+
geoCoordMap[p.province] = [p.longitude, p.latitude];
98+
GZData.push([
99+
{ name: location.province },
100+
{ name: p.province, value: p.workerCounts },
101+
]);
102+
return p;
103+
});
104+
105+
const series = [];
106+
[[location.province, GZData]].forEach((item) => {
107+
const tail = {
108+
// name: `${item[0]}`,
109+
type: 'lines',
110+
zlevel: 1,
111+
effect: {
112+
show: true,
113+
period: 3,
114+
trailLength: 0.6,
115+
color: '#fff',
116+
symbolSize: 3,
117+
},
118+
lineStyle: {
119+
normal: {
120+
color: '#fff',
121+
width: 0,
122+
curveness: 0.2,
123+
},
124+
},
125+
data: convertData(item[1], geoCoordMap),
126+
};
127+
const dot1 = {
128+
// name: `${item[0]}`,
129+
type: 'lines',
130+
zlevel: 2,
131+
effect: {
132+
show: true,
133+
period: 3,
134+
trailLength: 0,
135+
symbol: 'circle',
136+
symbolSize: 5,
137+
color: '#3cffcb',
138+
},
139+
lineStyle: {
140+
normal: {
141+
color: '#fff',
142+
width: 2,
143+
opacity: 0.6,
144+
curveness: 0.2,
145+
},
146+
},
147+
data: convertData(item[1], geoCoordMap),
148+
};
149+
const city = {
150+
// name: `${item[0]}`,
151+
type: 'effectScatter',
152+
coordinateSystem: 'geo',
153+
zlevel: 2,
154+
rippleEffect: {
155+
brushType: 'stroke',
156+
},
157+
// label: {
158+
// normal: {
159+
// show: true,
160+
// position: 'right',
161+
// },
162+
// formatter: '{b}',
163+
// },
164+
symbolSize(dot) {
165+
console.log('dot', dot);
166+
const val = dot[2];
167+
if (minWorkerCounts === maxWorkerCounts) {
168+
return 15;
169+
}
170+
return (val - minWorkerCounts) / (maxWorkerCounts - minWorkerCounts) * 5 + 10;
171+
},
172+
itemStyle: {
173+
normal: {
174+
color: '#50febf',
175+
},
176+
},
177+
data: item[1].map((dataItem, idx) => ({
178+
name: dataItem[1].name,
179+
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]),
180+
tooltip: {
181+
formatter: `${dataItem[1].name}：${list[idx].projectCounts}个`,
182+
},
183+
label: {
184+
normal: {
185+
show: true,
186+
position: 'right',
187+
formatter: '{b}',
188+
},
189+
},
190+
})),
191+
};
192+
series.push(tail, dot1, city, frontMap);
193+
// series.push(tail, city, frontMap);
194+
console.log(series);
195+
});
196+
el.setOption({
197+
series,
198+
});
199+
}
200+
201+
202+
function DataChart() {
203+
const myChart = useRef(null);
204+
useEffect(() => {
205+
myChart.current = echarts.init(myChart.current);
206+
initChart(myChart.current, {
207+
notMerge: true,
208+
});
209+
updateChart(myChart.current);
210+
return () => {
211+
// console.log('销毁时');
212+
myChart.current.dispose();
213+
};
214+
}, []);
215+
// const chartDOMRef = useCallback((el) => {
216+
// if (el) {
217+
// if (!myChart.current) {
218+
// myChart.current = echarts.init(el);
219+
// }
220+
// initChart(myChart.current, {
221+
// notMerge: true,
222+
// });
223+
// } else {
224+
// if (!myChart.current) {
225+
// return;
226+
// }
227+
// myChart.current.dispose();
228+
// }
229+
// }, []);
230+
231+
return (
232+
<>
233+
<div ref={myChart} style={{ height: 300, backgroundColor: '#dedede' }} />
234+
</>
235+
);
236+
}
237+
238+
239+
export default DataChart;

‎src/router/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import ChinaMap from '../page/chinaMap/index'
1313
import UseMemo from '../page/useMemo/index'
1414
import UseCallback from '../page/useCallback/index'
1515
import Memo from '../page/memoParent/index'
16+
import HeightEchart from '../page/heightEchart/index'
1617

1718
function Header() {
1819
return (
@@ -55,6 +56,9 @@ function Header() {
5556
<li>
5657
<Link to="/map">echart实现中国地图</Link>
5758
</li>
59+
<li>
60+
<Link to="/heightEchart">echart的高级应用</Link>
61+
</li>
5862
<li>
5963
<Link to="/useMemo">hook之useMemo</Link>
6064
</li>
@@ -86,6 +90,7 @@ function App() {
8690
<Route path="/useMemo" component={UseMemo} />
8791
<Route path="/useCallback" component={UseCallback} />
8892
<Route path="/memo" component={Memo} />
93+
<Route path="/heightEchart" component={HeightEchart} />
8994
</Switch>
9095
</div>
9196
</BrowserRouter>

0 commit comments

Comments
 (0)