地圖+柱狀圖
代碼下載地址：map_bar地圖柱狀圖展示點(diǎn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.11.0.min.js"></script>
<script src="echarts.min.js"></script>
<script src="china.js"></script>
</head>
<body>
<div class="wrap" style="position: relative;">
<div id="map" style="width: 100%; height: 1000px;"></div>
</div>
<script>
var myChart = echarts.init(document.getElementById('map'));
// 失去坐標(biāo)
var geoCoordMap = {
'上海': [121.4648,31.2891],
'東莞': [113.8953,22.901],
'東營(yíng)': [118.7073,37.5513],
'中山': [113.4229,22.478],
'臨汾': [111.4783,36.1615],
'臨沂': [118.3118,35.2936],
'丹東': [124.541,40.4242],
'麗水': [119.5642,28.1854],
'烏魯木齊': [87.9236,43.5883],
'佛山': [112.8955,23.1097],
'保定': [115.0488,39.0948],
'蘭州': [103.5901,36.3043],
'包頭': [110.3467,41.4899],
'北京': [116.4551,40.2539],
'北海': [109.314,21.6211],
'南京': [118.8062,31.9208],
'南寧': [108.479,23.1152],
'南昌': [116.0046,28.6633],
'南通': [121.1023,32.1625],
'廈門': [118.1689,24.6478],
'臺(tái)州': [121.1353,28.6688],
'合肥': [117.29,32.0581],
'呼和浩特': [111.4124,40.4901],
'咸陽(yáng)': [108.4131,34.8706],
'哈爾濱': [127.9688,45.368],
'唐山': [118.4766,39.6826],
'嘉興': [120.9155,30.6354],
'大同': [113.7854,39.8035],
'大連': [122.2229,39.4409],
'天津': [117.4219,39.4189],
'太原': [112.3352,37.9413],
'威海': [121.9482,37.1393],
'寧波': [121.5967,29.6466],
'寶雞': [107.1826,34.3433],
'宿遷': [118.5535,33.7775],
'常州': [119.4543,31.5582],
'廣州': [113.5107,23.2196],
'廊坊': [116.521,39.0509],
'延安': [109.1052,36.4252],
'張家口': [115.1477,40.8527],
'徐州': [117.5208,34.3268],
'德州': [116.6858,37.2107],
'惠州': [114.6204,23.1647],
'成都': [103.9526,30.7617],
'揚(yáng)州': [119.4653,32.8162],
'承德': [117.5757,41.4075],
'拉薩': [91.1865,30.1465],
'無錫': [120.3442,31.5527],
'日照': [119.2786,35.5023],
'昆明': [102.9199,25.4663],
'杭州': [119.5313,29.8773],
'棗莊': [117.323,34.8926],
'柳州': [109.3799,24.9774],
'株洲': [113.5327,27.0319],
'武漢': [114.3896,30.6628],
'汕頭': [117.1692,23.3405],
'江門': [112.6318,22.1484],
'沈陽(yáng)': [123.1238,42.1216],
'滄州': [116.8286,38.2104],
'河源': [114.917,23.9722],
'泉州': [118.3228,25.1147],
'泰安': [117.0264,36.0516],
'泰州': [120.0586,32.5525],
'濟(jì)南': [117.1582,36.8701],
'濟(jì)寧': [116.8286,35.3375],
'?？?: [110.3893,19.8516],
'淄博': [118.0371,36.6064],
'淮安': [118.927,33.4039],
'深圳': [114.5435,22.5439],
'清遠(yuǎn)': [112.9175,24.3292],
'溫州': [120.498,27.8119],
'渭南': [109.7864,35.0299],
'湖州': [119.8608,30.7782],
'湘潭': [112.5439,27.7075],
'濱州': [117.8174,37.4963],
'濰坊': [119.0918,36.524],
'煙臺(tái)': [120.7397,37.5128],
'玉溪': [101.9312,23.8898],
'珠海': [113.7305,22.1155],
'鹽城': [120.2234,33.5577],
'盤錦': [121.9482,41.0449],
'石家莊': [114.4995,38.1006],
'福州': [119.4543,25.9222],
'秦皇島': [119.2126,40.0232],
'紹興': [120.564,29.7565],
'聊城': [115.9167,36.4032],
'肇慶': [112.1265,23.5822],
'舟山': [122.2559,30.2234],
'蘇州': [120.6519,31.3989],
'萊蕪': [117.6526,36.2714],
'菏澤': [115.6201,35.2057],
'營(yíng)口': [122.4316,40.4297],
'葫蘆島': [120.1575,40.578],
'衡水': [115.8838,37.7161],
'衢州': [118.6853,28.8666],
'西寧': [101.4038,36.8207],
'西安': [109.1162,34.2004],
'貴陽(yáng)': [106.6992,26.7682],
'連云港': [119.1248,34.552],
'邢臺(tái)': [114.8071,37.2821],
'邯鄲': [114.4775,36.535],
'鄭州': [113.4668,34.6234],
'鄂爾多斯': [108.9734,39.2487],
'重慶': [107.7539,30.1904],
'金華': [120.0037,29.1028],
'銅川': [109.0393,35.1947],
'銀川': [106.3586,38.1775],
'鎮(zhèn)江': [119.4763,31.9702],
'長(zhǎng)春': [125.8154,44.2584],
'長(zhǎng)沙': [113.0823,28.2568],
'長(zhǎng)治': [112.8625,36.4746],
'陽(yáng)泉': [113.4778,38.0951],
'青島': [120.4651,36.3373],
'韶關(guān)': [113.7964,24.7028]
};
//省
var shengData = ['天津','江西','安徽','重慶','湖北','北京','山東','河南','江蘇','福建','河北','陜西','上海','浙江','廣西','廣東','湖南','四川','山西','云南','貴州','甘肅','海南','內(nèi)蒙古','遼寧','寧夏','吉林','黑龍江','青海','新疆','西藏'];
//市區(qū)
var shiData = ['天津', '南昌', '合肥', '重慶', '武漢','北京', '日照', '鄭州', '南京', '福州', '石家莊','西安', '上海', '杭州', '南寧', '廣州', '長(zhǎng)沙', '成都','太原', '昆明','貴陽(yáng)', '蘭州', '?？?, '呼和浩特', '沈陽(yáng)', '銀川', '長(zhǎng)春', '哈爾濱', '西寧', '烏魯木齊', '拉薩'];
var SSobj = {};
for(var i=0;i<shengData.length;i++){
SSobj[shiData[i]] = shengData[i];
}
//流出
var lcdata = [267,256,122,107,70,68,66,641,619,540,361,335,389,215,250,262,213,118,103,63,541,288,253,204,119,56,49,30,10,10,4];
//流入
var lrdata = [197,166,271,143,285,910,209,216,696,276,343,251,161,944,116,564,301,357,402,432,113,809,634,727,117,316,231,455,116,138,45];
//市區(qū)數(shù)據(jù)
var rawData = [];
for(var i=0;i<shiData.length;i++){
var arr = [];
arr.push(shiData[i]);
arr.push(lcdata[i]);
arr.push(lrdata[i]);
rawData.push(arr);
}
function makeMapData(rawData) {
var mapData = [];
for (var i = 0; i < rawData.length; i++) {
var geoCoord = geoCoordMap[rawData[i][0]];//某個(gè)市區(qū)得經(jīng)緯度
if (geoCoord) {
mapData.push({
name: rawData[i][0],//某個(gè)市區(qū)的名稱
value: geoCoord.concat(rawData[i].slice(1))
});
}
}
return mapData;
};
var option = {
animation: false,
// 地圖背景顏色
backgroundColor: new echarts.graphic.RadialGradient(0.5, 0.5, 0.4, [{
offset: 0,
color: '#fff'
}, {
offset: 1,
color: '#fff'
}]),
tooltip: {
trigger: 'axis'
},
geo: {
map: 'china',
// silent: true,
roam: true,
zoom: 1, // 地圖初始大小
center: [116.366794, 40.400309], // 初始中心位置
label: {
color:"#fff",
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: []
};
function renderEachCity() {
var option = {
xAxis: [],
yAxis: [],
grid: [],
series: []
};
echarts.util.each(rawData, function(dataItem, idx) {
var geoCoord = geoCoordMap[dataItem[0]];
var coord = myChart.convertToPixel('geo', geoCoord);
idx += '';
var inflationData = [dataItem[1],dataItem[2]];
option.xAxis.push({
id: idx,
gridId: idx,
type: 'category',
name: SSobj[dataItem[0]],
nameLocation: 'middle',
nameGap: 3,
nameTextStyle:{
color:"#eac736",
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color:"#fff",
show: false
},
axisLine: {
onZero: false,
lineStyle: {
color: '#555'
}
},
// data: xAxisCategory,
data: ["流出","流入"],
z: 100
});
option.yAxis.push({
id: idx,
gridId: idx,
max:1000,
min:4,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#fff'
}
},
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,
barGap: 0,
barCategoryGap: 0,
// data: inflationData,
data: inflationData,
z: 100,
itemStyle: {
normal: {
color: function(params){
// 柱狀圖每根柱子顏色
var colorList = ['#e28b4a','#9db578'];//['#fcae91','#fb6a4a','#cb181d'];
return colorList[params.dataIndex];
}
}
}
});
});
console.time('a');
myChart.setOption(option);
console.timeEnd('a');
}
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(option);
// 點(diǎn)擊顯示柱狀圖
myChart.on('click',function(e){
if(e.componentSubType == "bar"){
// 先清除所有柱狀圖
$('.tongJiTu').remove();
// 創(chuàng)建遮擋層
creatWrap();
// 創(chuàng)建柱狀圖容器
var divObj = document.createElement('div');
$(divObj).addClass('tongJiTu');
divObj.id = 'zhuzhuang';
var divX = getMousePos()['x'];
var divY = getMousePos()['y'];
$(divObj).css({
'width': 320,
'height': 180,
'border': '1px solid #ccc',
'position': 'absolute',
'top': divY,
'left': divX
}).appendTo('.wrap');
// 獲取數(shù)據(jù)
var pointData = [];
pointData.push(lcdata[e.seriesIndex]);
pointData.push(lrdata[e.seriesIndex]);
// 創(chuàng)建柱狀圖
zhuZhuangTu(pointData);
// 點(diǎn)擊遮擋層消失
clearWrap('.zhedang');
}
return;
});
// 獲取橫縱坐標(biāo)
function getMousePos(e) {
var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX;
var y = e.pageY || e.clientY + scrollY;
return {'x': x,'y': y};
}
// 生成柱狀圖
function zhuZhuangTu(data) {
var zhuzhuang = echarts.init(document.getElementById('zhuzhuang'));
option = {
backgroundColor: 'rgba(255,255,255,.3)',
legend: {
data: ['流出','流入']
},
xAxis: [
{
type: 'category',
data: ['流出','流入']
}
],
yAxis: [
{
splitLine: {
show: false
},
type: 'value'
}
],
series: [
{
type: 'bar',
itemStyle: {
normal: {
color: function(params){
var colorList = ['#e28b4a','#9db578'];
return colorList[params.dataIndex];
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#000'
}
}
}
},
data: data
}
]
};
zhuzhuang.setOption(option);
}
// 生成遮擋層
function creatWrap(){
var zheDang = document.createElement('div');
$(zheDang).addClass('zhedang').css({
width: '100%',
height: '100%',
position: 'absolute',
top: 0,
left: 0,
backgroundColor: 'rgba(0,0,0,.2)'
}).appendTo('.wrap');
}
// 去掉遮擋層
function clearWrap(id){
$(id).click(function(e){
this.remove();
$('.tongJiTu').remove();
return false;
});
}
</script>
</body>
</html>
這個(gè)demo是從一個(gè)博主那拷貝過來之后，按照自己的需求修改之后的，原博主的地址我找不到了，希望對(duì)有需求的人有些許的幫助吧
