echarts地图单机下钻双击返回

我做的是吉林省下钻到市区

首先你得有这些东西，资源我得资源里有，3分还是5分下载。里边有全国的都有。

这里的jilins 是吉林省的json 因为和吉林市重名所以加了个s

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

下边是代码

首先有个div

<div class="right" id="right"></div>

<script>$(function () {//ajax，查询数据CoreUtil.sendPost("/busineAssessment/mapAnalysis", null, function (resouse) {var data = resouse.data.param;var geoCoordMap = {'长春市': [125.45, 43.98],'吉林市': [126.57, 43.87],'四平市': [124.58, 43.43],'白山市': [126.4415188999591, 42.05153200503509],'延边朝鲜族自治州': [129.12, 43.13],'松原市': [124.84354633755109, 45.18368571425691],'白城市': [122.82, 45.53],'辽源市': [125.15, 42.97],'通化市': [125.92, 41.69]};//map名称查看下载的地图js内 echarts.registerMap('吉林' ...var convertData = function (d) {var res = [];for (var i = 0; i < d.length; i++) {var geoCoord = geoCoordMap[d[i].name];if (geoCoord) {res.push({name: d[i].name,value: geoCoord.concat(d[i].value)});}}return res;};var myChart = echarts.init(document.getElementById('right'));//存储切换的每一级地图信息var mapStack = [];var timeFn = null;var curMap = {};//初始化为中国地图loadMap('jilins', '吉林', data);/**绑定用户切换地图区域事件cityMap对象存储着地图区域名称和区域的信息(name-code)当mapCode有值,说明可以切换到下级地图同时保存上级地图的编号和名称*/myChart.on('mapselectchanged', function (params) {clearTimeout(timeFn);//由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行timeFn = setTimeout(function () {var name = params.batch[0].name;var mapCode = '';if (name == '长春市') {mapCode = 'changchun';}if (name == '吉林市') {mapCode = 'jilin';}if (name == '四平市') {mapCode = 'siping';}if (name == '白城市') {mapCode = 'baicheng';}if (name == '松原市') {mapCode = 'songyuan';}if (name == '辽源市') {mapCode = 'liaoyuan';}if (name == '白山市') {mapCode = 'baishan';}if (name == '通化市') {mapCode = 'tonghua';}if (name == '延边朝鲜族自治州') {mapCode = 'yanbian';}if (mapCode == '') {return;}//单机事件这里应该查询下边的数据然后传入。CoreUtil.sendPost("/busineAssessment/mapAnalysis", null, function (resouse) {});loadMap(mapCode, name, data);//将上一级地图信息压入mapStackmapStack.push({mapCode: curMap.mapCode,mapName: curMap.mapName});}, 250);});/**绑定双击事件，并加载上一级地图*/myChart.on('dblclick', function (params) {//当双击事件发生时，清除单击事件，仅响应双击事件clearTimeout(timeFn);var map = mapStack.pop();if (!mapStack.length && !map) {layer.msg('已经到达最上一级地图了');return;}loadMap(map.mapCode, map.mapName, data);});/**加载地图：根据地图所在省市的行政编号，获取对应的json地图数据，然后向echarts注册该区域的地图最后加载地图信息@params {String} mapCode:地图行政编号,for example['中国':'100000', '湖南': '430000']@params {String} mapName: 地图名称*/function loadMap(mapCode, mapName, datas) {$.getJSON('/json/' + mapCode + '.json', function (data) {if (data) {echarts.registerMap(mapName, data);var option = {title: {text: '吉林省小区评分情况',float: 'right'},tooltip: {trigger: 'item',formatter: function (params) {   //鼠标移过某市弹出框展示内容// debugger// if (typeof (params.value)[2] == "undefined") {//     return params.name + ' : <br/>' + datas[i].par;// } else {//     return params.name + ' : <br/>' + params.value[2];// }var name = params.name;for (var i = 0; i < datas.length; i++) {if (name == datas[i].name) {return params.name + ' : <br/>' + datas[i].par;}}},data: convertData(datas)},series: [{name: '',type: 'map',mapType: mapName,selectedMode: 'multiple',label: {normal: {show: true,//字体样式textStyle: {fontSize: 15,color: '#cccccc'},formatter: function (params) {console.log(params)if(params.data){//展示内容return params.name+"\n"+ params.data.value[2];}},},emphasis: {show: true},},data: convertData(datas),itemStyle: {normal: {areaColor: '#174b9c',borderColor: '#e0854f',//板块边界色borderWidth: 2 //板块边颜色宽度},emphasis: {areaColor: '#f1c237',// 鼠标放到地图板块的颜色borderColor: '#e0854f', //鼠标放到地图板块的边界的颜色}},// 高亮区域regions: [{name: '',itemStyle: {shadowBlur: 20,areaColor: '#2379E3', //区域颜色borderColor: '#0a2dae',// 线shadowColor: '#0a2dae',// 外发光}}]},]};myChart.setOption(option);curMap = {mapCode: mapCode,mapName: mapName};} else {alert('无法加载该地图');}});}});});</script>

效果图

鼠标移到上边的弹窗显示

单击白城市，下钻到白城市的地图

echarts地图单机下钻双击返回相关推荐

echarts实现中国地图的下钻和返回上一级
首先我们需要知道echarts的地图的渲染需要依赖于json文件,例如:中国地图china.json,广东地图guangdong.json,广西地图guangxi.json:也就是每个不同的json文 ...
vue echarts地图省市区下钻
一项目做了一个省市区下钻全国放不出来图市县区二直接上代码这就是上面丑丑的省市区,代码没优化,撸出来什么样就是什么样, 看着这几个if 感觉自己好low, 但是比较直观哈哈哈 low就 ...
vue echarts地图省市区下钻详解
哈喽你们好!我是小邱,应该会有很多朋友和我都是全栈,我希望今天发表的文章对大家能够有所帮助. 今天我又要说下我不太熟练地vue技术了虽然不熟练啊但是思路清晰哈哈上码如果你觉得我文章还不错就点个关注 ...
vue+echarts地图下钻(全国-省-市)
本文中使用的数据为行政区编码json数据,大家自行下载.(本人超级菜鸟一枚,逻辑比较混乱,记录一下以免以后遇到相似功能忘记怎么写,也希望能帮到需要实现同样功能的人) 地图资源: 整体思路:1.先注册全 ...
基于Echarts插件的省市区多级地图下钻和返回功能实现
Echarts3的离线地图组件,比echart2更容易实现省市区多级离线地图的展示. 当然echart2也是可以实现,由于echarts是基于canvas,加载一个地图无非就是加载一张图.而这张图,则 ...
echarts使用省地图并下钻到市区地图并返回
echarts使用省地图并下钻到市区地图并返回 <template><div id="area"><div><el-button type ...
echarts地图下钻与回钻
最近在项目实际业务中为了更清晰的展示各省市的数据,使用echarts实现了地图的下钻和回钻.里面加了实际业务,所以代码有些冗余. import * as echarts from 'echarts' ...
echarts 中国地图的下钻
1 .最近老大让我搞个地图,要和其他的联动,,起来, 2 .首先要下载各省市的json ,现在echarts官网上不提供第三方的json地图. 3 . 先把效果图看一下,不是很好,凑合着看吧. 单击进 ...
echarts地图实现地区下钻
今天使用echarts做了一个地图的下钻,上网找了各种资料之后终于完成了!具体代码可以区我的github上观看 https://github.com/yunpengLiang/echarts 下载下来 ...

echarts地图单机下钻双击返回

echarts地图单机下钻双击返回相关推荐

最新文章

热门文章