背景需求
①通過中國地圖一覽所有省份、直轄市、特別行政區的概況
②同時需要在地圖上標註省份中城市概況
解決：在chars中設置geo座標和引入一個map的seris。因此會出現重合，當用戶滾動的時候，會出現圖層分離。
效果圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中國地圖-城市</title>
<!-- 引入 ECharts 文件 -->
<script type="text/javascript" src="/static/common/jquery.min.js"></script>
<script src="/static/echars/echarts.min.js"></script>
<script src="/static/echars/map/js/china.js"></script>
<script>
$(function () {
var chart = echarts.init($('#citymap')[0]);
var option = {
background:'#fff', //背景色
title: { //設置標題
text: '全國人口分佈',
subtext: '研究人員：jiangzz',
left: 'center'
},
toolbox: {
show: true,
feature: {
dataZoom: {},
restore: {},
saveAsImage: {}
}
},
tooltip: { //提示設置
enterable:true,
triggerOn:'mousemove', //可選值 click、mousemove
position: (point)=> point //設置提示位置
},
visualMap: { //設置視覺映射
pieces: [
{gt: 2000,label:'...'},
{gt: 1000,lte:2000},
{gt: 500, lte: 1000},
{gt: 200, lte: 500},
{gt: 50, lte: 200},
{lt: 50}
],
color: ['darkred','red','#E4E4F8'] //設置顏色範圍
},
geo:{ //設置地理座標系
map: 'china',
roam:true,
zoom:1.0,
label:{
show:false,
emphasis:{
show:false
}
}
},
series: [{ //添加省份、直轄市分佈
name:'區域統計',
type:'map',
roam:true,
zoom:1.0,
mapType: 'china',
label:{
show:true,
emphasis:{
show:true
}
},
itemStyle:{
emphasis:{
areaColor:'orange',
}
},
tooltip: {
show:true,
formatter:function (params) {
if(params['data']){
return params['seriesName']+"<br/>地區："+params['name']+"<br/>人數:"+params['data'].value+" <a style='color: #fff' href='#'>詳細</a>"
}else{
return params['seriesName']+"<br/>地區："+params['name']+"<br/>人數:未知"
}
}
},
data: [
{name:"北京",value:1000},
{name:"四川",value:100},
{name:"山西",value:50},
{name:"西藏",value:0},
{name:"湖北",value:0}
]
},{
name: '城市分佈',
type: 'scatter',
coordinateSystem: 'geo',
symbol:'circle',
data: [
[113.65,34.76,'鄭州',270],
[115.21,32.35,'固始',100],
[114.07,32.14,'信陽市',200],
],
symbolSize:function (value) {
return value[3]/10;
},
tooltip: { //格式化數據顯示
formatter:function (params) {
return params['seriesName']+"<br/>地區："+params['data'][2]+"<br/>人數:"+params['data'][3]
}
},
label: {
show:true,
formatter:'{a|{@[2]}}',//取數組的第三個元素
position: [10, 5],
rich: {
a: {
color: 'black',
lineHeight: 10
}
}
}
}]
}
chart.setOption(option);
//設置兩個圖層同步
chart.on('georoam',function(params){
var o = chart.getOption();//獲得option對象
o.geo[0].zoom = o.series[0].zoom
o.geo[0].center = o.series[0].center;//下層的geo的中心位置隨着上層geo一起改變
chart.setOption(o)
});
})
</script>
</head>
<body style="height: 850px;width: 100%;">
<!-- 爲 ECharts 準備一個具備大小（寬高）的 DOM -->
<div id="citymap" style="width: 80%;height:80%;float: left;"></div>
</body>
</html>