echarts中做地图一直用的百度在线地图做底图,现在有个项目中客户服务器是局域网没有外网,因此需要做离线地图,需要中国的省界以及各省会城市的标注。考虑到arcgis离线地图需要做切片,或者得自己做中国省界的geoJson文件,相对都也比较复杂,想起来echarts4.0有内部自带的china的geoJson对象,只需通过加载point点的形式添加各省会城市的标注即可。代码备份一下。
var data = [
{name: '拉萨', value: 24},
{name: '上海', value: 25},
{name: '福州', value: 29},
{name: '南宁', value: 37},
{name: '广州', value: 38},
{name: '太原', value: 39},
{name: '昆明', value: 39},
{name: '海口', value: 44},
{name: '银川', value: 52},
{name: '南昌', value: 54},
{name: '西宁', value: 57},
{name: '呼和浩特', value: 10},
{name: '成都', value: 58},
{name: '西安', value: 61},
{name: '重庆', value: 66},
{name: '南京', value: 67},
{name: '贵阳', value: 71},
{name: '北京', value: 79},
{name: '乌鲁木齐', value: 84},
{name: '杭州', value: 84},
{name: '兰州', value: 99},
{name: '天津', value: 105},
{name: '郑州', value: 113},
{name: '哈尔滨', value: 114},
{name: '石家庄', value: 147},
{name: '长沙', value: 175},
{name: '合肥', value: 229},
{name: '武汉', value: 273},
{name: '长春', value: 10},
{name: '沈阳', value: 10},
{name: '台北', value: 10},
{name: '香港', value: 10},
{name: '澳门', value: 10}
];
var geoCoordMap = {
'拉萨':["91.11","29.97"],
'上海':[121.48,31.22],
'福州':[119.3,26.08],
'南宁':[108.33,22.84],
'广州':[113.23,23.16],
'太原':[112.53,37.87],
'昆明':[102.73,25.04],
'海口':[110.35,20.02],
'银川':[106.27,38.47],
'南昌':[115.89,28.68],
'西宁':[101.74,36.56],
'呼和浩特':[111.65,40.82],
'成都':[104.06,30.67],
'西安':[108.95,34.27],
'重庆':[106.54,29.59],
'南京':[118.78,32.04],
'贵阳':[106.71,26.57],
'北京':[116.46,39.92],
'乌鲁木齐':[87.68,43.77],
'杭州':[120.19,30.26],
'兰州':[103.73,36.03],
'天津':[117.2,39.13],
'郑州':[113.65,34.76],
'哈尔滨':[126.63,45.75],
'石家庄':[114.48,38.03],
'长沙':[113,28.21],
'合肥':[117.27,31.86],
'武汉':[114.31,30.52],
'长春':[125.33,43.82],
'沈阳':[123.43,41.79],
'台北':[121.54,25.06],
'香港':[114.16,22.29],
'澳门':[113.545,22.1979]
};
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;
};
myChart.setOption(option = {
title : {
text: '全国数据请求量',
subtext: 'Show Data',
left: 'center',
top: 'top',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
formatter: function(params){
return params.name
}
},
legend: {
left: 'left',
data: ['强', '中', '弱'],
textStyle: {
color: '#ccc'
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{
offset: 0, color: '#0f2c70' // 0% 处的颜色
}, {
offset: 1, color: '#091732' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
geo: {
map: 'china',
show: true,
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#091632',
borderColor: '#1773c3',
shadowColor: '#1773c3',
shadowBlur: 20
}
}
},
series: [
{
name: '城市',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function (val) {
return 5;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true,
color: 'white'
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#EF8A8F'
}
}
}
]
});
结果如图所示: