<!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>
echarts地圖跟柱圖結合
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.