<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/echarts.min.js"></script>
<script src="../js/fujian.js"></script>
<script src="../jquery-1.11.1.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>
var myChart = echarts.init(document.getElementById('map'), 'dark');
var geoCoordMap = { //坐标可以根据需要进行微调
"福州市": [119.306239, 26.075302],
"厦门市": [118.11022, 24.800000],
"莆田市": [119.007558, 25.531011],
"三明市": [117.635001, 26.265444],
"泉州市": [118.589421, 25.1200000],
"漳州市": [117.661801, 24.410897],
"南平市": [118.178459, 27.635627],
"龙岩市": [117.02978, 25.491603],
"宁德市": [119.527082, 27.15924],
};
var rawData = [
["福州市", 10, 20, 30],
["厦门市", 10, 20, 40],
["莆田市", 10, 20, 35],
["三明市", 15, 20, 25],
["泉州市", 10, 20, 30],
["漳州市", 10, 20, 30],
["南平市", 10, 25, 35],
["龙岩市", 10, 20, 30],
["宁德市", 15, 20, 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 2d地图上添加柱形图
猜你喜欢
转载自blog.csdn.net/SQY_candy/article/details/82846883
今日推荐
周排行