You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@echarts.apache.org by GitBox <gi...@apache.org> on 2018/05/07 10:14:14 UTC
[GitHub] onlybabyou opened a new issue #8297: 在地图上添加了点击事件,跳转到省份后加载省级地图 visualMap中的pieces由3级减少到2级,但是我希望它不要减少
onlybabyou opened a new issue #8297: 在地图上添加了点击事件,跳转到省份后加载省级地图 visualMap中的pieces由3级减少到2级,但是我希望它不要减少
URL: https://github.com/apache/incubator-echarts/issues/8297
<script type="text/javascript">
var mapStack = [];
var curMap = {};
$(function () {
var provinces = {
//23个省
"台湾": "taiwan",
"河北": "hebei",
"山西": "shanxi",
"辽宁": "liaoning",
"吉林": "jilin",
"黑龙江": "heilongjiang",
"江苏": "jiangsu",
"浙江": "zhejiang",
"安徽": "anhui",
"福建": "fujian",
"江西": "jiangxi",
"山东": "shandong",
"河南": "henan",
"湖北": "hubei",
"湖南": "hunan",
"广东": "guangdong",
"海南": "hainan",
"四川": "sichuan",
"贵州": "guizhou",
"云南": "yunnan",
"陕西": "shanxi1",
"甘肃": "gansu",
"青海": "qinghai",
//5个自治区
"新疆": "xinjiang",
"广西": "guangxi",
"内蒙古": "neimenggu",
"宁夏": "ningxia",
"西藏": "xizang",
//4个直辖市
"北京": "beijing",
"天津": "tianjin",
"上海": "shanghai",
"重庆": "chongqing",
//2个特别行政区
"香港": "xianggang",
"澳门": "aomen",
"china": "china"
};
var geoCoordMap = {
"海南": [110.17, 19.92],
"河南": [113.700339, 34.751827],
"河北": [114.54095, 38.058913],
"湖北": [114.289984, 30.5942],
"广东": [113.293215, 23.102603],
"湖南": [113.03042, 28.188898],
"江西": [115.911671, 28.658012],
"黑龙江": [126.629804, 45.774197],
"四川": [104.112035, 30.630737],
"安徽": [117.321109, 31.850184],
}
var data = [{
name: '海南',
value: 925.73,
tooltip: { //单独为海南提示框设置内容
// formatter:'pp'
},
alarm_num: 54
}, {
name: '河南',
value: 737.01,
alarm_num: 51
}, {
name: '河北',
value: 177.64
}, {
name: '湖北',
value: 174.96,
alarm_num: 4
}, {
name: '广东',
value: 230.15
}, {
name: '湖南',
value: 173.05
}, {
name: '江西',
value: 723.08,
alarm_num: 22
}, {
name: '黑龙江',
value: 629.69
}, {
name: '四川',
value: 158.43,
alarm_num: 1
}, {
name: '安徽',
value: 930.80
},];
var oils = [{
name: '四川',
oil95: '75L',
oil93: '300L',
value: 930.80
}, {
name: '新疆',
oil95: '165L',
oil93: '200L',
value: 900.80
}, {
name: '黑龙江',
oil95: '3575L',
oil93: '800L',
value: 130.80
}, {
name: '北京',
oil95: '255L',
oil93: '1300L',
value: 230.80
}, {
name: '天津',
oil95: '895L',
oil93: '4300L',
value: 330.80
}, {
name: '河北',
oil95: '85L',
oil93: 400,
value: 90.80
}, {
name: '辽宁',
oil95: '385L',
oil93: 800,
value: 69.80
}]
var exclude = ['山东', '浙江', '福建', '广东'];
function convertData(data) {
var res = [];
for (var i = 0; i < data.features.length; i++) {
var geoCoord = cityMap[data.features[i].properties.name];
if (geoCoord) {
if(data.features.length - i > 0){
res.push({
name: data.features[i].properties.name,
value: parseInt(Math.random() * 100),
oil95: parseInt(Math.random() * 100),
oil93: parseInt(Math.random() * 100),
oil98: parseInt(Math.random() * 100),
oil0: parseInt(Math.random() * 100)
});
}
if(data.features.length - i == 1){
res.push({
name: data.features[i].properties.name,
value: parseInt(100),
oil95: parseInt(100),
oil93: parseInt(100),
oil98: parseInt(100),
oil0: parseInt(100)
});
}
}
}
return res;
};
var myChart = echarts.init(document.getElementById('main'));
//初始化地图
loadMap('china', 'china', 1);
myChart.on('mouseover', function (params) {
addpie(params.data)
});
myChart.on('mouseout', function (params) {
});
myChart.on('click', function (params) {
var name = params.name;
var mapCode = provinces[name];
var Ocity = undefined;
if (!mapCode) {
var Ocity = cityMap[name];
if (!Ocity) {
alert('无此区域地图显示');
return;
}
}
var mKey;
if (name in provinces) {
if (name == 'china') {
mKey = 1;
} else {
mKey = 2;
}
} else {
mKey = 3;
}
if (Ocity == undefined) {
//parent.addTab('省损益率综合分析','htmls/detail.html?mapCode='+mapCode+'&name='+name+'&mark='+mKey,'24','15',true);
loadMap(mapCode, name, mKey);
} else {
//parent.addTab('省损益率综合分析','htmls/detail.html?mapCode='+mapCode+'&name='+name+'&mark='+mKey,'24','15',true);
loadMap(Ocity, name, mKey);
}
//将上一级地图信息压入mapStack
if(mKey < 3){
mapStack.push({
mapCode: curMap.mapCode,
mapName: curMap.mapName,
mapMark: curMap.mapMark
});
}
});
myChart.on('contextmenu', function (params) {
$('#contextMenu').css({
left: params.event.offsetX,
top: params.event.offsetY
}).show();
});
$('#contextMenu').on('click', function () {
$(this).hide();
//获取上一级地图信息
var map = mapStack.pop();
if (!mapStack.length && !map) {
alert('已经到达最上一级地图了');
return;
}
loadMap(map.mapCode, map.mapName, map.mapMark);
});
function loadMap(mapCode, mapName, mark) {
var chartsURL;
if (mark == 1) {
chartsURL = "echarts3-chinese-map-drill-down-master/static/map/";
$('#backCountry').hide();
$('#leftMap').show();
$('#country').show();
$('#province').hide();
$('#city').hide();
} else if (mark == 2) {
chartsURL = "echarts3-chinese-map-drill-down-master/static/map/province/";
$('#backCountry').show();
$('#leftMap').show();
$('#province').show();
$('#country').hide();
$('#city').hide();
provinceDataGrid();
container_radar();
} else if (mark == 3) {
chartsURL = "echarts3-chinese-map-drill-down-master/static/map/province/";
$('#backCountry').hide();
$('#city').show();
$('#province').hide();
$('#country').hide();
$('#leftMap').hide();
$('#city').layout({});
yhysDataGrid();
}
$.getJSON(chartsURL + mapCode + '.json', function (datas) {
if (datas) {
echarts.registerMap(mapName, datas);
var option = {
tooltip: {
show: false
},
visualMap: {
type: 'piecewise', //分段型。
splitNumber: 3,
inverse: true,
pieces: [{
min: 0,
max: 60,
label: '0%-60%',
color: '#f2d643'
}, {
min: 60,
max: 80,
label: '60%-80%',
color: '#ffb248'
}, {
min: 80,
max: 100,
label: '80%-100%',
color: '#eb8146'
}],
left: 'left',
top: 'bottom',
textStyle: {
color: '#000'
}
},
grid: {
height: 200,
width: 8,
right: 80,
bottom: 10
},
title: {
text: '验收准确率',
left: 'center'
},
geo: {
show: true,
map: mapName,
roam: true,
center: 0,
label: {
color: '#8B6914',
normal: {
show: true,//初始化时显示省份名称
},
emphasis: {
show: false
//选中省份时显示tooltip数据
}
},
itemStyle: {
normal: {
areaColor: '#00CED1',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7',
}
}
},
series: [{
type: 'map',
map: mapName,
geoIndex: 0,
label: {
normal: {
show: true
},
emphasis: {
show: true,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: convertData(datas)
}]
};
myChart.setOption(option);
//存储当前地图的信息
curMap = {
mapCode: mapCode,
mapName: mapName,
mapMark: mark
};
} else {
alert('无法加载该地图');
}
});
}
});
</script>
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org