,
,
下面是我的源代码：
$.get('test.geojson', function (testJson) {
echarts.registerMap('test', testJson);
var myChart = echarts.init(document.getElementById('mainMap'),'chalk');
var data = [
{name: '海门', value: 9},
{name: '鄂尔多斯', value: 12},
{name: '招远', value: 12},
{name: '舟山', value: 12},
{name: '齐齐哈尔', value: 14},
...
];
var geoCoordMap = {
'海门':[121.15,31.89],
'鄂尔多斯':[109.781327,39.608266],
'招远':[120.38,37.35],
'舟山':[122.207216,29.985295],
'齐齐哈尔':[123.97,47.33],
...
};
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;
};
option = {
title: {
text: '全国主要城市空气质量 - 百度地图',
// subtext: 'data from PM25.in',
// sublink: 'http://www.pm25.in',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip : {
trigger: 'item',
// triggerOn: 'mousemove'
},
bmap: {
center: [104.114129, 37.550339],
zoom: 5,
roam: true,
mapStyle: {
styleJson: [{
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#044161'
}
}, {
'featureType': 'land',
'elementType': 'all',
'stylers': {
'color': '#004981'
}
}, {
"featureType": "boundary",
"elementType": "geometry",
"stylers": {
"color": "#064f85"
}
},{
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'highway',
'elementType': 'all',
'stylers': {
'color': '#004981'
}
},{
"featureType": "highway",
"elementType": "geometry.fill",
"stylers": {
"color": "#005b96",
"lightness": 1
}
}, {
'featureType': 'highway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#004981'
}
}, {
"featureType": "arterial",
"elementType": "geometry.fill",
"stylers": {
"color": "#00508b"
}
},{
'featureType': 'poi',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'green',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'subway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'manmade',
'elementType': 'all',
'stylers': {
// 'color': '#d1d1d1'
"visibility": "off"
}
}, {
'featureType': 'local',
'elementType': 'all',
'stylers': {
// 'color': '#d1d1d1'
"visibility": "off"
}
}, {
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'boundary',
'elementType': 'all',
'stylers': {
'color': '#029fd4'
}
}, {
'featureType': 'building',
'elementType': 'all',
'stylers': {
'color': '#1a5787'
}
}, {
'featureType': 'label',
'elementType': 'labels.text.fill',
'stylers': {
// 'color': '#999999'
"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: '#ddb926'
}
}
},
{
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: 'emphasis',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
// zlevel: 1
},
{
name: '外部导入geojson',
type: 'map',
map: 'test', // 自定义扩展图表类型
aspectScale: 1.0, //长宽比. default: 0.75
// zoom: 1.1,
// roam: true,
// tooltip: 'none',
tooltip : {
trigger: 'none',
},
itemStyle:{
normal:{
// opacity: 0,
borderWidth:3,
borderColor:'#cccccc',
areaColor:'rgba(128, 128, 128, 0)',
},
emphasis:{
borderWidth:3,
borderColor:'#cccccc',
areaColor:'rgba(128, 128, 128, 0)',
}
},
data: [], //需要动态加载data内容
zlevel: 1
}
]
};
myChart.setOption(option);
});
1 个解决方案
#1
该回复于2018-01-19 09:27:48被管理员删除
#1
该回复于2018-01-19 09:27:48被管理员删除