echarts全省地图下钻方法
因项目需求,使用echarts控件完成山东省地图下钻功能,现在把方法贴一下;
//随机生成各省市的数据
function randomData() {
return Math.round(Math.random()*50);
}
//地图下钻 使用switch 转换地图json文件
var mapChange=function(city){
var maps='shanDong';
switch(city){
case '济南市': maps='jinan';break;
case '德州市': maps='dezhou';break;
case '泰安市': maps='taian';break;
case '烟台市': maps='yantai';break;
case '淄博市': maps='zibo';break;
case '莱芜市': maps='laiwu';break;
case '日照市': maps='rizhao';break;
case '济宁市': maps='jining';break;
case '菏泽市': maps='heze';break;
case '威海市': maps='weihai';break;
case '枣庄市': maps='zaozhuang';break;
case '临沂市': maps='linyi';break;
case '滨州市': maps='binzhou';break;
case '东营市': maps='dongying';break;
case '潍坊市': maps='weifang';break;
case '聊城市': maps='liaocheng';break;
case '青岛市': maps='qingdao';break;
}
return maps;
};
//各市区下级县区方法
var cityMapsShow=function(city){
var chart = echarts.init(document.getElementById('cityMaps'));
chart.showLoading();
$.get('js/echarts/map/'+city+'.json', function (chinaJson) {
echarts.registerMap('cityMap', chinaJson);
chart.hideLoading();
chart.setOption({
title : {
text: '山东地图',
subtext: '充电桩调度',
left: 'left',
textStyle:{
color:'#fff',
fontStyle:'normal',
fontWeight:'normal',
fontFamily:'宋体',
fontSize:22
},
subtextStyle:{
color:'white',
fontStyle:'normal',
fontWeight:'normal',
fontFamily:'宋体',
fontSize:16
}
},
visualMap: {
min: 0,
max: 200,
left: '3%',
top: 'bottom',
text:['高','低'], // 文本，默认为数值文本
calculable : true,
textStyle:{
color:'white'
}
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'right',
top:'bottom',
data:['充电中','待机中','异常状态'],
textStyle:{
color:'#fff'
}
},
silent:false,
series: [
{
name:'充电中',
type: 'map',
map: 'cityMap',
roam:true,
scaleLimit:{
min:1.2,
max:4
},
showLengendSymbol:true,
label: {
normal: {
show: true,
textStyle:{
color:'blue',
}
},
emphasis: {
show: true,
textStyle:{
}
}
},
},
]
});
chart.on("dblclick",function(params){
var city=params.name;
mapChange(city);
document.getElementById('province').style.display='none';
document.getElementById('cityMaps').style.display='block';
});
});
};
//返回山东省全省地图
var provinceMaps=function(){
var chart = echarts.init(document.getElementById('province'));
chart.showLoading();
$.get('js/echarts/map/shanDong.json', function (chinaJson) {
echarts.registerMap('shanDong', chinaJson);
chart.hideLoading();
chart.setOption({
title : {
text: '山东地图',
subtext: '充电桩调度',
left: 'left',
textStyle:{
color:'#fff',
fontStyle:'normal',
fontWeight:'normal',
fontFamily:'宋体',
fontSize:22
},
subtextStyle:{
color:'white',
fontStyle:'normal',
fontWeight:'normal',
fontFamily:'宋体',
fontSize:16
}
},
visualMap: {
min: 0,
max: 200,
left: '3%',
top: 'bottom',
text:['高','低'], // 文本，默认为数值文本
calculable : true,
textStyle:{
color:'white'
}
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'right',
top:'bottom',
data:['充电中','待机中','异常状态'],
textStyle:{
color:'#fff'
}
},
silent:false,
series: [
{
name:'充电中',
type: 'map',
map: 'shanDong',
roam:true,
scaleLimit:{
min:1,
max:4
},
showLengendSymbol:true,
label: {
normal: {
show: true,
textStyle:{
color:'blue',
}
},
emphasis: {
show: true,
textStyle:{
}
}
},
data:[
{name:'济南市',value:randomData()},
{name:'德州市',value:randomData()},
{name:'青岛市',value:randomData()},
],
},
{
name:'待机中',
type: 'map',
map: 'shanDong',
roam:true,
scaleLimit:{
min:1,
max:4
},
showLengendSymbol:true,
label: {
normal: {
show: true,
textStyle:{
color:'blue',
}
},
emphasis: {
show: true,
textStyle:{
}
}
},
data:[
{name:'济南市',value:randomData()},
{name:'德州市',value:randomData()},
{name:'青岛市',value:randomData()},
],
},
{
name:'异常状态',
type: 'map',
map: 'shanDong',
roam:true,
scaleLimit:{
min:1,
max:4
},
showLengendSymbol:true,
label: {
normal: {
show: true,
textStyle:{
color:'blue',
}
},
emphasis: {
show: true,
textStyle:{
}
}
},
data:[
{name:'济南市',value:randomData()},
{name:'德州市',value:randomData()},
{name:'青岛市',value:randomData()},
],
},
]
});
chart.on("click",function(params){
var city=params.name;
var city1=mapChange(city);
document.getElementById('province').style.display='none';
document.getElementById('cityMaps').style.display='block';
cityMapsShow(city1);
});
});
};