數(shù)據(jù)格式轉(zhuǎn)化

//數(shù)據(jù)格式轉(zhuǎn)化var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var dataItem = data[i];var fromCoord = geoCoordMap[dataItem[0].name];var toCoord = geoCoordMap[dataItem[1].name];if (fromCoord && toCoord) {res.push([{coord: fromCoord}, {coord: toCoord}]);}}return res;};

構(gòu)建地圖數(shù)據(jù)序列組件series

//圖表數(shù)據(jù)var series = [];/*飛線圖屬性設(shè)置*/var color = ['#3ed4ff', '#FF8888', '#a6c84c'];[['襄陽公安處', dictDatas1]].forEach(function (item, i) {series.push({type: 'map',name: '區(qū)域統(tǒng)計(jì)',map: '湖北省',roam: false,//禁止縮放zoom: 1.25,//默認(rèn)顯示比例itemStyle: {areaColor: '#1e2b57',borderColor: '#195BB9',borderWidth: 1},emphasis: {areaColor: '#2B91B7'}}, {name: '襄陽公安處',type: 'lines',zlevel: 1,effect: {show: true,color: color[i],period: 4, //箭頭指向速度，值越小速度越快trailLength: 0.02, //特效尾跡長度[0,1]值越大，尾跡越長重symbol: 'arrow', //箭頭圖標(biāo)symbolSize: 5, //圖標(biāo)大小},lineStyle: {color: color[i],width: 1, //尾跡線條寬度opacity: 0, //尾跡線條透明度curveness: 0.3, //尾跡線條曲直度},data: convertData(item[1])}, {//引導(dǎo)線type: 'lines',z: 3,coordinateSystem: 'geo',symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',symbolSize: [10, 0],//只保留地圖端標(biāo)記opacity: 1,label: {show: true,position: 'end',formatter: function (params) {//文本提示框return params.name;},color: "#000",fontSize: 14,padding: 5,backgroundColor: '#eee',borderColor: '#FF0033',borderWidth: 1,borderRadius: 5,},lineStyle: { //視覺引導(dǎo)線屬性type: 'solid',opacity: 1,color: '#EEE', //引導(dǎo)線顏色curveness: 0.1},data: COORDS_LINE}, {//散點(diǎn)圖name: '',type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {brushType: 'stroke'},label: {show: true,color: '#FFF',//字體顏色position: 'right',fontSize: 8,formatter: function (params) {//console.log(params.name);if (params.name == "刑警一大隊(duì)" || params.name == "襄陽東所" || params.name == "襄陽北所" || params.name == "襄陽所" || params.name == "襄州所") {return "";} else {return params.name;}}},symbolSize: 10,itemStyle: {color: '#c53534',//散點(diǎn)顏色},data: pois}, {//發(fā)射中心散點(diǎn)圖name: '',type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {brushType: 'stroke'},label: {show: true,color: '#FFF',//字體顏色position: 'right',fontSize: 8,formatter: function (params) {//console.log(params.name);if (params.name == "刑警一大隊(duì)" || params.name == "襄陽東所" || params.name == "襄陽北所" || params.name == "襄陽所" || params.name == "襄州所") {return "";} else {return params.name;}}},symbolSize: 10,itemStyle: {color: '#3ed4ff',//散點(diǎn)顏色},data: poisCenter});});

配置選項(xiàng)參數(shù)

//地圖初始化var myChart = echarts.init(document.getElementById('map'));var option = {backgroundColor: '#1e2b57',//背景顏色title: {text: '湖北省地圖',//主標(biāo)題subtext: '遷徙圖 2021-12-28',//副標(biāo)題x: 'center',y: '5%',textStyle: {color: '#fff'}},tooltip: {show: true,formatter: "{b}"},geo: {map: '湖北省',//注冊地圖roam: false,//禁止縮放zoom: 1.25,//默認(rèn)顯示比例zlevel: -10,itemStyle: {opacity: 0}},series: series};//防止重復(fù)觸發(fā)點(diǎn)擊事件if (myChart._$handlers.click) {myChart._$handlers.click.length = 0;}//地圖點(diǎn)擊事件:彈出窗；myChart.on('click', function (params) {console.log(params);if (params.componentIndex == 3) {window.open(params.data.links);}});//自適應(yīng);myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});

案例分析

重疊label的解決方案： 先對重疊的label進(jìn)行隱藏，然后單獨(dú)做引導(dǎo)線效果。

label: {show: true,color: '#FFF',//字體顏色position: 'right',fontSize: 8,formatter: function (params) {//console.log(params.name);if (params.name == "刑警一大隊(duì)" || params.name == "襄陽東所" || params.name == "襄陽北所" || params.name == "襄陽所" || params.name == "襄州所") {return "";} else {return params.name;}}},

引導(dǎo)線

{type: 'lines',z: 3,coordinateSystem: 'geo',symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',symbolSize: [10, 0],//只保留地圖端標(biāo)記opacity: 1,label: {show: true,position: 'end',formatter: function (params) {//文本提示框return params.name;},color: "#000",fontSize: 14,padding: 5,backgroundColor: '#eee',borderColor: '#FF0033',borderWidth: 1,borderRadius: 5,},lineStyle: { //視覺引導(dǎo)線屬性type: 'solid',opacity: 1,color: '#EEE', //引導(dǎo)線顏色curveness: 0.1},data: COORDS_LINE}

發(fā)射中心散點(diǎn)圖：發(fā)射中心單獨(dú)顏色的散點(diǎn)圖，或在itemStyle按照名稱判斷顯示；

{name: '',type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {brushType: 'stroke'},label: {show: true,color: '#FFF',//字體顏色position: 'right',fontSize: 8,formatter: function (params) {//console.log(params.name);if (params.name == "刑警一大隊(duì)" || params.name == "襄陽東所" || params.name == "襄陽北所" || params.name == "襄陽所" || params.name == "襄州所") {return "";} else {return params.name;}}},symbolSize: 10,itemStyle: {color: '#3ed4ff',//散點(diǎn)顏色},data: poisCenter});

@lockdata.cn

總結(jié)

以上是生活随笔為你收集整理的Echarts实战案例代码(59)：geomap实现飞线、散点、引导线以及重叠label的解决的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。