ECharts中国地图悬浮提示点击铁路弹出layui弹框提示

所有数据展示都为静态数据

<div class="map" id="chinaMap"></div>
<style>
<!--宽度自定义，这里为计算比例所得 有兴趣可以学习calc()-->
.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 = "<div>" +"<p style='padding-left:10px;padding-right:20px;font-size:0.07rem;height:0.25rem;line-height:0.25rem;background:#4CA6A6;color:white;'>"+start+"-"+end+"测试名称</p>"+"<div style='margin:10px;color:#000;'>" +"<p>数量："+gjxmsltip+"</p>"+"<p>总："+ztjtip+"</p>"+"<p>计划："+bntzjhtip+"万元</p>"+"<p>完成："+tzwctip+"万元</p>"+"</div>"+"</div>";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'],//无-->箭头使用arrowlineStyle: {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'],//arrowlineStyle: {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: `<div style="height:100%; width:100%; background-color:#FFF; padding:5px;"><table class="easyui-datagrid mapGrid" style="height:100%; width:100%"></table></div>`,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

ECharts中国地图悬浮提示点击铁路弹出layui弹框提示相关推荐

【echarts 中国地图射线版本】vue实现中国地图航线动画效果，地图上添加散点效果【详细注释，通俗易懂】
先上效果图前置条件,必看首先你需要安装echarts并引入然后你需要下载china.json文件并注册引入,不然不生效当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
Echarts中国地图三级钻取
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站:https://www.captainai.net/dongkelun 前言最近其实一直在用Echa ...
Echarts中国地图各省份区域设置不同的颜色
摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...
Echarts中国地图背景颜色渐变
摘要:关于Echarts地图的问题,在第一篇就说过引入等相关问题(如还有疑惑请先看之前的文章传送门).地图的背景颜色如何实现渐变呢?主要利用的是Echarts中的geo和visualMap结合实现.v ...
Echarts中国地图修改
前言在使用Echarts图表时需要修改中国地图中的样式以及内容,在网上查找了一些资料并且整理了一下. Echarts中国地图地图样式修改标题修改数值功能删除,但保留数据计算按钮功能去除地图 ...
echarts 中国地图世界地图
最近项目中用到了echarts 中国地图世界地图,特在这记录一下. world.js 下载链接(world_new.js带有中国地区名称,另一个只是用来显示中国地图) 链接:https://pan. ...
VUE 中实现echarts中国地图人口迁徙
VUE 中实现echarts中国地图人口迁徙效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...
HTML中地图根据数据变色,echarts中国地图根据数据对省份渲染不同的颜色
echarts中国地图 .centerItem { width: 856px; height: 640px; background-color: #fff; margin: 110px auto 0 ...
【echarts 中国地图增加南海九段线】
echarts 中国地图增加南海九段线最近在开发echarts 中国地图时,客户提出中国地图要完整,需要增加南海九段线. 这是个政治任务,但是echarts里面的文档没有关于南海诸岛九段线的相关配置 ...

ECharts中国地图悬浮提示点击铁路弹出layui弹框提示

所有数据展示都为静态数据

ECharts中国地图悬浮提示点击铁路弹出layui弹框提示相关推荐

最新文章

热门文章

ECharts中国地图 悬浮提示 点击铁路弹出layui弹框提示

所有数据展示都为静态数据

ECharts中国地图 悬浮提示 点击铁路弹出layui弹框提示相关推荐

最新文章

热门文章

ECharts中国地图悬浮提示点击铁路弹出layui弹框提示

ECharts中国地图悬浮提示点击铁路弹出layui弹框提示相关推荐