市县区地图下钻（乡镇）echarts group配置项内容和展示
太原市地图下钻
配置项如下
var gujiaoshi = '/asset/get/s/data-1625208670498-SKRJclMQB.json';
var jiancaopingqu = '/asset/get/s/data-1625208708262-boKm1A6PD.json';
var jinyuanqu = '/asset/get/s/data-1625208718941-PoBtZhqxM.json';
var loufanxian = '/asset/get/s/data-1625208727346-JTXJHhHQz.json';
var qingxuxian = '/asset/get/s/data-1625208742104-xNQI5eRpO.json';
var taiyuanshi = '/asset/get/s/data-1625214372297-4TvnpZjw0.json';
var wanbolinqu = '/asset/get/s/data-1625208774016-t1TTxt8gA.json';
var xiaodianqu = '/asset/get/s/data-1625208783562-nfaMGou7A.json';
var xinghualingqu = '/asset/get/s/data-1625208789097-xflm8U4oL.json';
var yangquxian = '/asset/get/s/data-1625208795375-coGKLP5vv.json';
var yingzequ = '/asset/get/s/data-1625208800471-OnOQxGuBi.json';
echarts.extendsMap = function (id, opt) {
// 实例
var chart = this.init(document.getElementById(id));
var curGeoJson = {};
var cityMap = {
//"太原市": taiyuanshi,
"古交市": gujiaoshi,
"尖草坪区": jiancaopingqu,
"晋源区": jinyuanqu,
"娄烦县": loufanxian,
"清徐县": qingxuxian,
"万柏林区": wanbolinqu,
"小店区": xiaodianqu,
"杏花岭区": xinghualingqu,
"阳曲县": yangquxian,
"迎泽区": yingzequ,
};
var geoCoordMap = {
'杏花岭区':[112.6442,37.9228],
'尖草坪区':[112.4959,37.9810],
'万柏林区':[112.4004,37.8689],
'晋源区':[112.4355,37.7349],
'清徐县':[112.4176,37.5337],
'阳曲县':[112.6717,38.1389],
'娄烦县':[111.7937,38.0660],
'古交市':[112.174353,37.908534],
'小店区':[112.564273,37.817974],
'迎泽区':[112.6895,37.8662]
};
var levelColorMap = {
1: 'rgba(241, 109, 115, .8)',
2: 'rgba(255, 235, 59, .7)',
3: 'rgba(147, 235, 248, 1)',
};
var defaultOpt = {
mapName: 'china', // 地图展示
goDown: false, // 是否下钻
bgColor: '#404a59', // 画布背景色
activeArea: [], // 区域高亮,同echarts配置项
data: [],
// 下钻回调(点击的地图名、实例对象option、实例对象)
callback: function (name, option, instance) {},
};
if (opt) opt = this.util.extend(defaultOpt, opt);
// 层级索引
var name = [opt.mapName];
var idx = 0;
var pos = {
leftPlus: 115,
leftCur: 150,
left: 198,
top: 50,
};
var line = [
[0, 0],
[8, 11],
[0, 22],
];
// style
var style = {
font: '18px "Microsoft YaHei", sans-serif',
textColor: '#eee',
lineColor: 'rgba(147, 235, 248, .8)',
};
var handleEvents = {
/**
* i 实例对象
* o option
* n 地图名
**/
resetOption: function (i, o, n) {
var breadcrumb = this.createBreadcrumb(n);
var j = name.indexOf(n);
var l = o.graphic.length;
if (j < 0) {
o.graphic.push(breadcrumb);
o.graphic[0].children[0].shape.x2 = 145;
o.graphic[0].children[1].shape.x2 = 145;
if (o.graphic.length > 2) {
for (var x = 0; x < opt.data.length; x++) {
if (n === opt.data[x].name + '市') {
o.series[0].data = handleEvents.initSeriesData([opt.data[x]]);
break;
} else o.series[0].data = [];
}
}
name.push(n);
idx++;
} else {
o.graphic.splice(j + 2, l);
if (o.graphic.length <= 2) {
o.graphic[0].children[0].shape.x2 = 60;
o.graphic[0].children[1].shape.x2 = 60;
o.series[0].data = handleEvents.initSeriesData(opt.data);
}
name.splice(j + 1, l);
idx = j;
pos.leftCur -= pos.leftPlus * (l - j - 1);
}
o.geo.map = n;
o.geo.zoom = 0.4;
i.clear();
i.setOption(o);
this.zoomAnimation();
opt.callback(n, o, i);
},
/**
* name 地图名
**/
createBreadcrumb: function (name) {
var cityToPinyin = {
"古交市": "gujiaoshi",
"尖草坪区": "jiancaopingqu",
"晋源区": "jinyuanqu",
"娄烦县": "loufanxian",
"清徐县": "qingxuxian",
"万柏林区": "wanbolinqu",
"小店区": "xiaodianqu",
"杏花岭区": "xinghualingqu",
"阳曲县": "yangquxian",
"迎泽区": "yingzequ"
};
var breadcrumb = {
type: 'group',
id: name,
left: pos.leftCur + pos.leftPlus,
top: pos.top + 3,
children: [
{
type: 'polyline',
left: -90,
top: -5,
shape: {
points: line,
},
style: {
stroke: '#fff',
key: name,
// lineWidth: 2,
},
onclick: function () {
var name = this.style.key;
handleEvents.resetOption(chart, option, name);
},
},
{
type: 'text',
left: -68,
top: 'middle',
style: {
text: name,
textAlign: 'center',
fill: style.textColor,
font: style.font,
},
onclick: function () {
var name = this.style.text;
handleEvents.resetOption(chart, option, name);
},
},
{
type: 'text',
left: -68,
top: 10,
style: {
name: name,
text: cityToPinyin[name] ? cityToPinyin[name].toUpperCase() : '',
textAlign: 'center',
fill: style.textColor,
font: '12px "Microsoft YaHei", sans-serif',
},
onclick: function () {
// console.log(this.style);
var name = this.style.name;
handleEvents.resetOption(chart, option, name);
},
},
],
};
pos.leftCur += pos.leftPlus;
return breadcrumb;
},
// 设置effectscatter
initSeriesData: function (data) {
var temp = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
temp.push({
name: data[i].name,
value: geoCoord.concat(data[i].value, data[i].level),
});
}
}
return temp;
},
zoomAnimation: function () {
var count = null;
var zoom = function (per) {
if (!count) count = per;
count = count + per;
// console.log(per,count);
chart.setOption({
geo: {
zoom: count,
},
});
if (count < 1)
window.requestAnimationFrame(function () {
zoom(0.2);
});
};
window.requestAnimationFrame(function () {
zoom(0.2);
});
},
};
var option = {
backgroundColor: opt.bgColor,
graphic: [
{
type: 'group',
left: pos.left,
top: pos.top - 4,
children: [
{
type: 'line',
left: 0,
top: -20,
shape: {
x1: 0,
y1: 0,
x2: 60,
y2: 0,
},
style: {
stroke: style.lineColor,
},
},
{
type: 'line',
left: 0,
top: 20,
shape: {
x1: 0,
y1: 0,
x2: 60,
y2: 0,
},
style: {
stroke: style.lineColor,
},
},
],
},
{
id: name[idx],
type: 'group',
left: pos.left + 2,
top: pos.top,
children: [
{
type: 'polyline',
left: 90,
top: -12,
shape: {
points: line,
},
style: {
stroke: 'transparent',
key: name[0],
},
onclick: function () {
var name = this.style.key;
handleEvents.resetOption(chart, option, name);
},
},
{
type: 'text',
left: 0,
top: 'middle',
style: {
text: name[0] === '太原' ? '太原市' : name[0],
textAlign: 'center',
fill: style.textColor,
font: style.font,
},
onclick: function () {
handleEvents.resetOption(chart, option, '太原');
},
},
{
type: 'text',
left: 0,
top: 10,
style: {
text: 'TAIYUAN',
textAlign: 'center',
fill: style.textColor,
font: '12px "Microsoft YaHei", sans-serif',
},
onclick: function () {
handleEvents.resetOption(chart, option, '太原');
},
},
],
},
],
geo: {
map: opt.mapName,
// roam: true,
zoom: 1,
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
},
},
emphasis: {
textStyle: {
color: '#fff',
},
},
},
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 1)',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: 'rgba(147, 235, 248, 0)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(147, 235, 248, .2)', // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
shadowColor: 'rgba(128, 217, 248, 1)',
// shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10,
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0,
},
},
regions: opt.activeArea.map(function (item) {
if (typeof item !== 'string') {
return {
name: item.name,
itemStyle: {
normal: {
areaColor: item.areaColor || '#389BB7',
},
},
label: {
normal: {
show: item.showLabel,
textStyle: {
color: '#fff',
},
},
},
};
} else {
return {
name: item,
itemStyle: {
normal: {
borderColor: '#91e6ff',
areaColor: '#389BB7',
},
},
};
}
}),
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo',
// symbol: 'diamond',
showEffectOn: 'render',
rippleEffect: {
period: 15,
scale: 6,
brushType: 'fill',
},
hoverAnimation: true,
itemStyle: {
normal: {
color: function (params) {
return levelColorMap[params.value[3]];
},
shadowBlur: 10,
shadowColor: '#333',
},
},
data: handleEvents.initSeriesData(opt.data),
},
],
};
chart.setOption(option);
// 添加事件
chart.on('click', function (params) {
var _self = this;
if (opt.goDown && params.name !== name[idx]) {
if (cityMap[params.name]) {
var url = cityMap[params.name];
$.get(url, function (response) {
// console.log(response);
curGeoJson = response;
echarts.registerMap(params.name, response);
handleEvents.resetOption(_self, option, params.name);
});
}
}
});
chart.setMap = function (mapName) {
var _self = this;
if (mapName.indexOf('市') < 0) mapName = mapName + '市';
var citySource = cityMap[mapName];
if (citySource) {
var url = './map/' + citySource + '.json';
$.get(url, function (response) {
// console.log(response);
curGeoJson = response;
echarts.registerMap(mapName, response);
handleEvents.resetOption(_self, option, mapName);
});
}
// handleEvents.resetOption(this, option, mapName);
};
return chart;
};
$.getJSON(taiyuanshi, function (geoJson) {
echarts.registerMap('太原', geoJson);
var myChart = echarts.extendsMap('chart-panel', {
bgColor: '#154e90', // 画布背景色
mapName: '太原', // 地图名
goDown: true, // 是否下钻
// 下钻回调
callback: function (name, option, instance) {
console.log(name, option, instance);
},
// 数据展示
data: [
{
name: '古交市',
value: 10,
level: 1,
},
{
name: '阳曲县',
value: 12,
level: 2,
},
{
name: '万柏林区',
value: 11,
level: 3,
},
{
name: '晋源区',
value: 16,
level: 2,
},
{
name: '娄烦县',
value: 12,
level: 1,
},
],
});
});
截图如下
