|
|
|
|
|
$(function () {
|
|
|
map();
|
|
|
function map() {
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
var myChart = echarts.init(document.getElementById('map'));
|
|
|
var data = [
|
|
|
|
|
|
{ name: '北海驿站', value: 60 },
|
|
|
{ name: '西安驿站', value: 61 },
|
|
|
{ name: '金坛驿站', value: 62 },
|
|
|
{ name: '东营驿站', value: 62 },
|
|
|
{ name: '牡丹江驿站', value: 63 },
|
|
|
{ name: '遵义驿站', value: 63 },
|
|
|
{ name: '绍兴驿站', value: 63 },
|
|
|
{ name: '扬州驿站', value: 64 },
|
|
|
{ name: '常州驿站', value: 64 },
|
|
|
{ name: '潍坊驿站', value: 65 },
|
|
|
{ name: '重庆驿站', value: 66 },
|
|
|
{ name: '台州驿站', value: 67 },
|
|
|
{ name: '南京驿站', value: 67 },
|
|
|
{ name: '滨州驿站', value: 70 },
|
|
|
{ name: '贵阳驿站', value: 71 },
|
|
|
{ name: '无锡驿站', value: 71 },
|
|
|
{ name: '本溪驿站', value: 71 },
|
|
|
{ name: '渭南驿站', value: 72 },
|
|
|
{ name: '马鞍山驿站', value: 72 },
|
|
|
{ name: '宝鸡驿站', value: 72 },
|
|
|
{ name: '焦作驿站', value: 75 },
|
|
|
{ name: '句容驿站', value: 75 },
|
|
|
{ name: '北京驿站', value: 79 },
|
|
|
{ name: '徐州驿站', value: 79 },
|
|
|
{ name: '衡水驿站', value: 80 },
|
|
|
{ name: '包头驿站', value: 80 },
|
|
|
{ name: '绵阳驿站', value: 80 },
|
|
|
{ name: '枣庄驿站', value: 84 },
|
|
|
{ name: '杭州驿站', value: 84 },
|
|
|
{ name: '淄博驿站', value: 85 },
|
|
|
{ name: '鞍山驿站', value: 86 },
|
|
|
{ name: '溧阳驿站', value: 86 },
|
|
|
{ name: '安阳驿站', value: 90 },
|
|
|
{ name: '开封驿站', value: 90 },
|
|
|
{ name: '济南驿站', value: 92 },
|
|
|
{ name: '德阳驿站', value: 93 },
|
|
|
{ name: '温州驿站', value: 95 },
|
|
|
{ name: '九江驿站', value: 96 },
|
|
|
{ name: '邯郸驿站', value: 98 },
|
|
|
{ name: '临安驿站', value: 99 },
|
|
|
{ name: '兰州驿站', value: 99 },
|
|
|
{ name: '沧州驿站', value: 100 },
|
|
|
{ name: '临沂驿站', value: 103 },
|
|
|
{ name: '南充驿站', value: 104 },
|
|
|
{ name: '天津驿站', value: 105 },
|
|
|
{ name: '富阳驿站', value: 106 },
|
|
|
{ name: '泰安驿站', value: 112 },
|
|
|
{ name: '诸暨驿站', value: 112 },
|
|
|
{ name: '郑州驿站', value: 113 },
|
|
|
{ name: '哈尔滨驿站', value: 114 },
|
|
|
{ name: '聊城驿站', value: 116 },
|
|
|
{ name: '芜湖驿站', value: 117 },
|
|
|
{ name: '唐山驿站', value: 119 },
|
|
|
{ name: '平顶山驿站', value: 119 },
|
|
|
{ name: '邢台驿站', value: 119 },
|
|
|
{ name: '德州驿站', value: 120 },
|
|
|
{ name: '济宁驿站', value: 120 },
|
|
|
{ name: '荆州驿站', value: 127 },
|
|
|
{ name: '宜昌驿站', value: 130 },
|
|
|
{ name: '义乌驿站', value: 132 },
|
|
|
{ name: '丽水驿站', value: 133 },
|
|
|
{ name: '洛阳驿站', value: 134 },
|
|
|
{ name: '秦皇岛驿站', value: 136 },
|
|
|
{ name: '株洲驿站', value: 143 },
|
|
|
{ name: '石家庄驿站', value: 147 },
|
|
|
{ name: '莱芜驿站', value: 148 },
|
|
|
{ name: '常德驿站', value: 152 },
|
|
|
{ name: '保定驿站', value: 153 },
|
|
|
{ name: '湘潭驿站', value: 154 },
|
|
|
{ name: '金华驿站', value: 157 },
|
|
|
{ name: '岳阳驿站', value: 169 },
|
|
|
{ name: '长沙驿站', value: 175 },
|
|
|
{ name: '衢州驿站', value: 177 },
|
|
|
{ name: '廊坊驿站', value: 193 },
|
|
|
{ name: '菏泽驿站', value: 194 },
|
|
|
{ name: '合肥驿站', value: 229 },
|
|
|
{ name: '武汉驿站', value: 273 },
|
|
|
{ name: '大庆驿站', value: 279 }
|
|
|
];
|
|
|
var geoCoordMap = {
|
|
|
|
|
|
'北海驿站': [109.12, 21.49],
|
|
|
'西安驿站': [108.95, 34.27],
|
|
|
'金坛驿站': [119.56, 31.74],
|
|
|
'东营驿站': [118.49, 37.46],
|
|
|
'牡丹江驿站': [129.58, 44.6],
|
|
|
'遵义驿站': [106.9, 27.7],
|
|
|
'绍兴驿站': [120.58, 30.01],
|
|
|
'扬州驿站': [119.42, 32.39],
|
|
|
'常州驿站': [119.95, 31.79],
|
|
|
'潍坊驿站': [119.1, 36.62],
|
|
|
'重庆驿站': [106.54, 29.59],
|
|
|
'台州驿站': [121.420757, 28.656386],
|
|
|
'南京驿站': [118.78, 32.04],
|
|
|
'滨州驿站': [118.03, 37.36],
|
|
|
'贵阳驿站': [106.71, 26.57],
|
|
|
'无锡驿站': [120.29, 31.59],
|
|
|
'本溪驿站': [123.73, 41.3],
|
|
|
'渭南驿站': [109.5, 34.52],
|
|
|
'马鞍山驿站': [118.48, 31.56],
|
|
|
'宝鸡驿站': [107.15, 34.38],
|
|
|
'焦作驿站': [113.21, 35.24],
|
|
|
'句容驿站': [119.16, 31.95],
|
|
|
'北京驿站': [116.46, 39.92],
|
|
|
'徐州驿站': [117.2, 34.26],
|
|
|
'衡水驿站': [115.72, 37.72],
|
|
|
'包头驿站': [110, 40.58],
|
|
|
'绵阳驿站': [104.73, 31.48],
|
|
|
'枣庄驿站': [117.57, 34.86],
|
|
|
'杭州驿站': [120.19, 30.26],
|
|
|
'淄博驿站': [118.05, 36.78],
|
|
|
'鞍山驿站': [122.85, 41.12],
|
|
|
'溧阳驿站': [119.48, 31.43],
|
|
|
'安阳驿站': [114.35, 36.1],
|
|
|
'开封驿站': [114.35, 34.79],
|
|
|
'济南驿站': [117, 36.65],
|
|
|
'德阳驿站': [104.37, 31.13],
|
|
|
'温州驿站': [120.65, 28.01],
|
|
|
'九江驿站': [115.97, 29.71],
|
|
|
'邯郸驿站': [114.47, 36.6],
|
|
|
'临安驿站': [119.72, 30.23],
|
|
|
'兰州驿站': [103.73, 36.03],
|
|
|
'沧州驿站': [116.83, 38.33],
|
|
|
'临沂驿站': [118.35, 35.05],
|
|
|
'南充驿站': [106.110698, 30.837793],
|
|
|
'天津驿站': [117.2, 39.13],
|
|
|
'富阳驿站': [119.95, 30.07],
|
|
|
'泰安驿站': [117.13, 36.18],
|
|
|
'诸暨驿站': [120.23, 29.71],
|
|
|
'郑州驿站': [113.65, 34.76],
|
|
|
'哈尔滨驿站': [126.63, 45.75],
|
|
|
'聊城驿站': [115.97, 36.45],
|
|
|
'芜湖驿站': [118.38, 31.33],
|
|
|
'唐山驿站': [118.02, 39.63],
|
|
|
'平顶山驿站': [113.29, 33.75],
|
|
|
'邢台驿站': [114.48, 37.05],
|
|
|
'德州驿站': [116.29, 37.45],
|
|
|
'济宁驿站': [116.59, 35.38],
|
|
|
'荆州驿站': [112.239741, 30.335165],
|
|
|
'宜昌驿站': [111.3, 30.7],
|
|
|
'义乌驿站': [120.06, 29.32],
|
|
|
'丽水驿站': [119.92, 28.45],
|
|
|
'洛阳驿站': [112.44, 34.7],
|
|
|
'秦皇岛驿站': [119.57, 39.95],
|
|
|
'株洲驿站': [113.16, 27.83],
|
|
|
'石家庄驿站': [114.48, 38.03],
|
|
|
'莱芜驿站': [117.67, 36.19],
|
|
|
'常德驿站': [111.69, 29.05],
|
|
|
'保定驿站': [115.48, 38.85],
|
|
|
'湘潭驿站': [112.91, 27.87],
|
|
|
'金华驿站': [119.64, 29.12],
|
|
|
'岳阳驿站': [113.09, 29.37],
|
|
|
'长沙驿站': [113, 28.21],
|
|
|
'衢州驿站': [118.88, 28.97],
|
|
|
'廊坊驿站': [116.7, 39.53],
|
|
|
'菏泽驿站': [115.480656, 35.23375],
|
|
|
'合肥驿站': [117.27, 31.86],
|
|
|
'武汉驿站': [114.31, 30.52],
|
|
|
'大庆驿站': [125.03, 46.58]
|
|
|
};
|
|
|
var max = 480,
|
|
|
min = 9; // todo
|
|
|
var maxSize4Pin = 100,
|
|
|
minSize4Pin = 20;
|
|
|
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 = {
|
|
|
// backgroundColor: '#404a59',
|
|
|
/*** title: {
|
|
|
text: '实时行驶车辆',
|
|
|
subtext: 'data from PM25.in',
|
|
|
sublink: 'http://www.pm25.in',
|
|
|
left: 'center',
|
|
|
textStyle: {
|
|
|
color: '#fff'
|
|
|
}
|
|
|
},**/
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
formatter: function (params) {
|
|
|
return params.name + " : " + params.value[2]
|
|
|
}
|
|
|
},
|
|
|
|
|
|
geo: {
|
|
|
map: 'china',
|
|
|
label: {
|
|
|
emphasis: {
|
|
|
show: true
|
|
|
}
|
|
|
},
|
|
|
roam: true,
|
|
|
zoom: 1.2,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
areaColor: 'rgba(2,37,101,.5)',
|
|
|
borderColor: 'rgba(112,187,252,.5)'
|
|
|
},
|
|
|
emphasis: {
|
|
|
areaColor: 'rgba(2,37,101,.8)'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: '驿站地点',
|
|
|
type: 'scatter',
|
|
|
symbol: 'pin',
|
|
|
coordinateSystem: 'geo',
|
|
|
data: convertData(data),
|
|
|
symbolSize: function (val) {
|
|
|
|
|
|
return val[2] / 4;
|
|
|
},
|
|
|
label: {
|
|
|
normal: {
|
|
|
formatter: '{b}',
|
|
|
position: 'right',
|
|
|
show: false
|
|
|
},
|
|
|
emphasis: {
|
|
|
show: true
|
|
|
}
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: '#ffeb7b'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
|
|
|
};
|
|
|
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", function () {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|