续我上一篇:echarts实现世界地图,给不同数值的国家着色,并根据经纬度在对应位置上添加标签(一)
参考网址:
1.https://www.dazhuanlan.com/2019/11/30/5de14b1b3aa97/
2.https://echarts.apache.org/zh/option.html#series-map.geoIndex
主要使用到的配置:
geoIndex
// 将坐标与值对应并反映在地图上
convertData(data) {
var res = [];
var that = this
for (var i = 0; i < data.length; i++) {
var geoCoord = that.geoCoordMap[data[i].name];
// console.log('geoCoord',geoCoord)
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
},
// 获取近5年
getYearList() {
var yearArr=[];
var myDate = new Date();
nowYear = myDate.getFullYear();//当前年
this.timeValue = nowYear
for ( var int = nowYear-4; int <= nowYear; int++) {
yearArr.push({
label: int,
value: int
});
}
return yearArr.reverse();
},
/*获取数据*/
getData(){
let that = this
server.getTradeoverview({
tradeflow: that.tradeflow,
year: parseInt(that.timeValue),
hscode: that.industryCode
}).then(function(res){
that.result=res.data
var tempStr = that.tradeflow=='export'?'出口':'进口'
that.pieces = [
{min: res.data.section[3], label: '大于'+res.data.section[3],color:'#3267D7'}, // 不指定 max,表示 max 为无限大(Infinity)。
{min: res.data.section[2], max: res.data.section[3], label: res.data.section[2]+'-'+res.data.section[3],color:'#1681F0'},
{min: res.data.section[1], max: res.data.section[2],label: res.data.section[1]+'-'+res.data.section[2],color:'#41ABFF'},
{min: res.data.section[0], max: res.data.section[1],label: res.data.section[0]+'-'+res.data.section[1],color:'#A3CBFF'},
{min: 0, max: res.data.section[0],label: '0-'+res.data.section[0],color:'#bdd2ec'},
{value: 0, label: '无数据', color: '#EDEDED'}
]
that.tempData = that.dataDeal(res.data.map)
that.getCountryList()
})
},
/*转换数据格式给地图着色*/
dataDeal(list){
var tempArr = []
list.forEach(function(item,index){
// console.log('11111-----',item)
tempArr.push({
name: item.countryCode,
value: item.amountCurrent,
other: item
})
})
return tempArr
},
/*切换年份*/
changeOption(){
this.getData()
},
/*生成地图*/
getCountryList() {
var that = this;
/* 根据请求的数据实例化地图 */
var chart = echarts.init(document.getElementById('echartsMap'));
chart.setOption({
visualMap: { // 分区域着色
//min: 0,
//max: 2200000,
type: 'piecewise',
// splitNumber:5, //对于连续型数据,自动平均切分成几段。默认为5段
hoverLink:false,
itemWidth:12, //图形的宽度,即长条的宽度。
itemHeight:12, //图形的高度,即长条的高度。
showLabel: true, //是否显示每项的文本标签。默认情况是,如果text 被使用则不显示文本标签,否则显示。
pieces: that.pieces,
text:['单位:万元'], // 两端的文本,如['High', 'Low']
textStyle: { //文本样式
color: '#777F86'
},
bottom: 15 // 组件离容器下侧的距离
},
// 移到国家上的效果
tooltip: {
trigger: 'item',
padding: 0,
enterable: true,
transitionDuration: 1,
textStyle: {
color: '#818A91',
decoration: 'none',
},
backgroundColor: 'rgba(255,255,255,0.96)',
// borderColor:'#000000',
//borderWidth: 1,
formatter: function(params) {
//console.log('移到某个国家上:',params)
var tipHtml = '';
if (params.data&¶ms.data.other) {
tipHtml = '<div style="font-size:13px;min-width:300px;box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);border-radius:4px;padding:30px 20px;">'+
'<div style="font-size: 16px;color:#333333;">'+params.data.other.countryName+'</div>'+
'<div style="padding:6px 0;"><i style="display: inline-block;margin-bottom: 3px;width:6px;margin-right:6px;height: 6px;background: #3472EE;border-radius: 50%;"></i>'+that.timeValue+'年整体进口额为'+(params.data.other.amountCurrent||0)+'万元;</div>'+
'<div style="padding:6px 0;"><i style="display: inline-block;margin-bottom: 3px;width:6px;margin-right:6px;height: 6px;background: #3472EE;border-radius: 50%;"></i>'+that.timeValue+'年整体进口所占份额为'+(params.data.other.marketShare||0)+'%;</div>'+
'<div style="padding:6px 0;"><i style="display: inline-block;margin-bottom: 3px;width:6px;margin-right:6px;height: 6px;background: #3472EE;border-radius: 50%;"></i>'+that.timeValue+'年年进口额增长率为'+(params.data.other.growthRate||0)+'%;</div>'+
'</div>'
} else {
tipHtml = '<div style="font-size:13px;min-width:300px;box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);border-radius:4px;padding:30px 20px;">'+
'<div style="font-size: 16px;color:#333333;">'+that.nameMap[params.name]+'</div>'+
'<div style="text-align:center;padding:20px 0 10px;">无数据</div>'+
'</div>'
}
return tipHtml;
}
},
geo: {
type: 'map',
name: '世界地图',
map: 'world',
roam: true, // 是否开启鼠标缩放和平移漫游
itemStyle: { // 每个区域的样式
normal: {
areaColor: '#EDEDED',
borderColor: '#D3D7E1', // 图形的描边颜色
borderWidth: 1 //描边线宽
},
emphasis: { // 高亮状态
label: {
show: false // 去除鼠标移到地图上,地图上显示国家名的效果
}
//areaColor: '#7d7d7d'
}
},
scaleLimit: { // 缩放的极限控制
min: 1,
max: 3
},
left: 40, // 组件离容器左侧的距离
top: 80, // 组件离容器上侧的距离
right: 80,
//nameMap: that.nameMap, //自定义地区的名称映射(bug1:加了这个visualMap会错乱)
data: that.tempData
},
series: [
{
type: 'map',
name: '世界地图',
map: 'world',
geoIndex: 0, // (bug fixed:解决在地图上缩放重影问题:https://www.dazhuanlan.com/2019/11/30/5de14b1b3aa97/)
roam: true, // 是否开启鼠标缩放和平移漫游
itemStyle: { // 每个区域的样式
normal: {
areaColor: '#EDEDED',
borderColor: '#D3D7E1', // 图形的描边颜色
borderWidth: 1 //描边线宽
},
emphasis: { // 高亮状态
label: {
show: false // 去除鼠标移到地图上,地图上显示国家名的效果
}
//areaColor: '#7d7d7d'
}
},
scaleLimit: { // 缩放的极限控制
min: 1,
max: 3
},
left: 40, // 组件离容器左侧的距离
top: 80, // 组件离容器上侧的距离
right: 80,
//nameMap: that.nameMap, //自定义地区的名称映射(bug1:加了这个visualMap会错乱)
data: that.tempData
},
// 打点
/*{
type: 'scatter',
coordinateSystem: 'geo',
data: this.convertData([
{name: "中国", value: 110},
{name: "以色列", value: 110},
{name: "法国", value: 110},
{name: "澳大利亚", value: 210},
{name: "日本", value: 210},
{name: "韩国", value: 210},
{name: "新加坡", value: 310}
]),
zlevel:12,
symbolSize: [20,37], // 标记的大小,[宽、高]
//symbol: 'pin', //气泡
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAlCAYAAABCr8kFAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAC1klEQVRIx+2WS0gVURjHf6OXvD4jM1+ZVhJmWNfwolmhqxaWRFQgLcwIWkVFG90EEUGhmyBKcpdUCGaPhenClZDgq8iyMqy8lo+0C5nPaz6+FndGx7mP5rqIFv3hwJnvO+d3zjffOd+MggnF1l8WM+MAgswONCtLIINHC68of32H/4H/INCrRCRYRE6LyCMR6RmeGZePk04Rkaeq3fxGRMQmIr3iXx9EZLcZWKEEpkJ/sJQAYZqS9BxFB+wEsrRn1+Ist4fv8tjZyNCvERLXxHE0poCzCaewBoXoGa2KouSuAIrIPuC5ZpxZdHHi3UU6J7o9IrFHZlCz4wahQVa9OUdRlHZYPjbFeu+trw/pGHMgCxEerWPMQeVAnXGdEq2jAXfqvU9G2rzCtFY33GoE7tI6WvmK13sHpuaQxSifCRycnjOaEozAFXUu0bIJx7TTJzA+dL3RFGwMeVDvPRK3x2/IxxP2GoHfjcBOvfdCaj72tWleYfa1aZzbmmcEtmsd7dhkA236Ea6FeW72dnLP0T3lnJ22xoSEuYo3Z4Sf32bHGuzx5chUFKVrhUVEXqzypjR4fdEikrlKYLTP7IlIbYCwS/iTiISIyLhJWB9mJCKHTQJtpoAqtO4PsHLTMBVoERGnD9hnf3NXXLmSsooQIBaILjqYn1OQl11lnFDb2Hyyobn9NfADGKkuL531AJaUVUQA23EXiaVFys4UHUtPTV4qTZ++DNVerXxwXx8M8A3oqS4vnQQILimriAVygSjcVzEJdznKann5Nio9NSU6KiLM2ts/OHrtTs0gsAWIARaBSSACSM7cf+BnV0vTlAWwsVwtDgEp+hCuV9W80j2Gqy1RndcP1KvzbUBTkLrSauXxI2oB3gB2dZVnwEY1rA3qa7CqvgXABYzjLld9LJe9BaDLmJR0IM6YeRM7HAHea0nxdmzigHVAJBCqRmEB5tWdTAMTvo7Nbwng09R+hsh2AAAAAElFTkSuQmCC',
symbolOffset:[0, '-50%'], // 标记相对于原本位置的偏移
label: {
normal: {
show: true,
offset: [18,-10], // 是否对文字进行偏移。默认不偏移。例如:[30, 40] 表示文字在横向上偏移 30,纵向上偏移 40。
formatter: function(params) {
console.log('气泡:',params)
return '{fline|'+params.data.name+'}';
},
position: 'insideTopLeft', // 标签相对于图形包围盒左上角的位置。
distance:0,
backgroundColor: '#16B47F',
padding: [0, 0],
borderRadius: 3,
// verticalAlign:'middle',
// lineHeight: 32,
color: '#ffffff',
rich: {
fline: {
padding: [4, 6, 4, 6],
color: '#ffffff'
}
}
},
emphasis: {
show: false
}
},
itemStyle: {
emphasis: {
borderColor: '#fff',
borderWidth: 1
}
}
}*/
]
},true)
// 地图点击事件
chart.on('click', function(params) {
console.log('---params----',params)
})
}