Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5ed3827

Browse files
author
高晨辉
committed
echat --map add
1 parent 7053953 commit 5ed3827

File tree

2 files changed

+336
-0
lines changed

2 files changed

+336
-0
lines changed

‎src/router/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,12 @@ export const asyncRoutes = [
193193
name: 'Dynamic-chart',
194194
component: () => import('@/views/echarts/dynamic-chart'),
195195
meta: { title: '切换charts' }
196+
},
197+
{
198+
path: 'map-chart',
199+
name: 'Map-chart',
200+
component: () => import('@/views/echarts/map-chart'),
201+
meta: { title: 'map' }
196202
}
197203
]
198204
},

‎src/views/echarts/map-chart.vue

Lines changed: 330 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,330 @@
1+
<template>
2+
<div class="slideCharts">
3+
<div class="chartBox">
4+
<div ref="myCharts" class="chartBox_d"></div>
5+
</div>
6+
</div>
7+
</template>
8+
9+
<script>
10+
import echarts from 'echarts'
11+
import resize from '@/mixins/resize'
12+
import 'echarts/map/js/china.js' // 引入中国地图数据
13+
require('echarts/theme/macarons')
14+
export default {
15+
mixins: [resize],
16+
data() {
17+
return {
18+
mycharts: null,
19+
mapData: [
20+
{
21+
fromName: '北京',
22+
toName: '江苏',
23+
value: 19,
24+
coords: [[116.4551, 40.2539], [119.68, 33.199]]
25+
},
26+
{
27+
fromName: '北京',
28+
toName: '安徽',
29+
value: 17,
30+
coords: [[116.4551, 40.2539], [117.229, 31.917]]
31+
},
32+
{
33+
fromName: '北京',
34+
toName: '上海',
35+
value: 25,
36+
coords: [[116.4551, 40.2539], [121.465, 31.289]]
37+
},
38+
{
39+
fromName: '北京',
40+
toName: '湖北',
41+
value: 31,
42+
coords: [[116.4551, 40.2539], [114.39, 30.663]]
43+
},
44+
{
45+
fromName: '北京',
46+
toName: '福建',
47+
value: 12,
48+
coords: [[116.4551, 40.2539], [119.454, 25.922]]
49+
},
50+
{
51+
fromName: '北京',
52+
toName: '浙江',
53+
value: 19,
54+
coords: [[116.4551, 40.2539], [119.531, 29.877]]
55+
},
56+
{
57+
fromName: '北京',
58+
toName: '陕西',
59+
value: 18,
60+
coords: [[116.4551, 40.2539], [109.116, 34.2]]
61+
},
62+
{
63+
fromName: '北京',
64+
toName: '河南',
65+
value: 15,
66+
coords: [[116.4551, 40.2539], [113.467, 34.623]]
67+
},
68+
{
69+
fromName: '北京',
70+
toName: '长春',
71+
value: 15,
72+
coords: [[116.4551, 40.2539], [125.8154, 44.2584]]
73+
},
74+
{
75+
fromName: '北京',
76+
toName: '拉萨',
77+
value: 15,
78+
coords: [[116.4551, 40.2539], [91.1865, 30.1465]]
79+
},
80+
{
81+
fromName: '北京',
82+
toName: '重庆',
83+
value: 15,
84+
coords: [[116.4551, 40.2539], [107.7539, 30.1904]]
85+
},
86+
{
87+
fromName: '北京',
88+
toName: '南宁',
89+
value: 15,
90+
coords: [[116.4551, 40.2539], [108.479, 23.1152]]
91+
}
92+
]
93+
}
94+
},
95+
mounted() {
96+
this.$nextTick().then(() => {
97+
this.initEcharts()
98+
})
99+
},
100+
methods: {
101+
initEcharts() {
102+
this.mycharts = echarts.init(this.$refs.myCharts, 'macarons')
103+
this._setOption()
104+
},
105+
_setOption() {
106+
this.mycharts.setOption({
107+
backgroundColor: '#404a59',
108+
title: {
109+
text: '每日货盘运行图',
110+
left: 'center',
111+
top: 30,
112+
textStyle: {
113+
color: '#fff'
114+
}
115+
},
116+
tooltip: {
117+
trigger: 'item'
118+
},
119+
geo: {
120+
// 这个是重点配置区
121+
map: 'china', // 表示中国地图
122+
roam: true,
123+
layoutCenter: ['50%', '50%'],
124+
layoutSize: '120%',
125+
label: {
126+
emphasis: {
127+
show: true,
128+
color: '#adadad'
129+
}
130+
},
131+
itemStyle: {
132+
normal: {
133+
areaColor: '#323c48',
134+
borderColor: '#404a59'
135+
},
136+
emphasis: {
137+
areaColor: '#2a333d',
138+
shadowOffsetX: 0,
139+
shadowOffsetY: 0,
140+
shadowBlur: 20,
141+
borderWidth: 0,
142+
shadowColor: 'rgba(0, 0, 0, 0.5)'
143+
}
144+
}
145+
},
146+
series: [
147+
{
148+
type: 'lines',
149+
zlevel: 1,
150+
effect: {
151+
show: true,
152+
period: 6,
153+
trailLength: 0.7,
154+
color: '#fff',
155+
symbolSize: 3
156+
},
157+
lineStyle: {
158+
normal: {
159+
color: '#000',
160+
width: 0,
161+
curveness: 0.2
162+
}
163+
},
164+
data: this.mapData
165+
},
166+
{
167+
type: 'lines',
168+
zlevel: 2,
169+
effect: {
170+
show: true,
171+
period: 6,
172+
trailLength: 0,
173+
symbol:
174+
'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
175+
symbolSize: 18
176+
},
177+
lineStyle: {
178+
normal: {
179+
color: '#a6c84c',
180+
width: 1,
181+
opacity: 0.6,
182+
curveness: 0.2
183+
}
184+
},
185+
tooltip: {
186+
trigger: 'item'
187+
},
188+
data: this.mapData
189+
},
190+
{
191+
name: '收货地址',
192+
type: 'effectScatter',
193+
coordinateSystem: 'geo',
194+
zlevel: 2,
195+
rippleEffect: {
196+
brushType: 'stroke'
197+
},
198+
tooltip: {
199+
trigger: 'item'
200+
},
201+
label: {
202+
normal: {
203+
show: true,
204+
position: 'left',
205+
offset: [-5, 5],
206+
formatter: '{b}'
207+
},
208+
emphasis: {
209+
show: true
210+
}
211+
},
212+
hoverAnimation: true,
213+
symbol: 'circle',
214+
symbolSize: 7,
215+
itemStyle: {
216+
normal: {
217+
// show: false,
218+
color: '#a6c84c'
219+
}
220+
},
221+
data: [
222+
{
223+
name: '江苏',
224+
value: [119.68, 33.199, 19]
225+
},
226+
{
227+
name: '安徽',
228+
value: [117.229, 31.917, 17]
229+
},
230+
{
231+
name: '上海',
232+
value: [121.465, 31.28, 25]
233+
},
234+
{
235+
name: '湖北',
236+
value: [114.39, 30.663, 31]
237+
},
238+
{
239+
name: '福建',
240+
value: [119.454, 25.922, 22]
241+
},
242+
{
243+
name: '浙江',
244+
value: [119.531, 29.877, 19]
245+
},
246+
{
247+
name: '陕西',
248+
value: [109.116, 34.2, 18]
249+
},
250+
{
251+
name: '河南',
252+
value: [113.467, 34.623, 15]
253+
},
254+
{
255+
name: '长春',
256+
value: [125.8154, 44.2584]
257+
},
258+
{
259+
name: '拉萨',
260+
value: [91.1865, 30.1465]
261+
},
262+
{
263+
name: '重庆',
264+
value: [107.7539, 30.1904]
265+
},
266+
{
267+
name: '南宁',
268+
value: [108.479, 23.1152]
269+
}
270+
]
271+
},
272+
{
273+
name: '发送地址',
274+
type: 'effectScatter',
275+
coordinateSystem: 'geo',
276+
zlevel: 2,
277+
rippleEffect: {
278+
brushType: 'stroke'
279+
},
280+
tooltip: {
281+
trigger: 'item'
282+
},
283+
label: {
284+
normal: {
285+
show: true,
286+
position: 'left',
287+
offset: [-5, 5],
288+
formatter: '{b}'
289+
},
290+
emphasis: {
291+
show: true
292+
}
293+
},
294+
hoverAnimation: true,
295+
symbol: 'circle',
296+
symbolSize: 1,
297+
itemStyle: {
298+
normal: {
299+
// show: false,
300+
color: '#a6c84c'
301+
}
302+
},
303+
data: [
304+
{
305+
name: '北京',
306+
value: [116.4551, 40.2539]
307+
}
308+
]
309+
}
310+
]
311+
})
312+
}
313+
}
314+
}
315+
</script>
316+
<style lang="scss" scoped>
317+
.slideCharts {
318+
height: calc(100% - 72px);
319+
}
320+
.chartBox {
321+
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
322+
background: #fff;
323+
height: 100%;
324+
.chartBox_d {
325+
height: 100%;
326+
box-sizing: border-box;
327+
// padding: 30px 20px 30px 20px;
328+
}
329+
}
330+
</style>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /