echarts地图分布-实例

一.效果图

二.部分代码

js代码：


var opt= {provincePYName:'sichuan',provinceData:[{name: '成都市',value: 1,type:1}],cityData:[{name: '绵阳市',value: 1,type:2}],countyData:[{name: '绵阳市',value: 1,type:3}]
};
//地图渲染,$content表示一个div容器
function mapInit(opt,$content){$.getJSON(publicObj.rootPath+'/json/mapjson/'+opt.provincePYName+'.json', function (data) {var isMouseOut = true,mapChart = document.createElement("div"),chart,prevMapAreaName=null;mapChart.style.height = "500px";mapChart.style.width  = $content.width()+"px";chart = echarts.init(mapChart);echarts.registerMap(opt.provincePYName, data);chart.setOption({tooltip: {trigger: 'item'},legend: {show:false,orient: 'vertical',left: 'left',data:['省级','市级','区县级']},series: [{name:'省级',type: 'map',map: opt.provincePYName,roam:true,selectedMode:'single',itemStyle:{normal:{areaColor: '#FFFEE9',color:'#EA1E63'}},label: {normal: {show:true},emphasis: {show: true}},data:opt.provinceData},{name:'市级',type: 'map',map: opt.provincePYName,roam:true,itemStyle:{normal:{areaColor: '#FFFEE9',color:'#93C62D'}},label: {normal: {show:true},emphasis: {show: true}},data:opt.cityData},{name:'区县级',type: 'map',map: opt.provincePYName,roam:true,itemStyle:{normal:{areaColor: '#FFFEE9',color:'#BA9FE9'}},label: {normal: {show:true},emphasis: {show: true}},data:opt.countyData}]});$content.append(mapChart);chart.on('click', function (params) {if(prevMapAreaName!=null&&prevMapAreaName!=params.name){subMapInit(params,$content);prevMapAreaName = params.name;isMouseOut = false;}else{prevMapAreaName = params.name;isMouseOut = !isMouseOut;}});chart.on('mouseout', function (params) {if(isMouseOut){$(".cityLevelMap").hide();$(".cityLevelMap").css({left:0,top:0});}});chart.on('mouseover', function (params) {if(!isMouseOut){return;}subMapInit(params,$content);});});}//子地图渲染function subMapInit(params,$content){// JSON$.getJSON(publicObj.rootPath+'/json/mapjson/'+placemap[params.name]+'.json', function (data) {echarts.registerMap(params.name, data);var cityMapCon,cityMap,chart,businessData=[],markPointData=[],diyitemStyle;$.ajax({type: "POST",url: publicObj.rootPath+'/json/mapjson/'+placemap[params.name]+'-b.json',data: {cityName:params.name},dataType: "json",error:function(){console.log("没有数据");},success: function(data){if($(".cityLevelMap").length==0){cityMapCon = document.createElement("div");cityMapCon.setAttribute("class","cityLevelMap");cityMapCon.style.width  = '400px';cityMapCon.style.height = '400px';cityMapCon.style.display= 'none';cityMapCon.style.position= 'absolute';cityMapCon.style.zIndex= 1000;cityMap = document.createElement("div");cityMap.style.width  = '400px';cityMap.style.height = '400px';cityMapCon.appendChild(cityMap);$content.append(cityMapCon);}for(var i=0;i<data.length;i++){if(i%2==0){diyitemStyle = {normal:{color: '#56B4FE'}};}else{diyitemStyle = {normal:{color: '#2196F3'}};}data[i].itemStyle=diyitemStyle;businessData.push(data[i]);if(data[i].jwd.length>0){markPointData.push({name:data[i].name,value:data[i].value,symbolSize:25,symbol:(function(){var imgURL = 'image://'+publicObj.rootPath+'/images/';switch(data[i].type){case "1":imgURL = imgURL+'map-province-icon.png';break;case "2":imgURL = imgURL+'map-city-icon.png';break; case "3":imgURL = imgURL+'map-county-icon.png';break;default:imgURL = imgURL+'map-county-icon.png';}return imgURL;})(),coord:data[i].jwd});}}chart = echarts.init($(".cityLevelMap").find("div").get(0));chart.setOption({backgroundColor:'#404A59',title:{text:params.name+'数据分布',textStyle:{color:'#fff',fontWeight:'normal',fontSize:16},left:20,top:20},tooltip: {trigger: 'item'},series: [{type: 'map',map: params.name,roam:true,label: {normal: {show:false},emphasis: {show: true}},itemStyle:{normal:{borderColor: '#fff',borderWidth:2}},markPoint:{silent:true,label:{normal:{show:false}},data:markPointData},tooltip:{formatter:function(param){var str = '';if(param.data.value.length>0){str="<div class='show-tip'></div>"+'<div class="tpchart-tip-content">'+'<div class="title">'+param.data.cloudName+'</div><ul>';for(var i=0;i<param.data.value.length;i++){str += '<li><span class="circle-icon">'+'</span><span>'+param.data.value[i]+'</span></li>';}str += '</ul></div>';}else{str = param.name;}return str;}},data:businessData}]});$(".cityLevelMap").css({left:params.event.offsetX-450+"px",top:(params.event.offsetY-200)<0?0:(params.event.offsetY-200+"px")}).show();}});});

这部分与业务联系比较紧密，目前没单独抽出来，关于echarts的部分都在代码中体现了，在此记录一下，顺便希望会对其他人有帮助。

可以参考下这篇博文：http://blog.csdn.net/zdx1515888659/article/details/50264009

echarts地图分布-实例相关推荐

微信小说分销系统设计之使用百度Echarts地图统计功能统计微信粉丝地域分布情况...
/** 转载请保留博客园原地址以及版权声明,请勿恶意修改,本博客中的内容均属于技术交流,请勿用于商业用途,谢谢配合 * 作者:杨浩瑞 QQ:1420213383 独立博客:http://www. ...
mysql+地图网格数据下载_echarts 中国各省市 echarts地图数据，含世界地图
[实例简介] echarts 中国各省市 echarts地图数据,含世界地图,含各省地市数据 [实例截图] [核心代码] echarts_map_data ├── anhui │ ├── anhu ...
echarts asp mysql 源码_如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)...
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 本文将结合实例 ...
html地图动画效果图,【html】绚丽的HTML5地图分布动画DEMO演示
超绚丽的HTML5地图分布动画DEMO演示 $('#document').ready(function(){ getEcharts(); }); function getEcharts(){ // S ...
Vue+Echarts地图消失（高度变成0）的完美解决方案
地图消失了! 最近项目突然发现了一个奇怪的问题,当且到别的页面之后停留一会(20min+),首页的Echarts地图就会消失掉,而且还不一定复现,好不容易复现了一次,查看元素发现地图的容器.svg元素 ...
Echarts地图自定义图标Symbol同时动态更改图标进行切换显示
Echarts地图自定义图标Symbol同时动态更改图标进行切换显示文章目录 0.前言 1.引用模块 2.界面设计 3.数据准备 4.实例地图 5.动态修改气泡图标 6.结束语 0.前言实现的效果 ...
ECharts 地图绘制
地图模拟实例(数据不具真实性仅供学习) 在绘制之前我们要了解一些Echarts的一些基本的组件: 1.geo geo 是 ECharts 图表的地理坐标系组件. ECharts 中地理坐标系组件可以用 ...
实时最新中国省市区县geoJSON格式地图行政边界数据Echarts地图数据（可精确到街道级）
geojson 数据下载地址:https://hxkj.vip/demo/echartsMap/ 可下载的数据包含省级geojson行政边界数据.市级geojson行政边界数据.区/县级geojson ...
Echarts 地图使用，以及tooltip轮播使用
一,首先下载Echarts npm install echarts --save 二,引入Echarts 全局引入main.js中 // echarts-4.0 import echarts from ...

echarts地图分布-实例

echarts地图分布-实例相关推荐

最新文章

热门文章