function chinaMap() {
// 1、初始化echarts示例map
var map = echarts.init(document.getElementById('fans_map'));
//(2)粉丝位置引入data数据
var data = [
{name: '海门', value: 500},
{name: '鄂尔多斯', value: 18},
{name: '招远', value: 2500},
{name: '舟山', value: 1200},
{name: '齐齐哈尔', value: 3200},
{name: '赤峰', value: 20},
{name: '青岛', value: 30},
{name: '乳山', value: 40}
]
// 单个标点数据
var data2 = [
{name: '盐城', value: 20000,}
]
$.get('js/echarts/china.json',function(chinaJson){
echarts.registerMap('china', chinaJson); // 注册地图
//(3)引入城市坐标
var geoCoordMap = {
'海门':[121.15,31.89],
'鄂尔多斯':[109.781327,39.608266],
'招远':[120.38,37.35],
'舟山':[122.207216,29.985295],
'齐齐哈尔':[123.97,47.33],
'盐城':[120.13,33.38],
'赤峰':[118.87,42.28],
'青岛':[120.33,36.07],
'乳山':[121.52,36.89]
}
//(4)将数据和城市坐标对应上
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;
};
var max=200;
// 动态设置气泡大小
data.forEach(function (itemOpt) {
if (itemOpt.value > max) {
max = itemOpt.value;
}
// if (itemOpt.value < min) {
// min = itemOpt.value;
// }
});
var option = {
geo: {
type: 'map',
map: 'china',
itemStyle: {
normal: {
areaColor: '#efefef',//区域块默认颜色
borderColor: '#fff'//区域边框颜色
},
emphasis: {
areaColor: '#cccccc'// 鼠标经过区域
}
}
},
// 气泡大小
visualMap: {
show: false,
min: 0,
max: max,
inRange: {
symbolSize: [6, 40]
}
},
//(1)series 的类型为散点图 scatter
series: [
{
name: 'pm2.5', // series名称
type: 'scatter', // series图表类型
coordinateSystem: 'geo', // series坐标系类型
data: convertData(data), // series数据内容
//控制显示文本
label: {
normal: {
show: false,
// formatter: function (val) {
// var area_content = '{a|' + val.data.code + '}' + '\n' + '{b|' + val.value[3] + '}';
// return area_content;
// },//让series 中的文字进行换行
// rich: {
// a: {
// color: '#4801FF',//气泡上字体颜色
// fontWeight: 600,
// },
// b: {
// color: '#4801FF',//气泡上字体颜色
// fontFamily: 'Microsoft YaHei',
// fontSize: 14,
// }
// },//富文本样式,就是上面的formatter中'{a|'和'{b|'
},
emphasis: {
show: true
},
},
//series样式
itemStyle: {
normal: {
color: '#8e7bff'
}
}
},
{
name: '点',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: 25,
label: {
normal: {
show: true,
position:'right',
textStyle: {
color: '#fff',
fontSize: 14,
},
// color: itemOpt.color,
formatter: function (val) {
var area_content = '{a|'+ val.name + '}';
return area_content;
},//让series 中的文字进行换行
rich: {
a: {
color: '#000',//气泡上字体颜色
fontWeight: 600,
},
b: {
color: '#4801FF',//气泡上字体颜色
fontFamily: 'Microsoft YaHei',
fontSize: 14,
}
},//
}
},
itemStyle: {
normal: {
color: '#a11edd', //标志颜色
}
},
zlevel: 6,
data: convertData(data2)
}
]
};
map.setOption(option);
})
}
chinaMap()