先看效果图，第二张是因为数据差距太大。 
再看代码
import * as echarts from 'echarts'; import mapJson from '../utils/福州市.json'; import mapJson1 from '../utils/三明市.json'; import mapJson2 from '../utils/福建省.json'; let selected='福建省' export default {
init (id, res, city=selected) {
// var chartDom = document.getElementById(id); let myChart = echarts.init(document.getElementById(id)); let f = (id, res, selected) => {
var data; var geoJson; if (selected === '三明市') {
geoJson = mapJson1; data = [ {
name: '梅列区', value: 0 }, {
name: '三元区', value: 0 }, {
name: '明溪县', value: 0
}
,
{
name
:
'清流县'
,
value
:
0
}
,
{
name
:
'宁化县'
,
value
:
0
}
,
{
name
:
'大田县'
,
value
:
0
}
,
{
name
:
'尤溪县'
,
value
:
0
}
,
{
name
:
'沙县'
,
value
:
0
}
,
{
name
:
'将乐县'
,
value
:
0
}
,
{
name
:
'泰宁县'
,
value
:
0
}
,
{
name
:
'建宁县'
,
value
:
0
}
,
{
name
:
'永安市'
,
value
:
0
}
]
;
}
else
if
(selected
===
'福州市'
)
{
geoJson
= mapJson
; data
=
[
{
name
:
'鼓楼区'
,
value
:
0
}
,
{
name
:
'台江区'
,
value
:
0
}
,
{
name
:
'仓山区'
,
value
:
0
}
,
{
name
:
'马尾区'
,
value
:
0
}
,
{
name
:
'晋安区'
,
value
:
0
}
,
{
name
:
'长乐区'
,
value
:
0
}
,
{
name
:
'闽侯县'
,
value
:
0
}
,
{
name
:
'连江县'
,
value
:
0
}
,
{
name
:
'罗源县'
,
value
:
0
}
,
{
name
:
'闽清县'
,
value
:
0
}
,
{
name
:
'永泰县'
,
value
:
0
}
,
{
name
:
'平潭县'
,
value
:
0
}
,
{
name
:
'福清市'
,
value
:
0
}
,
]
;
}
else
if
(selected
===
'福建省'
)
{
geoJson
= mapJson2
; data
=
[
{
name
:
'福州市'
,
value
:
1550
}
,
{
name
:
'三明市'
,
value
:
650
}
,
{
name
:
'莆田市'
,
value
:
0
}
,
{
name
:
'南平市'
,
value
:
0
}
,
{
name
:
'宁德市'
,
value
:
0
}
,
{
name
:
'龙岩市'
,
value
:
0
}
,
{
name
:
'泉州市'
,
value
:
0
}
,
{
name
:
'漳州市'
,
value
:
0
}
,
{
name
:
'厦门市'
,
value
:
0
}
]
;
}
//获取当前显示地图下方地市的坐标点数据； 用于气泡显示
var geoCoordMap
=
{
}
;
var mapFeatures
= geoJson
.features
; mapFeatures
.
forEach
(
function
(
v, i
)
{
var name
= v
.properties
.name
; geoCoordMap
[name
]
= v
.properties
.centroid
;
}
)
;
//将data数据进入方法，取需要的参数； 用于气泡显示
var
convertData
=
function
(
data
)
{
let val
=
[
]
;
for
(
var i
=
0
; i
< data
.length
; i
++
)
{
var geoCoord
= geoCoordMap
[data
[i
]
.name
]
;
//这个是坐标
if
(geoCoord
)
{
val
.
push
(
{
name
: data
[i
]
.name
,
value
: geoCoord
.
concat
(data
[i
]
.value
)
,
//value是要显示的数值
}
)
;
}
//name和value/cityCode参数根据实际项目中后台返回的参数名走；
}
return val
;
}
;
// echarts.dispose(document.getElementById(id)); //先去掉原来的地图
// myChart = echarts.init(document.getElementById(id)); console
.
log
(res
)
var option
; myChart
.
showLoading
(
)
; myChart
.
hideLoading
(
)
; echarts
.
registerMap
(
'SM'
, geoJson
)
;
for
(
let index
=
0
; index
< res
.length
; index
++
)
{
const element
= res
[index
]
; data
.
push
(
{
"name"
: element
.name
,
"value"
: element
.value
}
)
;
} myChart
.
setOption
(option
=
{
title
:
{
// text: '泊位分布情况',
}
,
tooltip
:
{
trigger
:
'item'
,
formatter
:
function
(
params
)
{
if
(
typeof
(params
.value
)
[
2
]
==
"undefined"
)
{
if
(
isNaN
(
parseInt
(params
.value
)
)
)
{
return params
.name
+
' : '
+
'-'
;
}
else
{
return params
.name
+
' : '
+ params
.value
;
}
}
else
{
return params
.name
+
' : '
+ params
.value
[
2
]
;
}
}
}
,
geo
:
{
show
:
true
,
map
:
'SM'
,
label
:
{
normal
:
{
show
:
false
}
,
emphasis
:
{
show
:
false
,
}
}
,
// left:'45%', //调整地图初始化位置
roam
:
true
,
itemStyle
:
{
normal
:
{
areaColor
:
'transparent'
,
borderColor
:
'#3fdaff'
,
borderWidth
:
2
,
shadowColor
:
'rgba(63, 218, 255, 0.5)'
,
shadowBlur
:
30
}
,
emphasis
:
{
areaColor
:
'#2B91B7'
,
}
}
}
,
toolbox
:
{
show
:
true
,
orient
:
'vertical'
,
left
:
'right'
,
top
:
'center'
,
}
,
visualMap
:
{
min
:
0
,
max
:
100
,
text
:
[
'拥挤'
,
'空闲'
]
,
realtime
:
true
,
calculable
:
false
,
inRange
:
{
// color: ['#7ea4e0', '#6597e3', '#4a88e7', '#377de9', '#2472e8', '#1267ea']
}
,
//图列字体颜色
textStyle
:
{
color
:
'#fff'
,
fontSize
:
14
}
}
,
series
:
[
{
name
:
'散点'
,
type
:
'scatter'
,
coordinateSystem
:
'geo'
,
data
:
convertData
(data
)
,
symbolSize
:
10
,
label
:
{
normal
:
{
formatter
:
'{b}'
,
position
:
'right'
,
show
:
true
,
color
:
'#fff'
}
,
emphasis
:
{
show
:
true
}
}
,
itemStyle
:
{
normal
:
{
color
:
'#fff'
}
}
}
,
{
type
:
'map'
,
map
:
'SM'
,
zoom
:
12
,
geoIndex
:
0
,
aspectScale
:
0.75
,
//长宽比
showLegendSymbol
:
false
,
// 存在legend时显示
label
:
{
normal
:
{
show
:
false
}
,
emphasis
:
{
show
:
false
,
textStyle
:
{
color
:
'#fff'
}
}
}
,
roam
:
true
,
itemStyle
:
{
normal
:
{
areaColor
:
'#031525'
,
borderColor
:
'#FFFFFF'
,
}
,
emphasis
:
{
areaColor
:
'#2B91B7'
}
}
,
animation
:
false
,
data
: data
}
,
{
name
:
'点'
,
type
:
'scatter'
,
coordinateSystem
:
'geo'
,
symbol
:
'pin'
,
symbolSize
:
function
(
val
)
{
// var a = (maxSize4Pin - minSize4Pin) / (max - min);
// var b = minSize4Pin - a*min;
// b = maxSize4Pin - a*max;
// return a*val[2]+b;
return val
[
2
]
/
30
}
,
label
:
{
normal
:
{
position
:
'top'
,
formatter
:
function
(
res
)
{
return res
.value
[
2
]
}
,
show
:
true
,
textStyle
:
{
color
:
'#fff'
,
fontSize
:
11
,
}
}
}
,
itemStyle
:
{
normal
:
{
color
:
'#F62157'
,
//标志颜色
}
}
,
zlevel
:
6
,
data
:
convertData
(data
)
}
,
{
name
:
'Top 5'
,
type
:
'effectScatter'
,
coordinateSystem
:
'geo'
,
data
:
convertData
(data
.
sort
(
function
(
a, b
)
{
return b
.value
- a
.value
;
}
)
)
,
symbolSize
:
function
(
val
)
{
return
10
;
}
,
showEffectOn
:
'render'
,
rippleEffect
:
{
brushType
:
'stroke'
}
,
hoverAnimation
:
true
,
label
:
{
normal
:
{
formatter
:
'{b}'
,
position
:
'right'
,
show
:
true
}
}
,
itemStyle
:
{
normal
:
{
color
:
'#F4E925'
,
shadowBlur
:
10
,
shadowColor
:
'#05C3F9'
}
}
,
zlevel
:
1
}
,
]
}
)
; option
&& myChart
.
setOption
(option
)
;
}
//定义福建省的数组
// let cities = ['福州市', '三明市', '莆田市', '南平市', '宁德市', '龙岩市', '洛阳市', '泉州市', '漳州市', '厦门市'];
let citiesText
=
[
'福州市'
,
'三明市'
]
;
// // 定义初始加载的地图区域,福建省地图 selected
= city
;
f
(id
, res
, selected
)
// 判断当前要加载的地图是不是范围内的市
let
isCity
=
(
name
)
=>
{
return citiesText
.
some
(
(
city
)
=>
{
return city
=== name
;
}
)
}
// 监听地图点击事件 myChart
.
on
(
'click'
,
(
ev
)
=>
{
// 如果点击的是一个市,那就切换到这个市的地图
if
(
isCity
(ev
.name
)
)
{
selected
= ev
.name
;
// 从外部加载这个市的地图文件
f
(id
, res
, selected
)
return
}
else
{
// 否则切换福建省的地图 selected
=
'福建省'
;
f
(id
, res
, selected
)
return
}
}
) window
.
addEventListener
(
"resize"
,
function
(
)
{
//浏览器大小调整echarts随之改变 myChart
.
resize
(
)
;
}
)
;
}
}