offLineMap(regions) {
let _this = this;
_this.chinaMapData = require('../../public/datas/china/china.json');
_this.provinceMapData = {
'上海市': require('../../public/datas/province/data-1482909900836-H1BC_1WHg.json'),
'河北省': require('../../public/datas/province/data-1482909768458-HJlU_yWBe.json'),
'山西省': require('../../public/datas/province/data-1482909909703-SyCA_JbSg.json'),
'内蒙古自治区': require('../../public/datas/province/data-1482909841923-rkqqdyZSe.json'),
'辽宁省': require('../../public/datas/province/data-1482909836074-rJV9O1-Hg.json'),
'吉林省': require('../../public/datas/province/data-1482909832739-rJ-cdy-Hx.json'),
'黑龙江省': require('../../public/datas/province/data-1482909803892-Hy4__J-Sx.json'),
'江苏省': require('../../public/datas/province/data-1482909823260-HkDtOJZBx.json'),
'浙江省': require('../../public/datas/province/data-1482909960637-rkZMYkZBx.json'),
'安徽省': require('../../public/datas/province/data-1482909768458-HJlU_yWBe.json'),
'福建省': require('../../public/datas/province/data-1478782908884-B1H6yezWe.json'),
'江西省': require('../../public/datas/province/data-1482909827542-r12YOJWHe.json'),
'山东省': require('../../public/datas/province/data-1482909892121-BJ3auk-Se.json'),
'河南省': require('../../public/datas/province/data-1482909807135-SJPudkWre.json'),
'湖北省': require('../../public/datas/province/data-1482909813213-Hy6u_kbrl.json'),
'湖南省': require('../../public/datas/province/data-1482909818685-H17FOkZSl.json'),
'广东省': require('../../public/datas/province/data-1482909784051-BJgwuy-Sl.json'),
'广西壮族自治区': require('../../public/datas/province/data-1482909787648-SyEPuJbSg.json'),
'海南省': require('../../public/datas/province/data-1482909796480-H12P_J-Bg.json'),
'四川省': require('../../public/datas/province/data-1482909931094-H17eKk-rg.json'),
'贵州省': require('../../public/datas/province/data-1482909791334-Bkwvd1bBe.json'),
'云南省': require('../../public/datas/province/data-1482909957601-HkA-FyWSx.json'),
'西藏自治区': require('../../public/datas/province/data-1482927407942-SkOV6Qbrl.json'),
'陕西省': require('../../public/datas/province/data-1508990012125-SyVBnCCab.json'),
'甘肃省': require('../../public/datas/province/data-1482909780863-r1aIdyWHl.json'),
'青海省': require('../../public/datas/province/data-1482909853618-B1IiOyZSl.json'),
'宁夏': require('../../public/datas/province/data-1482909848690-HJWiuy-Bg.json'),
'新疆维吾尔自治区': require('../../public/datas/province/data-1482909952731-B1YZKkbBx.json'),
'北京市': require('../../public/datas/province/data-1482818963027-Hko9SKJrg.json'),
'天津市': require('../../public/datas/province/data-1482909944620-r1-WKyWHg.json'),
'重庆市': require('../../public/datas/province/data-1482909775470-HJDIdk-Se.json'),
'香港特别行政区': require('../../public/datas/province/data-1461584707906-r1hSmtsx.json'),
'澳门特别行政区': require('../../public/datas/province/data-1482909771696-ByVIdJWBx.json')
};
let timer = null; // 单击地图定时器
let myChart = this.$echarts.init(this.$refs.chinaMap);
//各省份的地图json文件
$('<div class="back">返 回</div>').appendTo(
$('.contrast')
);
$('.back').css({
'position': 'absolute',
'right': '25px',
'bottom': '40px',
'color': 'white',
'font-size': '12px',
cursor: 'pointer',
'z-index': '100',
'border-radius': '4px',
'padding': '4px 10px',
'backgroundColor': '#169BD5'
})
$('.back').click(function () {
loadMap(_this.chinaMapData, 'china', true, _this.chinaMapData.features); //初始化全国地图
if(_this.blackBtnFlag) {
// _this.getAlarmData(_this.yearValue);
_this.isCompare(_this.compareValue);
_this.mapSelectedData = []; // 存储多个地图对象
_this.blackBtnFlag = false;
}
})
loadMap(_this.chinaMapData, 'china', true, _this.chinaMapData.features); //初始化全国地图
//单击切换到省级地图,当mapCode有值,说明可以切换到下级地图
myChart.off('click');
myChart.on('click', echartsMapClick);
// 绑定双击事件,返回全国地图
myChart.off('dblclick');
myChart.on('dblclick', echartsMapDblClick);
//生成数据
_this.mapData = [], _this.companyName = [];
function getMapData(mapDatas) {
_this.mapData = [], _this.companyName = [];
for (let j = 0; j < mapDatas.length; j++) {
let value = Math.random() * 3000;
_this.mapData.push({ // 全国省市数据
name: mapDatas[j].properties.name,
value: value,
level: mapDatas[j].properties.level,// 'province',
cityCode: mapDatas[j].properties.adcode
});
}
_this.mapData = _this.mapData.sort(function (a, b) {
return b.value - a.value
});
// }
}
/**
获取对应的json地图数据,然后向echarts注册该区域的地图,最后加载地图信息
@params {String} mapCode:json数据的地址
@params {String} name: 地图名称
*/
function loadMap(mapCode, name, labelFlag, mapDatas) {
getMapData(mapDatas);
if (mapCode) {
echarts.registerMap(name, mapCode);
_this.mapOption = {
tooltip: { // 无效
show: true,
formatter: function (params) {
if (params.data) return params.name + ':' + params.data['value']
},
},
title: [
{
left: 'center',
top: 10,
text: _this.yearValue + '年报警次数(单位:万)',
textStyle: {
color: 'rgb(179, 239, 255)',
fontSize: 16
},
}
],
zoom: 1.4, // 地图的缩放等级 一次性放大的大小
visualMap: {
textStyle: {
color: '#fff'
},
type: 'piecewise',
pieces: [
{
max: 30,
label: '报警次数排名第三',
color: '#2c9a42'
},
{
min: 30,
max: 60,
label: '报警次数排名第二',
color: '#d08a00'
},
{
min: 60,
label: '报警次数排名第一',
color: '#c23c33'
},
],
},
series: [
{
name: '报警次数',
type: 'map',
coordinateSystem: 'geo',
// mapType: name,
data: _this.mapData,
}
],
geo: {
selectedMode: " single ", // multiple(多选) single(单选)
map: name,
zoom: 1.2,
roam: true,
label: {
normal: {
show: true,
color: "rgb(249, 249, 249)", //省份标签字体颜色
formatter: p => {
return p.name + " " + _this.getDataByProvince(p.name);
}
},
emphasis: {
show: true,
color: '#f75a00',
}
},
regions: regions,
itemStyle: {
normal: {
areaColor: '#24CFF4', //
borderColor: '#53D9FF',
borderWidth: 1.3,
shadowBlur: 6,
shadowColor: 'rgb(58,115,192)',
shadowOffsetX: 6,
shadowOffsetY: 6,
},
emphasis: {
areaColor: '#d50000', // '#8dd7fc' #d50000,
borderWidth: 1.6,
shadowBlur: 10,
}
},
},
};
myChart.setOption(_this.mapOption, true);
}
else {
alert('无法加载该地图');
}
}
//echarts双击事件
function echartsMapDblClick(params) {
clearTimeout(timer);
let provinceName = params.name; //地区name
let mapCode = _this.provinceMapData[provinceName]; //地区的json数据
if (!mapCode) {
return;
};
loadMap(mapCode, provinceName, false, _this.provinceMapData[provinceName].features);
// 双击事件处理的裸机代码
}
// echarts 单击事件
_this.mapSelectedData = []; // 存储多个地图对象
function echartsMapClick(params) {
clearTimeout(timer);
timer = setTimeout(function () {
// console.log("单击");
if (params) {
let provinceName = params.name; //地区name
console.log(provinceName);
// 否则从数组中删除对应的省份数据
if (params.region.selected) {
// 选中省份逻辑代码
}
else {
// 取消选中逻辑代码
}
}
}, 300);
}
},
echarts 加载地图双击地图下深
最新推荐文章于 2023-12-27 16:49:55 发布