echart地图下钻上钻 地图分级 省市区
最近研究了一下地图上钻下钻的功能，基本实现了左键下钻，右键上钻效果如下有需要的可以参考参考
实现的代码如下 还需要一个地图数据信息请访问https://download.csdn.net/download/qq_29099209/10882447下载
var data = [];
for (var name in res) {
data.push({"name": name, "value": res[name]})
}
require.config({
paths: {
echarts: 'echarts_map/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/map'
],
function (ec) {
// --- 地图 ---
var myChart = ec.init(document.getElementById('chart_map'));
var cityMap = city_data;
var level = 0;
var curIndx = 0;
var mapType = [
'china',
// 23个省
'广东', '青海', '四川', '海南', '陕西',
'甘肃', '云南', '湖南', '湖北', '黑龙江',
'贵州', '山东', '江西', '河南', '河北',
'山西', '安徽', '福建', '浙江', '江苏',
'吉林', '辽宁', '台湾',
// 5个自治区
'新疆', '广西', '宁夏', '内蒙古', '西藏',
// 4个直辖市
'北京', '天津', '上海', '重庆',
// 2个特别行政区
'香港', '澳门'
];
var mapGeoData = require('echarts/util/mapData/params');
for (var city in cityMap) {
mapType.push(city);
// 自定义扩展图表类型
mapGeoData.params[city] = {
getGeoJson: (function (c) {
var geoJsonName = cityMap[c];
return function (callback) {
$.getJSON('geoJson/china-main-city/' + geoJsonName + '.json', callback);
}
})(city)
}
}
var ecConfig = require('echarts/config');
ecConfig.color = "#000000";
var zrEvent = require('zrender/tool/event');
var current_level = 0;
var select = 'china';
var params;
myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param) {
params = param;
//curIndx++;
// var mt = mapType[curIndx % mapType.length];
// option.series[0].mapType = mt;
// option.title.subtext = mt + ' （滚轮或点击切换）';
// myChart.setOption(option, true);
var len = mapType.length;
var mt = mapType[curIndx % len];
var dl;
current_level = level;
if (level !== 2) {
if (mt == 'china') {
// 全国选择时指定到选中的省份
var selected = param.selected;
select = selected;
for (var i in selected) {
if (selected[i]) {
mt = i;
while (len--) {
if (mapType[len] == mt) {
curIndx = len;
}
}
break;
}
}
level = 1;
//option.tooltip.formatter = '{b}';
}
else {
if (level == 1) {
var selected = param.selected;
//console.log(selected);
for (var i in selected) {
if (selected[i]) {
mt = i;
}
}
level = 2;
}
curIndx = 0;
//mt = 'china';
//option.tooltip.formatter = '滚轮切换或点击进入该省
{b}';
}
option.series[0].mapType = mt;
//option.tooltip.formatter = '{b}
'+option.series[0].data[0];
option.title.subtext = mt;
}
else {
level = 2;
}
myChart.setOption(option, true);
});
/**
* 禁用右键菜单
*/
document.oncontextmenu = function () {
event.returnValue = false;
};
/**
绑定右键事件，并加载上一级地图
*/
$('#chart_map').mousedown(function (e) {
if (e.which == 3) {
//curIndx++;
// var mt = mapType[curIndx % mapType.length];
// option.series[0].mapType = mt;
// option.title.subtext = mt + ' （滚轮或点击切换）';
// myChart.setOption(option, true);
console.log(current_level)
if (current_level = 1) {
mt = select;
level = 1;
} else {
mt = 'china';
level = 0;
}
var len = mapType.length;
var mt = mapType[curIndx % len];
var dl;
option.series[0].mapType = mt;
myChart.setOption(option, true);
}
return false;//阻止链接跳转
})
option = {
title: {
text: '',
subtext: '',
color: "white"
},
tooltip: {
trigger: 'item',
formatter: function (param) {
//console.log(param)
//return param[1];
var selected = param.selected;
//console.log(selected);
var is_repeat = 0;
var ls = 0;
for (var j in option.series[0].data) {
if (option.series[0].data[j].name == param[1]) {
ls = j;
is_repeat = 1;
//console.log(option.tooltip.formatter);
}
}
//console.log(is_repeat);
if (is_repeat == 0) {
return param[1];
} else {
return param[1] + '
' + option.series[0].data[ls].value;
}
}
}, dataRange: {
min: 0,
max: 20,
splitNumber: 0,
text: ['数量', ''],
calculable: false,
selectedMode: false,
realtime: false,
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: '#fff' // 值域文字颜色
},
color: ['orangered', 'yellow', 'blue']
},
series: [
{
name: '全国344个主要城市（县）地图',
type: 'map',
mapType: 'china',//此处设置初始地图
selectedMode: 'single',
itemStyle: {
normal: {label: {show: true}},
emphasis: {label: {show: true}}
},
data: data
}
]
};
console.log(option);
myChart.setOption(option, true);
}
);