<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/echarts-4.1.0.js"></script>
<script src="js/jiangsu.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body style="height: 100%; margin: 0;min-width: 1200px;min-height: 770px">
<div id="map" style="width: 100%; height: 95%"></div>
<script>
//https://github.com/apache/incubator-echarts/tree/master/map
//这个地址可以下载到地图文件
//echarts-4.1.0.js自己下载一下
//本例子参考了官网和网上的一些例子
// http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all
var myChart = echarts.init(document.getElementById('map'),'dark');
var geoCoordMap = {//坐标可以根据需要进行微调
"南京": [118.79,32.05],
"镇江": [119.42,32.18],
"常州": [119.90,31.81],
"无锡": [120.31,31.72],
"苏州": [120.58,31.29],
"扬州": [119.51,32.70],
"泰州": [120.05,32.45],
"南通": [120.89,32.30],
"徐州": [117.68,34.30],
"宿迁": [118.57,33.96],
"淮安": [119.01,33.55],
"盐城": [120.16,33.74],
"连云港": [119.22,34.59],
};
var rawData = [
["南京",10,20,30],
["镇江",10,25,30],
["常州",10,20,35],
["无锡",15,20,25],
["苏州",10,20,30],
["扬州",10,20,30],
["泰州",10,25,35],
["南通",10,20,30],
["徐州",15,20,35],
["宿迁",10,25,30],
["淮安",15,20,35],
["盐城",10,20,30],
["连云港",10,25,35],
];
//配置地图的样式
var option3 = {
animation: false,
// 地图背景颜色
tooltip: {
trigger: 'axis'
},
geo: {
map: '江苏',
// silent: true,
roam: true,// 缩放和拖拽
label: {
emphasis: {
show: false,
areaColor: '#eee'
}
},
// 地区块儿颜色
itemStyle: { // 每个区域的样式
normal: {
areaColor: 'rgba(119,119,119,0)',
borderColor:'#00BBBD',
borderWidth:1.5,
},
emphasis: { // 高亮时候的样式
areaColor: 'rgba(119,119,119,0)',
}
}
},
series: []
};
//给每个城市对应的坐标处加上柱状图
function renderEachCity() {
var option = {
xAxis: [],
yAxis: [],
grid: [],
series: []
};
echarts.util.each(rawData, function(dataItem, idx) {
// console.log(dataItem,idx); //["南京", 10, 20, 30], 0
// console.log(dataItem[0]); //"南京"
var inflationData = [dataItem[1],dataItem[2],dataItem[3]];
var geoCoord = geoCoordMap[dataItem[0]];//获得城市的坐标
var coord = myChart.convertToPixel('geo', geoCoord);//转换坐标系上的点到像素坐标值。
idx += '';
option.xAxis.push({
id: idx,
gridId: idx,
type: 'category',
name: dataItem[0],
nameTextStyle: {
color: '#F1E04F',
},
nameLocation: 'middle',
nameGap: 3,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
axisLine: {
show: false
},
minInterval:10,
data: ["学校","教师","学生"],
z: 100
});
option.yAxis.push({
id: idx,
gridId: idx,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#1C70B6'
}
},
max:50,
z: 100
});
option.grid.push({
id: idx,
width: 30,
height: 40,
left: coord[0] - 15,
top: coord[1] - 15,
z: 100
});
option.series.push({
id: idx,
type: 'bar',
xAxisId: idx,
yAxisId: idx,
barWidth:7,
barGap: 1,
barCategoryGap: 0,
data: inflationData,
z: 100,
itemStyle: {
normal: {
color: function(params){
// 柱状图每根柱子颜色
var colorList = ['#F75D5D','#59ED4F','#4C91E7'];
return colorList[params.dataIndex];
}
}
}
});
});
myChart.setOption(option);
}
setTimeout(renderEachCity, 0);
// 缩放和拖拽
function throttle(fn, delay, debounce) {
var currCall;
var lastCall = 0;
var lastExec = 0;
var timer = null;
var diff;
var scope;
var args;
delay = delay || 0;
function exec() {
lastExec = (new Date()).getTime();
timer = null;
fn.apply(scope, args || []);
}
var cb = function() {
currCall = (new Date()).getTime();
scope = this;
args = arguments;
diff = currCall - (debounce ? lastCall : lastExec) - delay;
clearTimeout(timer);
if (debounce) {
timer = setTimeout(exec, delay);
} else {
if (diff >= 0) {
exec();
} else {
timer = setTimeout(exec, -diff);
}
}
lastCall = currCall;
};
return cb;
}
var throttledRenderEachCity = throttle(renderEachCity,0);
//监听地图缩放
myChart.on('geoRoam', throttledRenderEachCity);
myChart.setOption(option3);
window.onresize = function () {
myChart.resize();
setTimeout(renderEachCity, 0);
}
</script>
</body>
</html>
