echarts实现全国省市级联以及数据热力图
网页嘛首先得有个html页面，有地图显示的区域，并且设置好大小。
地图显示区域map，下面包含全国地图和具体某个省的市级地图；
点击某个省切换到市可以理解成省市的影藏与显示。
<body>
<div class="map">
<div id="china_map"></div>
<div id="city_map"></div>
</div>
</body>
依赖echarts实现的肯定要引入相关js。也试过高德地图来实现，奈何才疏学浅，加载的东西太多，地图加载太慢，就这点数据体验有点差。
<!--echarts依赖js-->
<script type="text/javascript" src="js/echarts.min.js"></script>
<!--地图显示依赖js-->
<script type="text/javascript" src="js/china.js"></script>
<!--jquery-->
<script type="text/javascript" src="js/jquery.min.js"></script>
准备测试数据
var dataList = [{"id": "320000","name": "江苏","value": "95"},
{"id": "340000","name": "安徽","value": "60"},
{"id": "330000","name": "浙江","value": "105"},
{"id": "310000","name": "上海","value": "75"},
{"id": "370000","name": "山东","value": "50"},
{"id": "320100","name": "南京市","value": "21"},
{"id": "320200","name": "无锡市","value": "23"},
{"id": "320300","name": "徐州市","value": "15"},
{"id": "320400","name": "常州市","value": "20"},
{"id": "320500","name": "苏州市","value": "25"},
{"id": "321000","name": "扬州市","value": "15"},
{"id": "321100","name": "镇江市","value": "11"},
{"id": "321200","name": "泰州市","value": "12"},
{"id": "320800","name": "淮安市","value": "6"},
{"id": "320600","name": "南通市","value": "5"},
{"id": "320900","name": "盐城市","value": "4"},
{"id": "320700","name": "连云港市","value": "8"},
{"id": "321300","name": "宿迁市","value": "11"}];
基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('china_map'));
指定图表的配置项和数据，具体配置去查官网，比我写的详细
option = {
tooltip: {
formatter: function (params) {
var nameArr = params.seriesName.split(",");
var num1=0;
if(!isNaN(params.value)){
num1=params.value;
}
return params.name + '<br />' + nameArr[0] + '：' + num1;
}//数据格式化
},
visualMap: {
min: 0,
max: 100,
left: 'left',
top: 'bottom',
text: ['高', '低'],//取值范围的文字
inRange: {
color: ['#e0ffff', '#006edd']//取值范围的颜色
},
show: true//图注
},
geo: {
map: 'china',
roam: false,//不开启缩放和平移
zoom: 1.23,//视角缩放比例
label: {
normal: {
show: true,
fontSize: '10',
color: 'rgba(0,0,0,0.7)'
}
},
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis: {
areaColor: '#F3B329',//鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series: [
{
name: '数量',
type: 'map',
geoIndex: 0,
data: dataList
}
]
};
点击省显示市级地图数据
myChart.on('click', function (params) {
/*隐藏全国地图，显示省地图*/
$('#china_map').css('display', 'none');
$('#city_map').css('display', 'block');
// 调取后台数据
var selectProe = params.data.id;
$.get('json/'+selectProe+'.json', function (Citymap) {
echarts.registerMap(selectProe, Citymap);
var myChartProe = echarts.init(document.getElementById('city_map'));
myChartProe.setOption({
tooltip: {
formatter: function (params) {
var nameArr = params.seriesName.split(",");
if(null!=params.data&&"undefined"!=params.data){
if(isNaN(params.value) || ""==params.value || null ==params.value){
params.value=0;
}
return params.name + '<br />' + nameArr[0] + '：' + params.value ;
}else{
if(isNaN(params.value) || ""==params.value || null ==params.value){
params.value=0;
}
return params.name + '<br />' + nameArr[0] + '：' + params.value;
}
}//数据格式化
},
visualMap: {
min: 0,
max: 100,
left: 'left',
top: 'bottom',
text: ['高', '低'],//取值范围的文字
inRange: {
color: ['#e0ffff', '#006edd']//取值范围的颜色
},
show: true//图注
},
geo: {
map: selectProe,
roam: false,//不开启缩放和平移
zoom: 1.23,//视角缩放比例
label: {
normal: {
show: true,
fontSize: '10',
color: 'rgba(0,0,0,0.7)'
}
},
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis: {
areaColor: '#F3B329',//鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series: [
{
name: '数量',
type: 'map',
geoIndex: 0,
data: dataList
}
]
})
});
});
基本完成，下面初始化时加载地图，添加右击事件
function goBackChinaMap() {
$('#china_map').css('display', 'block');
$('#city_map').css('display', 'none');
}
$(function () {
document.oncontextmenu = function (e) {
e.preventDefault();
}
document.getElementById("city_map").onmousedown = function (e) {
if (e.button == 2) {//右键
goBackChinaMap();
} else if (e.button == 0) {
return;
} else if (e.button == 1) {
return;
}
}
myChart.setOption(option);
})
最终效果
不给源码的教程就是耍流氓上源码，小白不会添加附件是真的难受
map.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据热力图</title>
<!--echarts依赖js-->
<script type="text/javascript" src="js/echarts.min.js"></script>
<!--地图显示依赖js-->
<script type="text/javascript" src="js/china.js"></script>
<!--jquery-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
body, html {
width: 100%;
height: 100%;
}
.map {
width: 100%;
height: 100%;
margin-top: -8%;
}
#china_map {
width: 70%;
height: 90%;
margin-top: 150px;
margin-left: 10px;
border: 1px solid #ddd;
}
#city_map {
width: 70%;
height: 90%;
margin-top: 150px;
margin-left: 10px;
border: 1px solid #ddd;
display: none;
}
</style>
</head>
<body>
<div class="map">
<div id="china_map"></div>
<div id="city_map"></div>
</div>
</body>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript">
function goBackChinaMap() {
$('#china_map').css('display', 'block');
$('#city_map').css('display', 'none');
}
$(function () {
document.oncontextmenu = function (e) {
e.preventDefault();
}
document.getElementById("city_map").onmousedown = function (e) {
if (e.button == 2) {//右键
goBackChinaMap();
} else if (e.button == 0) {
return;
} else if (e.button == 1) {
return;
}
}
myChart.setOption(option);
})
</script>
</html>
map.js
var dataList = [{"id": "320000","name": "江苏","value": "95"},
{"id": "340000","name": "安徽","value": "60"},
{"id": "330000","name": "浙江","value": "105"},
{"id": "310000","name": "上海","value": "75"},
{"id": "370000","name": "山东","value": "50"},
{"id": "320100","name": "南京市","value": "21"},
{"id": "320200","name": "无锡市","value": "23"},
{"id": "320300","name": "徐州市","value": "15"},
{"id": "320400","name": "常州市","value": "20"},
{"id": "320500","name": "苏州市","value": "25"},
{"id": "321000","name": "扬州市","value": "15"},
{"id": "321100","name": "镇江市","value": "11"},
{"id": "321200","name": "泰州市","value": "12"},
{"id": "320800","name": "淮安市","value": "6"},
{"id": "320600","name": "南通市","value": "5"},
{"id": "320900","name": "盐城市","value": "4"},
{"id": "320700","name": "连云港市","value": "8"},
{"id": "321300","name": "宿迁市","value": "11"}];
var myChart = echarts.init(document.getElementById('china_map'));
option = {
tooltip: {
formatter: function (params) {
var nameArr = params.seriesName.split(",");
var num1=0;
if(!isNaN(params.value)){
num1=params.value;
}
return params.name + '<br />' + nameArr[0] + '：' + num1;
}//数据格式化
},
visualMap: {
min: 0,
max: 100,
left: 'left',
top: 'bottom',
text: ['高', '低'],//取值范围的文字
inRange: {
color: ['#e0ffff', '#006edd']//取值范围的颜色
},
show: true//图注
},
geo: {
map: 'china',
roam: false,//不开启缩放和平移
zoom: 1.23,//视角缩放比例
label: {
normal: {
show: true,
fontSize: '10',
color: 'rgba(0,0,0,0.7)'
}
},
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis: {
areaColor: '#F3B329',//鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series: [
{
name: '数量',
type: 'map',
geoIndex: 0,
data: dataList
}
]
};
myChart.on('click', function (params) {
/*隐藏全国地图，显示省地图*/
$('#china_map').css('display', 'none');
$('#city_map').css('display', 'block');
// 调取后台数据
var selectProe = params.data.id;
$.get('json/'+selectProe+'.json', function (Citymap) {
echarts.registerMap(selectProe, Citymap);
var myChartProe = echarts.init(document.getElementById('city_map'));
myChartProe.setOption({
tooltip: {
formatter: function (params) {
var nameArr = params.seriesName.split(",");
if(null!=params.data&&"undefined"!=params.data){
if(isNaN(params.value) || ""==params.value || null ==params.value){
params.value=0;
}
return params.name + '<br />' + nameArr[0] + '：' + params.value ;
}else{
if(isNaN(params.value) || ""==params.value || null ==params.value){
params.value=0;
}
return params.name + '<br />' + nameArr[0] + '：' + params.value;
}
}//数据格式化
},
visualMap: {
min: 0,
max: 100,
left: 'left',
top: 'bottom',
text: ['高', '低'],//取值范围的文字
inRange: {
color: ['#e0ffff', '#006edd']//取值范围的颜色
},
show: true//图注
},
geo: {
map: selectProe,
roam: false,//不开启缩放和平移
zoom: 1.23,//视角缩放比例
label: {
normal: {
show: true,
fontSize: '10',
color: 'rgba(0,0,0,0.7)'
}
},
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis: {
areaColor: '#F3B329',//鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series: [
{
name: '数量',
type: 'map',
geoIndex: 0,
data: dataList
}
]
})
});
});
剩下的自己网上找吧，我记得当时也是网上找的
。给个目录结构吧…
再分享个国标码查询的网站吧
http://datav.aliyun.com/tools/atlas/#&lat=31.769817845138945&lng=104.29901249999999&zoom=4
2582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
