echarts 地图显示饼图
2019-02-02 本文已影响0人
Q绿水竹林Q
地图+饼图
代码下载地址：map_pie: 地图上标注饼图
<!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: 900px;"></div>
</div>
<script>
var myChart = echarts.init(document.getElementById('map'));
// 失去坐标
var geoCoordMap = {
"北京": [116.41667,39.91667],
"上海": [121.43333,34.50000],
"广州": [113.23333,23.16667],
"杭州": [120.20000,30.26667],
"重庆": [106.45000, 29.56667],
"青岛": [120.33333,36.06667],
"厦门": [118.10000,24.46667],
"福州": [119.30000,26.08333],
"兰州": [103.73333,36.03333],
"长沙": [113.00000,28.21667],
"南京": [118.78333,32.05000],
"海外": [130.41667,36.91667],
};
//市区数据
var rawData = [
["北京",5,20,30],
["上海",10,10,30],
["广州",10,50,30],
["杭州",10,20,3],
["重庆",10,20,8],
["青岛",10,20,10],
["厦门",10,20,4],
["福州",10,10,30],
["兰州",10,15,30],
["长沙",10,25,30],
["南京",10,20,5],
["海外",10,5,10]
];
function makeMapData(rawData) {
var mapData = [];
for (var i = 0; i < rawData.length; i++) {
var geoCoord = geoCoordMap[rawData[i][0]];//某个市区得经纬度
if (geoCoord) {
mapData.push({
name: rawData[i][0],//某个市区的名称
value: geoCoord.concat(rawData[i].slice(1))
});
}
}
console.log(mapData);
return mapData;
};
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: 0.9, // 地图初始大小
center: [116.366794, 40.400309], // 初始中心位置
label: {
normal:{
show:false
},
emphasis: {
show: false,
areaColor: '#eee'
}
},
// 地区块儿颜色
itemStyle: {
normal: {
areaColor: '#f3e5a1',
borderColor: '#877167'
},
emphasis: {
areaColor: '#21AEF8'
}
}
},
series: []
};
function renderEachCity() {
var option = {
title:[],
grid: [],
legend: {
x : '64%',
y : '30%',
orient:'vertical',
data:['乘用车','客车','专用车']
},
series: []
};
echarts.util.each(rawData, function(dataItem, idx) {
var geoCoord = geoCoordMap[dataItem[0]];
var coord = myChart.convertToPixel('geo', geoCoord);
idx += '';
inflationData = [
{ name: '乘用车', value: dataItem[1] },
{ name: '客车', value: dataItem[2] },
{ name: '专用车', value: dataItem[3] },
]
var total = dataItem[1]+dataItem[2]+dataItem[3];
var title ={
text: dataItem[0],
textStyle:{
fontSize:10,
fontWeight:'bold',
},
x: coord[0]-15,
y: coord[1]+15
};
option.title.push(title);
option.grid.push({
id: idx,
gridId:idx,
width: 30,
height: 40,
left: coord[0] - 15,
top: coord[1] - 15,
z: 100
});
option.series.push({
id: idx,
type: 'pie',
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
lableLine: {
normal: {
show: false
},
emphasis: {
show: true
}
},
radius:total>50 ? '4%' :( total > 40 ? '3%' :(total>30 ? '2%':'1%')) ,
center:coord,
data: inflationData,
z: 100,
itemStyle: {
normal: {
color: function(params){
// 柱状图每根柱子颜色
var colorList = ['#fcae91','#fb6a4a','#cb181d'];
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(option);
</script>
</body>
</html>
我的这部分代码也是从一个博客上修改后的，具体原博客的地址我找不到了，他的是显示柱状图我给改成了饼图
