数据格式转化
//数据格式转化 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(); });
案例分析
- 1.重叠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; } } },
- 2.引导线
{ 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 }
- 3.发射中心散点图：发射中心单独颜色的散点图，或在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
