Echarts实战案例代码(59)：geomap实现飞线、散点、引导线以及重叠label的解决
数据格式转化
//数据格式转化
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