echarts——地图map加引导线、labelLine效果

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},
                ],
            ]
        }
    }]
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章