數據格式轉化

//數據格式轉化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;};

構建地圖數據序列組件series

//圖表數據var series = [];/*飛線圖屬性設置*/var color = ['#3ed4ff', '#FF8888', '#a6c84c'];[['襄陽公安處', dictDatas1]].forEach(function (item, i) {series.push({type: 'map',name: '區域統計',map: '湖北省',roam: false,//禁止縮放zoom: 1.25,//默認顯示比例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', //箭頭圖標symbolSize: 5, //圖標大小},lineStyle: {color: color[i],width: 1, //尾跡線條寬度opacity: 0, //尾跡線條透明度curveness: 0.3, //尾跡線條曲直度},data: convertData(item[1])}, {//引導線type: 'lines',z: 3,coordinateSystem: 'geo',symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',symbolSize: [10, 0],//只保留地圖端標記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: { //視覺引導線屬性type: 'solid',opacity: 1,color: '#EEE', //引導線顏色curveness: 0.1},data: COORDS_LINE}, {//散點圖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 == "刑警一大隊" || params.name == "襄陽東所" || params.name == "襄陽北所" || params.name == "襄陽所" || params.name == "襄州所") {return "";} else {return params.name;}}},symbolSize: 10,itemStyle: {color: '#c53534',//散點顏色},data: pois}, {//發射中心散點圖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 == "刑警一大隊" || params.name == "襄陽東所" || params.name == "襄陽北所" || params.name == "襄陽所" || params.name == "襄州所") {return "";} else {return params.name;}}},symbolSize: 10,itemStyle: {color: '#3ed4ff',//散點顏色},data: poisCenter});});

配置選項參數

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

案例分析

重疊label的解決方案： 先對重疊的label進行隱藏，然后單獨做引導線效果。

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

引導線

{type: 'lines',z: 3,coordinateSystem: 'geo',symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',symbolSize: [10, 0],//只保留地圖端標記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: { //視覺引導線屬性type: 'solid',opacity: 1,color: '#EEE', //引導線顏色curveness: 0.1},data: COORDS_LINE}

發射中心散點圖：發射中心單獨顏色的散點圖，或在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 == "刑警一大隊" || params.name == "襄陽東所" || params.name == "襄陽北所" || params.name == "襄陽所" || params.name == "襄州所") {return "";} else {return params.name;}}},symbolSize: 10,itemStyle: {color: '#3ed4ff',//散點顏色},data: poisCenter});

@lockdata.cn

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。