echarts地圖map有時因數據較密集，label會疊加在一起，只有餅圖pie有labelLine引導線，如下兩種方法可以實現地圖map添加引導線。
實現效果如下，可以直接在echarts編輯器運行看效果https://www.echartsjs.com/gallery/editor.html。
方法一：引導線用lines實現 ，其它用scatter實現（也可以用map中的label實現）。
優點是引導線隨地圖放大縮小，較靈活；缺點是需要爲每個數據指定引導線位置。
const geoCoordMap = {
江西: [115.892151,28.676493],
河南: [113.665412,34.757975],
四川: [104.065735,30.659462],
重慶: [106.504962,29.533155],
西藏: [91.132212,29.660361],
貴州: [106.713478,26.578343],
遼寧: [123.429096,41.796767],
新疆: [87.617733,43.792818],
山東: [117.000923,36.675807],
上海: [121.472644,31.231706],
澳門: [113.54909,22.198951],
山西: [112.549248,37.857014],
浙江: [120.153576,30.287459],
海南: [110.33119,20.031971],
福建: [119.306239,26.075302],
青海: [101.778916,36.623178],
寧夏: [106.278179,38.46637],
湖北: [114.298572,30.584355],
甘肅: [103.823557,36.058039],
安徽: [117.283042,31.86119],
臺灣: [121.509062,25.044332],
陝西: [108.948024,34.263161],
廣西: [108.320004,22.82402],
天津: [117.190182,39.125596],
雲南: [102.712251,25.040609],
黑龍江: [126.642464,45.756967],
廣東: [113.280637,23.125178],
湖南: [112.982279,28.19409],
河北: [114.502461,38.045474],
內蒙古: [111.670801,40.818311],
吉林: [125.3245,43.886841],
江蘇: [118.767413,32.041544],
北京: [116.405285,39.904989],
香港: [114.173355,22.320048]
};
var data={
江西: Math.round(Math.random()*1000),
河南: Math.round(Math.random()*1000),
四川: Math.round(Math.random()*1000),
重慶: Math.round(Math.random()*1000),
西藏: Math.round(Math.random()*1000),
貴州: Math.round(Math.random()*1000),
遼寧: Math.round(Math.random()*1000),
新疆: Math.round(Math.random()*1000),
山東: Math.round(Math.random()*1000),
山西: Math.round(Math.random()*1000),
海南: Math.round(Math.random()*1000),
福建: Math.round(Math.random()*1000),
青海: Math.round(Math.random()*1000),
寧夏: Math.round(Math.random()*1000),
湖北: Math.round(Math.random()*1000),
甘肅: Math.round(Math.random()*1000),
安徽: Math.round(Math.random()*1000),
陝西: Math.round(Math.random()*1000),
廣西: Math.round(Math.random()*1000),
雲南: Math.round(Math.random()*1000),
黑龍江: Math.round(Math.random()*1000),
湖南: Math.round(Math.random()*1000),
河北: Math.round(Math.random()*1000),
內蒙古: Math.round(Math.random()*1000),
吉林: Math.round(Math.random()*1000),
//江蘇北京香港上海澳門浙江臺灣天津廣東 沒數據
}
// 保存引導線末端的座標
var linesEndCoords={
山西:[geoCoordMap['山西'][0],geoCoordMap['山西'][1]+8],
陝西:[geoCoordMap['陝西'][0],geoCoordMap['陝西'][1]+16],
寧夏:[geoCoordMap['寧夏'][0],geoCoordMap['寧夏'][1]+6],
甘肅:[geoCoordMap['甘肅'][0],geoCoordMap['甘肅'][1]+16],
河北:[geoCoordMap['河北'][0]+12,geoCoordMap['河北'][1]],
山東:[geoCoordMap['山東'][0]+20,geoCoordMap['山東'][1]],
河南:[geoCoordMap['河南'][0]+14,geoCoordMap['河南'][1]],
安徽:[geoCoordMap['安徽'][0]+20,geoCoordMap['安徽'][1]],
湖北:[geoCoordMap['湖北'][0]+14,geoCoordMap['湖北'][1]],
江西:[geoCoordMap['江西'][0]+22,geoCoordMap['江西'][1]],
福建:[geoCoordMap['福建'][0]+9,geoCoordMap['福建'][1]],
海南:[geoCoordMap['海南'][0]+9,geoCoordMap['海南'][1]],
重慶:[geoCoordMap['重慶'][0]-27,geoCoordMap['重慶'][1]],
雲南:[geoCoordMap['雲南'][0]-10,geoCoordMap['雲南'][1]],
廣西:[geoCoordMap['廣西'][0]-30,geoCoordMap['廣西'][1]],
貴州:[geoCoordMap['貴州'][0],geoCoordMap['貴州'][1]-10],
湖南:[geoCoordMap['湖南'][0],geoCoordMap['湖南'][1]-11],
}
// lines引導線數據和座標
function dataLines(province,data){
var res=[];
province.forEach(name=>{
res.push({
name:name,
value:data[name],
coords:[
geoCoordMap[name],
linesEndCoords[name]
],
})
})
return res;
}
// 散點圖數據，其中value屬性值爲地理座標和value拼接
function dataScatter(province,data){
var res=[];
province.forEach(name=>{
res.push({
name:name,
value:[geoCoordMap[name][0],geoCoordMap[name][1],data[name]]
})
})
return res;
}
option = {
legend:{},
geo:{
type:'map',
map:'china',
label: {
show:false,
},
emphasis:{
label:{
show:false,
},
},
regions: [{ // 隱藏南海諸島
name: '南海諸島',
itemStyle: {
opacity:0,
}
}],
},
series: [{ // 含引導線的省份，用lines實現
type: 'lines',
symbol:'circle',
symbolSize:[6,4],
label:{
show:true,
formatter:'{b}{c}份'
},
lineStyle:{
type:'dotted',
shadowBlur:3,
},
data:dataLines(['山西','陝西','寧夏','甘肅','河北','山東','河南','安徽','湖北','江西',
'福建','海南','重慶','雲南','廣西','貴州','湖南'],data),
},
{ // 沒有引導線的省份，用scatter實現
type: 'scatter',
coordinateSystem:'geo',
symbolSize:6,
label:{
show:true,
position:'bottom',
formatter:'{b}{@[2]}份',
},
itemStyle:{
color:'#00f',
},
data:dataScatter(['黑龍江','吉林','遼寧','內蒙古','四川','青海','新疆','西藏'],data),
}]
};
方法二：引導線用map中的markLine實現，其它用map中的label實現。
此方法僅供參考，不推薦。
var data=[
{name: '重慶',value: Math.round(Math.random()*1000)},
{name: '河北',value: Math.round(Math.random()*1000)},
{name: '河南',value: Math.round(Math.random()*1000)},
{name: '雲南',value: Math.round(Math.random()*1000)},
{name: '遼寧',value: Math.round(Math.random()*1000),label:{show:true}},
{name: '黑龍江',value: Math.round(Math.random()*1000),label:{show:true}},
{name: '湖南',value: Math.round(Math.random()*1000)},
{name: '安徽',value: Math.round(Math.random()*1000)},
{name: '山東',value: Math.round(Math.random()*1000)},
{name: '新疆',value: Math.round(Math.random()*1000),label:{show:true}},
{name: '江西',value: Math.round(Math.random()*1000)},
{name: '湖北',value: Math.round(Math.random()*1000)},
{name: '廣西',value: Math.round(Math.random()*1000)},
{name: '甘肅',value: Math.round(Math.random()*1000)},
{name: '山西',value: Math.round(Math.random()*1000)},
{name: '內蒙古',value: Math.round(Math.random()*1000),label:{show:true}},
{name: '陝西',value: Math.round(Math.random()*1000)},
{name: '吉林',value: Math.round(Math.random()*1000),label:{show:true}},
{name: '福建',value: Math.round(Math.random()*1000)},
{name: '貴州',value: Math.round(Math.random()*1000)},
{name: '青海',value: Math.round(Math.random()*1000),label:{show:true}},
{name: '西藏',value: Math.round(Math.random()*1000),label:{show:true}},
{name: '四川',value: Math.round(Math.random()*1000),label:{show:true}},
{name: '寧夏',value: Math.round(Math.random()*1000)},
{name: '海南',value: Math.round(Math.random()*1000)},
{name: '南海諸島',itemStyle:{normal:{opacity:0,}}}
]
option = {
legend:{},
series: [{
type: 'map',
map: 'china',
roam: false,
label: {
show:false,
},
data:data,
markLine:{
lineStyle:{
type:'dotted',
},
data: [
[
{name:"河北",x: "58%",y: "45%",symbol:'none'},
{x: "68.6%",y: "45%",symbol:'circle',symbolSize:5},
],
[
{name:"山東",x: "59.6%",y: "48.1%",symbol:'none'},
{x: "74%",y: "48.1%",symbol:'circle',symbolSize:5},
],
[
{name:"河南",x: "57.2%",y: "52.4%",symbol:'none'},
{x: "68.6%",y: "52.4%",symbol:'circle',symbolSize:5},
],
[
{name:"安徽",x: "60%",y: "58.8%",symbol:'none'},
{x: "74%",y: "58.8%",symbol:'circle',symbolSize:5},
],
[
{name:"湖北",x: "57.6%",y: "62%",symbol:'none'},
{x: "68.6%",y: "62%",symbol:'circle',symbolSize:5},
],
[
{name:"江西",x: "58.6%",y: "66%",symbol:'none'},
{x: "74%",y: "66%",symbol:'circle',symbolSize:5},
],
[
{name:"福建",x: "61.3%",y: "72%",symbol:'none'},
{x: "68.6%",y: "72%",symbol:'circle',symbolSize:5},
],
[
{name:"海南",x: "54.6%",y: "85.8%",symbol:'none'},
{x: "62%",y: "85.8%",symbol:'circle',symbolSize:5},
],
[
{name:"重慶",x: "51.5%",y: "64.3%",symbol:'none'},
{x: "30%",y: "64.3%",symbol:'circle',symbolSize:5},
],
[
{name:"雲南",x: "49%",y: "74.5%",symbol:'none'},
{x: "40%",y: "74.5%",symbol:'circle',symbolSize:5},
],
[
{name:"廣西",x: "53%",y: "79.3%",symbol:'none'},
{x: "30%",y: "79.3%",symbol:'circle',symbolSize:5},
],
[
{name:"貴州",x: "52%",y: "71%",symbol:'none'},
{x: "52%",y: "93%",symbol:'circle',symbolSize:5},
],
[
{name:"湖南",x: "57%",y: "68%",symbol:'none'},
{x: "57%",y: "93%",symbol:'circle',symbolSize:5},
],
[
{name:"甘肅",x: "49.6%",y: "50%",symbol:'none'},
{x: "49.6%",y: "16%",symbol:'circle',symbolSize:5},
],
[
{name:"寧夏",x: "51.6%",y: "44%",symbol:'none'},
{x: "51.6%",y: "27%",symbol:'circle',symbolSize:5},
],
[
{name:"陝西",x: "53.8%",y: "53%",symbol:'none'},
{x: "53.8%",y: "16%",symbol:'circle',symbolSize:5},
],
[
{name:"山西",x: "56.7%",y: "46%",symbol:'none'},
{x: "56.7%",y: "25%",symbol:'circle',symbolSize:5},
],
]
}
}]
}