$(document).ready(function () {
//首页运输铁路线
var myChart = echarts.init(document.getElementById('bannermap'));
var effect = {
show: true,
scaleSize: 1,
period: 40, // 运动周期，无单位，值越大越慢
color: '#fff',
shadowColor: 'rgba(220,220,220,0.4)',
shadowBlur: 5
};
function itemStyle(idx) {
return {
normal: {
color: '#fff',
borderWidth: 1,
borderColor: ['#ffbb00', '#ffbb00'][idx],
lineStyle: {
//shadowColor : ['rgba(30,144,255,1)','lime'][idx], //默认透明
//shadowBlur: 10,
//shadowOffsetX: 0,
//shadowOffsetY: 0,
type: 'solid'
}
}
}
};
option = {
tooltip: {
trigger: 'item',
formatter: '{b}'
},
toolbox: {
show: false,
orient: 'vertical',
x: 'right',
y: 'center',
feature: {
mark: {
show: false
},
dataView: {
show: false,
readOnly: false
},
restore: {
show: false
},
saveAsImage: {
show: false
}
}
},
series: [{
name: '八纵通道',
type: 'map',
roam: false,
hoverable: false,
mapType: 'china',
itemStyle: {
normal: {
borderColor: 'rgba(100,149,237,1)',
borderWidth: 0.5,
areaStyle: {
color: '#006bc7'
}
}
},
data: [],
markLine: {
symbol: ['circle', 'circle'],
symbolSize: 1,
effect: effect,
itemStyle: itemStyle(0),
smooth: true,
data: [
[{
name: '北京'
}, {
name: '哈尔滨'
}],
[{
name: '哈尔滨'
}, {
name: '满洲里'
}],
[{
name: '沈阳'
}, {
name: '大连'
}],
[{
name: '大连'
}, {
name: '烟台'
}],
[{
name: '烟台'
}, {
name: '青岛'
}],
[{
name: '青岛'
}, {
name: '淮安'
}],
[{
name: '淮安'
}, {
name: '上海'
}],
[{
name: '上海'
}, {
name: '杭州'
}],
[{
name: '杭州'
}, {
name: '宁波'
}],
[{
name: '宁波'
}, {
name: '温州'
}],
[{
name: '温州'
}, {
name: '福州'
}],
[{
name: '福州'
}, {
name: '厦门'
}],
[{
name: '厦门'
}, {
name: '广州'
}],
[{
name: '广州'
}, {
name: '湛江'
}],
[{
name: '北京'
}, {
name: '天津'
}],
[{
name: '天津'
}, {
name: '济南'
}],
[{
name: '济南'
}, {
name: '南京'
}],
[{
name: '南京'
}, {
name: '上海'
}],
[{
name: '北京'
}, {
name: '南昌'
}],
[{
name: '南昌'
}, {
name: '深圳'
}],
[{
name: '深圳'
}, {
name: '九龙红磡'
}],
[{
name: '北京'
}, {
name: '郑州'
}],
[{
name: '郑州'
}, {
name: '武汉'
}],
[{
name: '武汉'
}, {
name: '广州'
}],
[{
name: '大同'
}, {
name: '太原'
}],
[{
name: '太原'
}, {
name: '焦作'
}],
[{
name: '焦作'
}, {
name: '洛阳'
}],
[{
name: '洛阳'
}, {
name: '柳州'
}],
[{
name: '柳州'
}, {
name: '湛江'
}],
[{
name: '包头'
}, {
name: '西安'
}],
[{
name: '西安'
}, {
name: '重庆'
}],
[{
name: '重庆'
}, {
name: '贵阳'
}],
[{
name: '贵阳'
}, {
name: '柳州'
}],
[{
name: '柳州'
}, {
name: '南宁'
}],
[{
name: '兰州'
}, {
name: '成都'
}],
[{
name: '成都'
}, {
name: '昆明'
}]
]
}
},
{
name: '八横通道',
type: 'map',
mapType: 'china',
itedmStyle: {
normal: {
borderColor: 'rgba(100,149,237,1)',
borderWidth: 0.5,
areaStyle: {
color: '#1b1b1b'
}
}
},
data: [],
markLine: {
symbol: ['circle', 'circle'],
symbolSize: 1,
effect: effect,
itemStyle: itemStyle(1),
smooth: true,
data: [
[{
name: '北京'
}, {
name: '兰州'
}],
[{
name: '兰州'
}, {
name: '拉萨'
}],
[{
name: '大同'
}, {
name: '秦皇岛'
}],
[{
name: '神木'
}, {
name: '黄骅'
}],
[{
name: '太原'
}, {
name: '德州'
}],
[{
name: '德州'
}, {
name: '龙口'
}],
[{
name: '龙口'
}, {
name: '烟台'
}],
[{
name: '太原'
}, {
name: '德州'
}],
[{
name: '德州'
}, {
name: '济南'
}],
[{
name: '济南'
}, {
name: '青岛'
}],
[{
name: '长治'
}, {
name: '邯郸'
}],
[{
name: '邯郸'
}, {
name: '济南'
}],
[{
name: '济南'
}, {
name: '青岛'
}],
[{
name: '瓦塘'
}, {
name: '临汾'
}],
[{
name: '临汾'
}, {
name: '长治'
}],
[{
name: '长治'
}, {
name: '汤阴'
}],
[{
name: '汤阴'
}, {
name: '台前'
}],
[{
name: '台前'
}, {
name: '兖州'
}],
[{
name: '兖州'
}, {
name: '日照'
}],
[{
name: '侯马'
}, {
name: '月山'
}],
[{
name: '月山'
}, {
name: '新乡'
}],
[{
name: '新乡'
}, {
name: '兖州'
}],
[{
name: '兖州'
}, {
name: '日照'
}],
[{
name: '连云港'
}, {
name: '郑州'
}],
[{
name: '郑州'
}, {
name: '兰州'
}],
[{
name: '兰州'
}, {
name: '乌鲁木齐'
}],
[{
name: '乌鲁木齐'
}, {
name: '阿拉山口'
}],
[{
name: '西安'
}, {
name: '南阳'
}],
[{
name: '南阳'
}, {
name: '信阳'
}],
[{
name: '信阳'
}, {
name: '合肥'
}],
[{
name: '合肥'
}, {
name: '南京'
}],
[{
name: '南京'
}, {
name: '启东'
}],
[{
name: '重庆'
}, {
name: '武汉'
}],
[{
name: '武汉'
}, {
name: '九江'
}],
[{
name: '九江'
}, {
name: '铜陵'
}],
[{
name: '铜陵'
}, {
name: '南京'
}],
[{
name: '南京'
}, {
name: '上海'
}],
[{
name: '上海'
}, {
name: '怀化'
}],
[{
name: '怀化'
}, {
name: '重庆'
}],
[{
name: '重庆'
}, {
name: '成都'
}],
[{
name: '成都'
}, {
name: '贵阳'
}],
[{
name: '贵阳'
}, {
name: '昆明'
}],
[{
name: '昆明'
}, {
name: '南宁'
}],
[{
name: '南宁'
}, {
name: '黎塘'
}],
[{
name: '黎塘'
}, {
name: '湛江'
}]
]
},
geoCoord: {
'阿拉山口': [82.5757, 45.1706],
'包头': [109.8403, 40.6574],
'北京': [116.4075, 39.9040],
'成都': [104.0665, 30.5723],
'大连': [121.6147, 38.9140],
'大同': [113.3001, 40.0768],
'德州': [116.3575, 37.4341],
'福州': [119.2965, 26.0745],
'广州': [113.2644, 23.1292],
'贵阳': [106.6302, 26.6477],
'哈尔滨': [126.5363, 45.8023],
'邯郸': [114.5391, 36.6256],
'杭州': [120.1551, 30.2741],
'合肥': [117.2272, 31.8206],
'侯马': [111.3720, 35.6191],
'怀化': [109.9985, 27.5550],
'淮安': [119.0153, 33.6104],
'黄骅': [117.3300, 38.3714],
'济南': [117.1205, 36.6510],
'焦作': [113.2418, 35.2159],
'九江': [116.0019, 29.7051],
'九龙红磡': [114.1870, 22.3076],
'昆明': [102.8329, 24.8801],
'拉萨': [91.1409, 29.6456],
'兰州': [103.8343, 36.0611],
'黎塘': [109.1363, 23.2066],
'连云港': [119.2216, 34.5967],
'临汾': [111.5190, 36.0880],
'柳州': [109.4160, 24.3255],
'龙口': [120.4778, 37.6461],
'洛阳': [112.4540, 34.6197],
'满洲里': [117.3787, 49.5978],
'南昌': [115.8581, 28.6832],
'南京': [118.7969, 32.0603],
'南宁': [108.3661, 22.8172],
'南阳': [112.5283, 32.9908],
'宁波': [121.5440, 29.8683],
'启东': [121.6574, 31.8082],
'秦皇岛': [119.6005, 39.9354],
'青岛': [120.3826, 36.0671],
'日照': [119.5269, 35.4164],
'厦门': [118.0894, 24.4798],
'上海': [121.4737, 31.2304],
'深圳': [114.0579, 22.5431],
'神木': [110.4871, 38.8610],
'沈阳': [123.4315, 41.8057],
'台前': [115.8717, 35.9701],
'太原': [112.5489, 37.8706],
'汤阴': [114.3572, 35.9218],
'天津': [117.2010, 39.0842],
'铜陵': [117.8121, 30.9454],
'瓦塘': [109.7600, 23.3161],
'温州': [120.6994, 27.9943],
'乌鲁木齐': [87.6168, 43.8256],
'武汉': [114.3054, 30.5931],
'西安': [108.9402, 34.3416],
'新乡': [113.9268, 35.3030],
'信阳': [114.0913, 32.1470],
'烟台': [121.4479, 37.4638],
'兖州': [116.7838, 35.5531],
'月山': [113.0550, 35.2104],
'湛江': [110.3594, 21.2707],
'长治': [113.1163, 36.1954],
'郑州': [113.6254, 34.7466],
'重庆': [106.5516, 29.5630]
}
}
]
};
myChart.setOption(option);
//动态事件的调试
var ecConfig = echarts.config;
function eConsole(param) {
console.log(param.name);
}
myChart.on(ecConfig.EVENT.CLICK, eConsole);
});
//省市区三级联动
function AdrInputPopDiv() {
this.init = function (inpuId, isAbsolute) {
var areaboxDiv = null;
var initInput = null;
if (isAbsolute) {
$(".manage-wrapper").append($(provinceObjectDiv).html());
var areaboxDiv = $(".manage-wrapper").children(".areabox_t");
areaboxDiv.css('margin-left', '20px');
$(".manage-wrapper").on("click", ".areabox_city", function (e) {
var curThis = $(this);
var top = curThis.offset().top - curThis.outerHeight() - 5;
var left = 0;
areaboxDiv.css({
top: top,
left: left
});
if (initInput && curThis.offset().top != initInput.offset().top && areaboxDiv.is(":visible")) {
areaboxDiv.hide();
}
areaboxDiv.toggle(); //.css("display", "block");
initInput = $(this);
});
} else {
initInput = $("#" + inpuId);
var _wrap = $('');
initInput.wrap(_wrap);
initInput.parent().append($(provinceObjectDiv).html()).closest('div').css('overflow', 'visible');
areaboxDiv = initInput.parent().children(".areabox_t");
initInput.click(function (e) {
var areaboxClsDiv = initInput.closest(".areabox");
if (areaboxClsDiv.length > 0) {
var areaboxPar = $("#consignee", areaboxClsDiv).parent();
if (areaboxPar.hasClass("errorWrap")) {
areaboxPar.css("z-index", 996);
}
areaboxPar = $("#consignAdr", areaboxClsDiv).parent();
if (areaboxPar.hasClass("errorWrap")) {
areaboxPar.css("z-index", 994);
}
areaboxPar = $("#consignPhone", areaboxClsDiv).parent();
if (areaboxPar.hasClass("errorWrap")) {
areaboxPar.css("z-index", 993);
}
//areaboxPar = $("#initConsignAdrCity", areaboxClsDiv).parent();
//areaboxPar.css("z-index", 995).css("display", "");
}
areaboxDiv.toggle(); //.css("display", "block");
});
}
areaboxDiv.on('click', '.areabox_t_1 p', function (e) {
var idx = $(this).attr("idx");
$(this).parent().find("p").removeClass("hover");
areaboxDiv.find(".province").css("display", "none");
areaboxDiv.find(".city").css("display", "none");
areaboxDiv.find(".area").css("display", "none");
if (idx == 1) {
$(this).addClass("hover");
areaboxDiv.find(".province").css("display", "block");
} else if (idx == 2) {
$(this).addClass("hover");
areaboxDiv.find(".city").css("display", "block");
} else if (idx == 3) {
$(this).addClass("hover");
areaboxDiv.find(".area").css("display", "block");
} else if (idx == 4) {
$(this).addClass("hover");
initInput.trigger("click");
areaboxDiv.find('.areabox_t_1 p[idx=1]').trigger("click");
}
});
var selPro = "";
var selCity = "";
var proFullName = {
"北京": "北京",
"天津": "天津",
"内蒙古": "内蒙古自治区",
"上海": "上海",
"广西": "广西壮族自治区",
"重庆": "重庆",
"西藏": "西藏自治区",
"宁夏": "宁夏回族自治区",
"新疆": "新疆维吾尔自治区",
"香港": "香港特别行政区",
"澳门": "澳门特别行政区"
};
areaboxDiv.on('click', '.province .areabox_t_2_2 p', function (e) {
var pro = $(this).text();
if (proFullName[pro]) {
pro = proFullName[pro];
} else {
pro += "省";
}
selPro = pro;
if (inpuId == "prov") {
initInput.val(selPro);
initInput.trigger("click");
areaboxDiv.find('.areabox_t_1 p[idx=1]').trigger("click");
} else {
var areaDiv = areaboxDiv.find(".area .areabox_t_2 .areabox_t_2_2");
areaDiv.html("");
initInput.val(selPro);
var city = "";
$.each(provinceObject[pro], function (v) {
city += "" + v + "
";
});
var cityDiv = areaboxDiv.find(".city .areabox_t_2 .areabox_t_2_2");
cityDiv.html("");
$(city).appendTo(cityDiv);
areaboxDiv.find('.areabox_t_1 p[idx=2]').trigger("click");
initInput.val(selPro);
initInput.attr("title", initInput.val());
}
});
areaboxDiv.on('click', '.city .areabox_t_2_2 p', function (e) {
var city = $(this).text();
selCity = city;
var area = "";
$.each(provinceObject[selPro][city], function (idx, v) {
area += "" + v + "
";
});
var areaDiv = areaboxDiv.find(".area .areabox_t_2 .areabox_t_2_2");
areaDiv.html("");
$(area).appendTo(areaDiv);
areaboxDiv.find('.areabox_t_1 p[idx=3]').trigger("click");
initInput.val(selPro + selCity);
initInput.attr("title", initInput.val());
});
areaboxDiv.on('click', '.area .areabox_t_2_2 p', function (e) {
var area = $(this).text();
initInput.val(selPro + selCity + area);
initInput.attr("title", initInput.val());
initInput.trigger("click");
});
$(document).on('click', function (e) {
var target = e.target || e.srcElement;
if (target.id == inpuId) {
e.preventDefault();
return;
}
$('.areabox_t').each(function () {
if ($(target).closest(this).length == 0 && $(this).parent().find("input[id='" + inpuId + "']").attr("id") == inpuId && $(this).is(':visible')) {
$(this).hide();
}
});
});
$(".wrapper").off("keypress", ".areabox_city_detail").on('keypress', ".areabox_city_detail", function (e) {
var allowedReg = new RegExp('[,]');
var charCode = typeof e.charCode != 'undefined' ? e.charCode : e.keyCode;
var keyChar = String.fromCharCode(charCode);
if (allowedReg.test(keyChar)) {
e.preventDefault();
return;
};
}).off("blur", ".areabox_city_detail").on('blur', ".areabox_city_detail", function () {
var val = $(this).val();
if (val.indexOf(",") != -1) {
$(this).val(val.replace(/,/g, ''));
}
});
};
};
new AdrInputPopDiv().init("city", false);
new AdrInputPopDiv().init("city2", false);
new AdrInputPopDiv().init("prov", false);