用eachart轻松实现江苏地图效果如下
实现其他省份、县级地图与实现江苏地图原理相同。实现江苏省地图步骤及源码如下：
1.获取江苏省的geojson格式数据，获取途径http://datav.aliyun.com/ 输入江苏省，下载geojson数据。如要获取某个具体地方的标记位置，可通过http://geojson.io mark获取具体点位置。
2.具体代码如下
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<style>
body{
height: 100%;
background: url(bg.png);
}
</style>
<body>
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="d3/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript">
//var dom = document.getElementById("container");
//var myChart = echarts.init(dom);
option = null;
//myChart.showLoading();
var suzhou = "suzhou.json";
echarts.extendsMap = function(id, opt) {
// 实例
var chart = this.init(document.getElementById(id));
var curGeoJson = {};
var cityMap = {
'苏州': suzhou
};
var geoCoordMap = {
'虎丘区': [120.388523,31.337691],
'吴中区': [120.316597,31.140543],
'相城区': [120.636143,31.445694],
'姑苏区': [120.718877,31.329375],
'吴江区': [120.632213,31.008628],
'常熟市': [120.82405,31.660416],
'张家港市': [120.629597,31.899406],
'昆山市': [120.959204,31.321546],
'太仓市': [121.151507,31.569435]
};
var levelColorMap = {
'1': 'rgba(241, 109, 115, .8)',
'2': 'rgba(255, 235, 59, .7)',
'3': 'rgba(147, 235, 248, 1)'
};
var defaultOpt = {
mapName: 'suzhou', // 地图展示
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 j = name.indexOf(n);
var l = o.graphic.length;
if (j < 0) {
o.graphic[0].children[0].shape.x2 = 145;
o.graphic[0].children[1].shape.x2 = 145;
if (o.graphic.length > 2) {
var cityData = [];
var cityJson;
for (var x = 0; x < opt.data.length; x++) {
if(n === opt.data[x].city){
$([opt.data[x]]).each(function(index,data){
cityJson = {city:data.city,name:data.name,value:data.value,crew:data.crew,company:data.company,position:data.position,region:data.region};
cityData.push(cityJson)
})
}
}
if(cityData!=null){
o.series[0].data = handleEvents.initSeriesData(cityData);
}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);
},
// 设置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),
crew:data[i].crew,
company:data[i].company,
position:data[i].position,
region:data[i].region
});
}
}
return temp;
},
zoomAnimation: function() {
var count = null;
var zoom = function(per) {
if (!count) count = per;
count = count + per;
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,
tooltip: {
show: true,
trigger:'item'
},
geo: {
map: opt.mapName,
roam: false,
zoom: 1,
label: {
normal: {
show: true,
textStyle: {
color: '#fff'
}
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 1)',
borderWidth: 1,
// areaColor:'rgba(5,84,77,0.4)',
areaColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(5,84,77,0.4)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(5,84,77,0.4)' // 100% 处的颜色
}],
global: false // 缺省为 false
},
shadowColor: '#00102a',
shadowOffsetX: 0,
shadowOffsetY: 12,
shadowBlur: 20
},
emphasis: {
areaColor: '#20BCE3',
borderWidth: 0,
shadowColor: 'rgba(254,253,201,0.3)',
shadowBlur: 20
}
},
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: [
{
"name":"姑苏区 Top10",
"type":"lines",
"tooltip": {
formatter:function(params, ticket, callback){
var tips = '<ul style="list-style: none">';
tips += '<li>行政区划：' + params.data.fromName +'-'+ params.data.toName+ '</li>';
tips += '<li>最近上报时间：' + new Date().toLocaleTimeString() + '</li>';
tips += '</ul>';
return tips;
}
},
"zlevel":1,
"lineStyle":{"normal":{color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#0AFDFD' // 0% 处的颜色
}, {
offset: 1, color: 'white' // 100% 处的颜色
}],
global: false // 缺省为 false
},"width":1,"curveness":0.2}},
"data":[
{"fromName":"张家港市","toName":"姑苏区","coords":[[120.629597,31.899406],[120.718877,31.329375]]},
{"fromName":"常熟市","toName":"姑苏区","coords":[[120.82405,31.660416],[120.718877,31.329375]]},
{"fromName":"太仓市","toName":"姑苏区","coords":[[121.151507,31.569435],[120.718877,31.329375]]},
{"fromName":"吴江区","toName":"吴中区","coords":[[120.632213,31.008628],[120.316597,31.140543]]},
{"fromName":"吴中区","toName":"虎丘区","coords":[[120.316597,31.140543],[120.388523,31.337691]]},
{"fromName":"昆山市","toName":"吴江区","coords":[[120.959204,31.321546],[120.632213,31.008628]]},
{"fromName":"虎丘区","toName":"相城区","coords":[[120.388523,31.337691],[120.636143,31.445694]]}
],
/*markPoint: {
symbol: 'pin',
symbolSize: 50,
effect: {
show: true,
shadowBlur: 0
},
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
global: false // 缺省为 false
},
normal: {
label: {show: false}
},
emphasis: {
label: {position: 'top'}
}
},
data: [
{name: '昆山市', x: '50%', y: '60%'},
{name: '常熟市', x: 50, y: 100},
{name: '太仓市', x: 60, y: 100},
{name: '昆山市', x: 40, y: 100},
{name: '吴江区', x: 90, y: 100}
]
}*/
},
{
"name":"苏州",
"type":"effectScatter",
"tooltip": {
formatter:function(params, ticket, callback){
var tips = '<ul style="list-style: none">';
tips += '<li>行政区划：' + params.data.name+ '</li>';
tips += '<li>最近上报时间：' + new Date().toLocaleTimeString() + '</li>';
tips += '</ul>';
return tips;
}
},
"coordinateSystem":"geo",
"zlevel":2,
"showEffectOn":"render",
hoverAnimation: true,
// "rippleEffect":{period:6, scale: 4, brushType: 'stoke'},
"rippleEffect":{period:2, scale: 4, brushType: 'fill'},
// "label":{"normal":{"show":false,"position":"right","formatter":"{b}"},"color":"#fff"},
"itemStyle":{"normal":{"color":"#16FDFD"}},
"data":[
{"name":"虎丘区","value":[120.388523,31.337691]},
{"name":"吴中区","value":[120.316597,31.140543]},
{"name":"相城区","value":[120.636143,31.445694]},
{"name":"姑苏区","value":[120.718877,31.329375]},
{"name":"吴江区","value":[120.632213,31.008628]},
{"name":"常熟市","value":[120.82405,31.660416]},
{"name":"张家港市","value":[120.629597,31.899406]},
{"name":"昆山市","value":[120.959204,31.321546]},
{"name":"太仓市","value":[121.151507,31.569435]}
]}
]
};
chart.setOption(option);
// 添加事件
chart.on('click', function(params) {
console.log(params);
var _self = this;
if (opt.goDown && params.name !== name[idx]) {
if (cityMap[params.name]) {
var url = cityMap[params.name];
$.get(url, function(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) {
curGeoJson = response;
echarts.registerMap(mapName, response);
handleEvents.resetOption(_self, option, mapName);
});
}
};
return chart;
};
var myChart = null;
$.getJSON('suzhou.json', function(geoJson) {
echarts.registerMap('苏州', geoJson);
myChart = echarts.extendsMap('container', {
bgColor: 'transparent', // 画布背景色
mapName: '苏州', // 地图名
text:'火电业务',
goDown: false // 是否下钻
});
});
/*分享需要的*/
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>