echarts 西安地铁热力图,钻取显示每个出口的饼状图
如图
代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>地铁热力图</title>
<script src="jquery.min.js"></script>
<script src="echarts.min.js"></script>
<script src="bmap.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript">
var data = [
{ name: '北大街', value: 500 },
{ name: '西安北站', value: 200 },
{ name: '后卫寨', value: 200 },
{ name: '保税区', value: 100 },
{ name: '纺织城', value: 150 },
{ name: '韦曲南', value: 160 },
{ name: '通化门', value: 190 },
{ name: '小寨', value: 400 },
{ name: '鱼化寨', value: 190 },
{ name: '城西客运站', value: 290 },
{ name: '辛家庙', value: 150 },
{ name: '市图书馆', value: 150 },
{ name: '青龙寺', value: 150 }
];
var geoCoordMap = {
'北大街': [108.953636, 34.276173],
'西安北站': [108.944869, 34.382293],
'后卫寨': [108.820184, 34.306474],
'保税区': [109.050509, 34.401603],
'纺织城': [109.076129, 34.285688],
'韦曲南': [108.95184, 34.148521],
'鱼化寨': [108.854427, 34.244278],
'通化门': [109.001624, 34.275472],
'小寨': [108.953169, 34.229132],
'城西客运站': [108.880424, 34.279946],
'辛家庙': [109.002019, 34.311201],
'市图书馆': [108.953762, 34.323932],
'青龙寺': [109.000689, 34.236892]
};
var piedata = [];
var piedatas = {
'北大街': [
{ value: 335, name: 'A出口' },
{ value: 310, name: 'B1出口' },
{ value: 234, name: 'B2出口' },
{ value: 135, name: 'C出口' },
{ value: 1548, name: 'D出口' }
],
'小寨': [
{ value: 335, name: 'A1出口' },
{ value: 335, name: 'A2出口' },
{ value: 310, name: 'B1出口' },
{ value: 234, name: 'B2出口' },
{ value: 135, name: 'C出口' },
{ value: 1548, name: 'D出口' }
],
'城西客运站': [
{ value: 335, name: 'A出口' },
{ value: 310, name: 'B出口' },
{ value: 135, name: 'C出口' },
{ value: 1548, name: 'D出口' }
]
}
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
function getOption(title){
option = {
title: [
{
text: '西安地铁实时进站人数统计',
subtext: '西安地铁局',
left: 'center',
textStyle: {
color: '#999'
}
}, {
text: title,
x: '78%',
y: '36%',
textStyle: {
color: '#999'
}
}
],
tooltip: {
trigger: 'item',
formatter: function (params, ticket, callback) {
if(Array.isArray(params.value)){
return params.name + ":" + params.value[2] + " 人/次";
}
return params.name + ":" + params.value + " 人/次";
}
},
bmap: {
center: [108.953098279, 34.2777998978],
zoom: 12,
roam: true,
mapStyle: {
styleJson: [
{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#044161"
}
},
{
"featureType": "land",
"elementType": "all",
"stylers": {
"color": "#343332"
}
},
{
"featureType": "boundary",
"elementType": "geometry",
"stylers": {
"color": "#064f85"
}
},
{
"featureType": "railway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "highway",
"elementType": "geometry",
"stylers": {
"color": "#454545"
}
},
{
"featureType": "highway",
"elementType": "geometry.fill",
"stylers": {
"color": "#454545",
"lightness": 1
}
},
{
"featureType": "highway",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "arterial",
"elementType": "geometry",
"stylers": {
"color": "#454545"
//是否显示复杂地图
//,"visibility": "off"
}
},
{
"featureType": "arterial",
"elementType": "geometry.fill",
"stylers": {
"color": "#454545"
}
},
{
"featureType": "poi",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "green",
"elementType": "all",
"stylers": {
"color": "#056197",
"visibility": "off"
}
},
{
"featureType": "subway",
"elementType": "all",
"stylers": {
"visibility": ""
}
},
{
"featureType": "manmade",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "local",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "arterial",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "boundary",
"elementType": "geometry.fill",
"stylers": {
"color": "#029fd4"
}
},
{
"featureType": "building",
"elementType": "all",
"stylers": {
"color": "#1a5787"
}
},
{
"featureType": "label",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}
]
}
},
series: [
{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'bmap',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: 'purple'
}
}
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'bmap',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 6)),
symbolSize: function (val) {
return val[2] / 10;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#8B6914',
shadowBlur: 10,
shadowColor: 'white'
}
},
zlevel: 1
},
{
name: 'GDP占比',
type: 'pie',
center: ['80%', '20%'],
radius: '28%',
data: piedata,
z: 100
}
]
};
return option;
}
function initecharts(dom,title){
var myChart = echarts.init(dom);
myChart.setOption(getOption(title));
myChart.on('click',function(object){
debugger
if(undefined!=piedatas[object.name]){
piedata = piedatas[object.name];
title = object.name;
}
echarts.dispose(dom);
initecharts(dom,title);
});
}
$(document).ready(function () {
var dom = document.getElementById('echartsDiv');
initecharts(dom);
});
</script>
</head>
<body align=center>
<div id="echartsDiv" style="width: 1200px;height:600px;">
</div>
</body>
</html>