1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
| <template>
<div class='h-full flex justify-center items-center'>
<div id='mapDom' class='h-full w-full'>
</div>
</div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'
import '../assets/china'
import { getCityPositionByName } from '@/assets/cityPostion'
// 模拟10条数据
let mockData = [
{ name: '北京', value: 500 },
{ name: '天津', value: 200 },
{ name: '河南', value: 300 },
{ name: '广西', value: 300 },
{ name: '广东', value: 300 },
{ name: '河北', value: 300 },
]
onMounted(() => {
let data = mockData.map(i => {
let cityPosition = getCityPositionByName(i.name).value
return {
name: i.name,
value: cityPosition.concat(i.value),
}
})
let initMap = echarts.init(document.querySelector('#mapDom'))
initMap.setOption({
backgroundColor: 'transparent', // 设置背景色透明
// 必须设置
tooltip: {
show: false,
},
// 地图阴影配置
geo: {
map: 'china',
// 这里必须定义，不然后面series里面不生效
tooltip: {
show: false,
},
label: {
show: false,
},
zoom: 1.03,
silent: true, // 不响应鼠标时间
show: true,
roam: false, // 地图缩放和平移
aspectScale: 0.75, // scale 地图的长宽比
itemStyle: {
borderColor: '#0FA3F0',
borderWidth: 1,
areaColor: '#070f71',
shadowColor: 'rgba(1,34,73,0.48)',
shadowBlur: 10,
shadowOffsetX: -10,
shadowOffsetY: 10,
},
select: {
disabled: true,
},
emphasis: {
disabled: true,
areaColor: '#00F1FF',
},
// 地图区域的多边形 图形样式 阴影效果
// z值小的图形会被z值大的图形覆盖
top: '10%',
left: 'center',
// 去除南海诸岛阴影 series map里面没有此属性
regions: [{
name: '南海诸岛',
selected: false,
emphasis: {
disabled: true,
},
itemStyle: {
areaColor: '#00000000',
borderColor: '#00000000',
},
}],
z: 1,
},
series: [
// 地图配置
{
type: 'map',
map: 'china',
zoom: 1,
tooltip: {
show: false,
},
label: {
show: true, // 显示省份名称
color: '#ffffff',
align: 'center',
},
top: '10%',
left: 'center',
aspectScale: 0.75,
roam: false, // 地图缩放和平移
itemStyle: {
borderColor: '#3ad6ff', // 省分界线颜色 阴影效果的
borderWidth: 1,
areaColor: '#17348b',
opacity: 1,
},
// 去除选中状态
select: {
disabled: true,
},
// 控制鼠标悬浮上去的效果
emphasis: { // 聚焦后颜色
disabled: false, // 开启高亮
label: {
align: 'center',
color: '#ffffff',
},
itemStyle: {
color: '#ffffff',
areaColor: '#0075f4',// 阴影效果 鼠标移动上去的颜色
},
},
z: 2,
data: data,
},
{
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: [50, 50],
label: {
show: true,
color: '#fff',
formatter(value) {
return value.data.value[2]
},
},
itemStyle: {
color: '#e30707', //标志颜色
},
z: 2,
data: data,
},
],
})
})
</script>
|
