echarts实现全国省市级联以及数据热力图
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 + '
' + 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 + '
' + nameArr[0] + '：' + params.value ;}else{if(isNaN(params.value) || ""==params.value || null ==params.value){params.value=0;}return params.name + '
' + 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 + '
' + 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 + '
' + nameArr[0] + '：' + params.value ;}else{if(isNaN(params.value) || ""==params.value || null ==params.value){params.value=0;}return params.name + '
' + 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
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！