@Kener-林峰 你好,想跟你请教个问题:想做一个全国7大区域地图,点击区域显示该区域的各个省,自己写了一个分区的geoJson文件。以下是事件响应,切换区域js代码
require(
[
'echarts',
'echarts/chart/map' //按需加载
],
function (ec) {
require('echarts/util/mapData/params').params.area = {
getGeoJson: function (callback) {
$.getJSON('geoJson/area.geo.json',callback);
}
};
require('echarts/util/mapData/params').params.db = {
getGeoJson: function (callback) {
$.getJSON('geoJson/db.geo.json',callback);
}
};
require('echarts/util/mapData/params').params.hb = {
getGeoJson: function (callback) {
$.getJSON('geoJson/hb.geo.json',callback);
}
};
require('echarts/util/mapData/params').params.hd = {
getGeoJson: function (callback) {
$.getJSON('geoJson/hd.geo.json',callback);
}
};
require('echarts/util/mapData/params').params.hn = {
getGeoJson: function (callback) {
$.getJSON('geoJson/hn.geo.json',callback);
}
};
require('echarts/util/mapData/params').params.hz = {
getGeoJson: function (callback) {
$.getJSON('geoJson/hz.geo.json',callback);
}
};
require('echarts/util/mapData/params').params.xb = {
getGeoJson: function (callback) {
$.getJSON('geoJson/xb.geo.json',callback);
}
};
require('echarts/util/mapData/params').params.xn = {
getGeoJson: function (callback) {
$.getJSON('geoJson/xn.geo.json',callback);
}
};
var myChart = ec.init(document.getElementById('main'));
var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event');
var curIndx = 0;
var mapType = [
'area','db','hb','hd','hn','hz','xn','xb'
];
myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
var len = mapType.length;
var mt = mapType[curIndx % len];
if (mt == 'area') {
// 全国选择时指定到选中的省份
var selected = param.selected;
for (var i in selected) {
if (selected[i]) {
mt = i;
while (len--) {
if (mapType[len] == mt) {
curIndx = len;
}
}
break;
}
}
option.tooltip.formatter = '滚轮切换省份或点击返回全国<br/>{b}';
}
else {
curIndx = 0;
mt = 'area';
option.tooltip.formatter = '滚轮切换或点击进入该省<br/>{b}';
}
option.series[0].mapType = mt;
option.title.subtext = mt + ' (滚轮或点击切换)';
myChart.setOption(option, true);
});
以下是area.geo.json文件部分内容
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": "db",
"properties": {
"name": "东北地区",
"cp": [
128.1445,
45.5156
],
"childNum": 3
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
121.4648,
53.3496
],
....................
]
]
}
},
{
"type": "Feature",
"id": "hb",
"properties": {
"name": "华北地区",
"cp": [
115.1551,
42.2539
],
"childNum": 5
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
117.4219,
40.21
],
....................
]
]
}
}
],
"srcSize": {
"left": 243.4766,
"top": 36.4307,
"width": 61.6113,
"height": 35.4638
}
}