ECharts中国地图 显示铁路 悬浮提示 点击铁路弹出layui弹框提示
所有数据展示都为静态数据
<div class="map" id="chinaMap">div>
<style>
.map{
width:calc(100% - 20%);
height:100%;
}
style>
var init_chinaMap = function(path){
var geoCoordMap=null;
var mapOption = {
tooltip: {
formatter:function(params,ticket, callback){
if (params.seriesIndex == 0 ){//当鼠标放在城市圈上不显示提示信息
return '';
}
//只有悬浮铁路才会出现提示框
var start = params.data.fromName;
var end = params.data.toName;
//这里的四个数据 需要从后台获取 此处写ajax就好
var gjxmsltip=0;
var ztjtip=0;
var bntzjhtip=0;
var tzwctip=0;
let res = "" +
""
+start+"-"+end+"电铁配电工程"
+""
+"挂接项目数量："
+gjxmsltip+""
+"总投资："
+ztjtip+""
+"本年投资计划："
+bntzjhtip+"万元"
+"投资完成："
+tzwctip+"万元"
+""
+"";
return res;
},
backgroundColor:'white',
padding:0
},
geo: {
map: 'china',
roam: true,
zoom:1.23,
label: {
emphasis: {
show: false,
color:'#fff'
}
},
itemStyle: {
normal:{
borderColor: '#DCDFE1',//省边界颜色
areaColor:'#8FCAF1'//地图颜色
},
emphasis:{
areaColor: '#F3B329'//懸浮顏色
}
}
},
series : [
//圆圈
{
name: '城市',
type: 'effectScatter',//圆圈涟漪
coordinateSystem: 'geo',
zlevel: 3,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}',
color: '#fff'
}
},
symbolSize: 8,//圆圈大小
itemStyle: {
normal: {
color: 'yellow'//圆圈颜色
}
},
data: cities
},{//白线
name: '白线',
type: 'lines',
selectedMode: 'single', //添加点击事件 此处必须设置
zlevel: 2,//zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
effect: {
show: true,//是否显示特效
period: 6,//特效动画时间
trailLength: 0.7,//特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。
color: '#F3B329',
symbolSize: 1//线两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定
},
symbol: ['none','diamond'],//无-->箭头使用arrow
lineStyle: {
normal: {
color: '#fff',
opacity: 0.3,
width: 3,
type:"dashed",//虚线
// curveness: 0.2 //线条弧度 默认为直线
}
},
data: path
},{//黑线
name: '黑线',
type: 'lines',
selectedMode: 'single', //添加点击事件 此处必须设置
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#aaa',
symbolSize: 1
},
symbol: ['none','diamond'],//arrow
lineStyle: {
normal: {
color: '#000',
opacity: 0.3,
width: 2,
}
},
data: path
}
]
};
$chinaMap.setOption(mapOption, true);
$chinaMap.resize();
$chinaMap.on('click', function(params){
console.log(params);//此处写点击事件内容
if(params.componentType=="series"){
var start = params.data.fromName;
var end = params.data.toName;
mapModal(start,end);
}
});
}
/**
* 地图弹出层
*/
var mapModal = function(start,end){
layui.use('layer', function(){
if(layerMap != null){
layer.close(layerMap);
};
layerMap=layer.open({
title: start+'-'+end+'电铁配套工程',
type:1,
offset:['67%','14.5%'],
shade: 0,
skin: 'demo-class',//设置标题背景色为白色
content: `
`,
area: ['54%','30%']
})
layer.ready(function(){
//初始化表头
initMaptable(global.mapRepID);
});
});
}
/**
* 初始化地图表格控件
*/
var initMaptable = function(repId){
//获取表头 此处封装了ajax从数据库获取表头
var finaltitle = mCommon.getTitle(ajaxPath, repId);
var leftcols = finaltitle.leftcols;
var rightcols= finaltitle.rightcols;
//此处应ajax获取后端数据
$(".mapGrid").datagrid({
frozenColumns:leftcols,
columns:rightcols,
fitColumns:true,
singleSelect: true,
data: [{id:'-1',itemname:'请先查询数据!',bgcolor:'#fff000'}],
})
$(".mapGrid").datagrid('loadData',mapTipList);
};
静态数据：
var mapTipList = [{
itemname:'京杭铁路',
itemcode:'1111',
compname:'10001',
totalinvestment:'200',
yearinvestplan:'2000',
yearinvestcomplete:'333'
}];
var BJData = [[{'name': '广东'}, {'name': '贵州'}],[{'name': '山西'}, {'name': '新疆'}],[{'name': '吉林'}, {'name': '广西壮族自治区'}],[{'name': '内蒙古自治区'}, {'name': '西藏'}],[{'name': '北京'}, {'name': '香港特別行政区'}],[{'name': '福建'}, {'name': '云南'}]];
var path = convertData(BJData);
init_chinaMap(path);//地图
/**
* 转换数据
* 将
* {
'name': '广州'
}, {
'name': '广西'
}
转换成{"fromName":"广东","toName":"广西","coords":[[113.2563,23.1297],[108.3592,22.8205]]}
*/
var convertData = function(data) {
var res = [];
var geoCoordMap = AREANAME;//AREANAME为获取的js中数据
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({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [toCoord, fromCoord]
});
}
}
console.log(res);
return res;
};
城市数据 geoCoordMap 对应链接js
链接：https://pan.baidu.com/s/1Zui0JoI79fWlCsafcOZxKA
提取码：emn5