Echarts做地图，将每个省的数据标记在地图上，根据数据的大小做散点方大效果，并筛选前五个最大省份进行展示（经常有这种需求，看自己的代码跟屎一样，本文只做记录，）
效果
js代码
function loadMap() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('mapChart'));
var nameColor = " rgb(55, 75, 113)"
var name_fontFamily = '宋体'
var name_fontSize = 35
var mapName = 'china'
// var data = []
//用于存储地图数据
var geoCoordMap = {};
//划上地图以后的显示
var toolTipData = [];
/*获取地图数据*/
myChart.showLoading();
var mapFeatures = echarts.getMap(mapName).geoJson.features;
myChart.hideLoading();
var data;
$.ajax({
// url: ajaxBaseUrl + "data/event-distributed.json",
url: bigApi.regionalDistributionOfSurveyData,
dataType: "json"
}).done(function () {
$("#block5").addClass("chart-done");
}).done(function (back) {
if (back.status == '0') {
data = back.result;
console.log("ssss");
console.log(back);
data.forEach(function (v) {
//地区名称
var name = v.name;
toolTipData.push({
name: name,
value: [{
name: "问卷数量",
value: v.value + '份'
}, {
name: "播种总面积",
value: v.bzmj + '亩'
}, {
name: "总产量",
value: v.amount + '吨'
}, {
name: "总收入",
value: v.money + '万元'
}]
})
// toolTipData.push({
// name: name,
// value: [{
// name: "111",
// value: v.value + '份'
// }]
// })
})
mapFeatures.forEach(function (v) {
// 地区名称
var name = v.properties.name;
// 地区经纬度
geoCoordMap[name] = v.properties.cp;
});
// console.log("555")
// console.log(data);
var max = 480,
min = 9; // todo
var maxSize4Pin = 50,
minSize4Pin = 20;
var convertData = function (data) {
// console.log("666");
// console.log(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),
});
}
}
// console.log("2222");
// console.log(res);
return res;
};
option = {
title: {
text: '调查数据区域分布',
// subtext: 'data from PM25.in',
// sublink: 'http://www.pm25.in',
left: 'center',
textStyle: {
fontWeight: 'normal',
color: '#fff',
fontSize: 25
}
},
tooltip: {
//鼠标划上去以后显示的提示
trigger: 'item',
formatter: function (params) {
if (typeof (params.value)[2] == "undefined") {
var toolTiphtml = ''
for (var i = 0; i < toolTipData.length; i++) {
if (params.name == toolTipData[i].name) {
toolTiphtml += toolTipData[i].name + ':
'
for (var j = 0; j < toolTipData[i].value.length; j++) {
toolTiphtml += toolTipData[i].value[j].name + ':' + toolTipData[i].value[j].value + "
"
}
}
}
// console.log(toolTiphtml)
// console.log(convertData(data))
return toolTiphtml;
} else {
var toolTiphtml = ''
for (var i = 0; i < toolTipData.length; i++) {
if (params.name == toolTipData[i].name) {
toolTiphtml += toolTipData[i].name + ':
'
for (var j = 0; j < toolTipData[i].value.length; j++) {
toolTiphtml += toolTipData[i].value[j].name + ':' + toolTipData[i].value[j].value + "
"
}
}
}
// console.log(toolTiphtml)
// console.log(convertData(data))
return toolTiphtml;
}
}
},
legend: {
//图例
orient: 'vertical',
y: 'bottom',
x: 'right',
data: ['credit_pm2.5'],
textStyle: {
color: '#fff'
}
},
visualMap: {
show: false,
min: 0,
max: 600,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
seriesIndex: [1],
//控制地图颜色的显示区间
inRange: {
// color: ['#3B5077', '#031525'] // 蓝黑
// color: ['#ffc0cb', '#800080'] // 红紫
// color: ['#3C3B3F', '#605C3C'] // 黑绿
// color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
// color: ['#23074d', '#cc5333'] // 紫红
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#1488CC', '#2B32B2'] // 浅蓝
// color: ['#00467F', '#A5CC82', '#ffc0cb'] // 蓝绿红
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#00467F', '#A5CC82'] // 蓝绿
color: ['#22e5e8', '#0035f9', '#22e5e8'] // 蓝绿
}
},
/*工具按钮组,导出图片等按钮组*/
toolbox: {
show: false,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {
readOnly: false
},
restore: {},
saveAsImage: {}
}
},
geo: {
//地图的初始配置
show: true,
map: mapName,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
roam: false,
itemStyle: {
normal: {
areaColor: '#F2F2F2',//地图没有数据的时候的颜色0A4579
// areaColor: '#0A4579',//地图没有数据的时候的颜色
borderColor: '#097bba'
},
emphasis: {
// areaColor: '#2B91B7' //鼠标划上去的时候颜色
areaColor: '#8389E0'
}
}
},
series: [{
//对有数据的省份画点
name: '散点',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function (val) {
//用来设置每个省份圆圈的大小
return val[2] / 6;
},
label: {
show: false,
normal: {
formatter: '{b}',
position: 'right',
show: false,//是否显示省份的名称
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,0,0.8)'
}
}
},
{
type: 'map',
map: mapName,
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: true
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: data
},
{
name: '点',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin', //气泡
symbolSize: function (val) {
var a = (maxSize4Pin - minSize4Pin) / (max - min);
var b = minSize4Pin - a * min;
b = maxSize4Pin - a * max;
return a * val[2] + b;
},
label: {
normal: {
show: true,
formatter: function (params) {
// console.log("aaa");
// console.log(params);
return params.value[2]
},
textStyle: {
color: '#fff',
fontSize: 9,
}
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,0,0)', //标志颜色
}
},
zlevel: 6,
data: convertData(data),
},
{
name: 'Top 5',//用于显示最高的前五个数据
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 5)),
symbolSize: function (val) {
return val[2] / 5;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,0,0.8)',
shadowBlur: 10,
shadowColor: '#05C3F9'
}
},
zlevel: 1
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
} else {
return;
}
}).fail(function (jqXHR) {
console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText);
});
// var data = [
// {
// "name": "安徽",
// "value": "47"
// },
// {
// "name": "贵州",
// "value": "46"
// },
// {
// "name": "河北",
// "value": "89"
// },
// {
// "name": "重庆",
// "value": "78"
// }];
window.addEventListener("resize", function () {
myChart.resize();
});
}
部分代码解释
关于geoCoordMap 地图经纬度数据
//用于存储地图数据
var geoCoordMap = {};
geoCoordMap类似json， 其键为省份的名称；值为数组，代表对应的经纬度
本例代码中data 数据
data = back.result;
此例中的data为对象组成的数组，每个对象包含几个键值，详细如下
关于convertData函数的作用
var convertData = function (data) {
// console.log("666");
// console.log(data);
var res = [];
for (var i = 0; i < data.length; i++) {
//通过数据中的name值，得到其对应的经纬度，
var geoCoord = geoCoordMap[data[i].name];
//如果存在当前省份的经纬度
if (geoCoord) {
//下列各式为name:"福建",value:[经度，维度，福建省的数据]
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
// console.log("2222");
// console.log(res);
return res;
};
看一下最终的res的值
关于tooltip组件
tooltip: {
//鼠标划上去以后显示的提示
trigger: 'item',
formatter: function (params) {
if (typeof (params.value)[2] == "undefined") {
var toolTiphtml = ''
for (var i = 0; i < toolTipData.length; i++) {
if (params.name == toolTipData[i].name) {
toolTiphtml += toolTipData[i].name + ':
'
for (var j = 0; j < toolTipData[i].value.length; j++) {
toolTiphtml += toolTipData[i].value[j].name + ':' + toolTipData[i].value[j].value + "
"
}
}
}
// console.log(toolTiphtml)
// console.log(convertData(data))
return toolTiphtml;
} else {
var toolTiphtml = ''
for (var i = 0; i < toolTipData.length; i++) {
if (params.name == toolTipData[i].name) {
toolTiphtml += toolTipData[i].name + ':
'
for (var j = 0; j < toolTipData[i].value.length; j++) {
toolTiphtml += toolTipData[i].value[j].name + ':' + toolTipData[i].value[j].value + "
"
}
}
}
// console.log(toolTiphtml)
// console.log(convertData(data))
return toolTiphtml;
}
}
},
- formatter中params参数
鼠标滑到省份的轮廓（不正好是那个点）
注意参数中value的区别
如果鼠标正好滑到的是那个省份点
注意参数中value的区别
这一部分当中的if else主要用来判断数据的有无，因为有的省份没有数据，如果没有数据就不显示了
关于带有涟漪特效动画的散点（气泡）图
name: 'Top 5',//用于显示最高的前五个数据
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 5)),
symbolSize: function (val) {
return val[2] / 5;
},