echart地图下钻
需求：展示中国地图，鼠标点击显示对应的省份
在echart的github上下载需要的 地图文件China.js,各个省份的json文件
遇到的问题：直接在浏览器打开报错，跨域问题，用webstrom打开是localhost的方式，是可以的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
width: 1000px;
height: 700px;
margin:0 auto;
position: relative;
}
#chinamap,#citymap{
display:inline-block;
z-index:1;
position: absolute;
}
#citymap{
position: absolute;
top:60px;
left:20px;
z-index:0;
}
</style>
</head>
<body>
<div class="wrap">
<div id="chinamap" style="width:100%;height:100%;"></div>
<div id="citymap" style="width:100%;height:100%;"></div>
</div>
<script src="jquery2.1.4.js"></script>
<script src="echarts.min.js"></script>
<script src="china.js"></script>
<script>
var myChart = echarts.init(document.getElementById('chinamap'));
var cityChart = echarts.init(document.getElementById('citymap'));
var provinces = {
'上海': '/mapdemo/map/json/province/shanghai.json',
'河北': '/mapdemo/map/json/province/hebei.json',
'山西': '/mapdemo/map/json/province/shanxi.json',
'内蒙古': '/mapdemo/map/json/province/neimenggu.json',
'辽宁': '/mapdemo/map/json/province/liaoning.json',
'吉林': '/mapdemo/map/json/province/jilin.json',
'黑龙江': '/mapdemo/map/json/province/heilongjiang.json',
'江苏': '/mapdemo/map/json/province/jiangsu.json',
'浙江': '/mapdemo/map/json/province/zhejiang.json',
'安徽': '/mapdemo/map/json/province/anhui.json',
'福建': '/mapdemo/map/json/province/fujian.json',
'江西': '/mapdemo/map/json/province/jiangxi.json',
'山东': '/mapdemo/map/json/province/shandong.json',
'河南': '/mapdemo/map/json/province/henan.json',
'湖北': '/mapdemo/map/json/province/hubei.json',
'湖南': '/mapdemo/map/json/province/hunan.json',
'广东': '/mapdemo/map/json/province/guangdong.json',
'广西': '/mapdemo/map/json/province/guangxi.json',
'海南': '/mapdemo/map/json/province/hainan.json',
'四川': '/mapdemo/map/json/province/sichuan.json',
'贵州': '/mapdemo/map/json/province/guizhou.json',
'云南': '/mapdemo/map/json/province/yunnan.json',
'西藏': '/mapdemo/map/json/province/xizang.json',
'陕西': '/mapdemo/map/json/province/shanxi.json',
'甘肃': '/mapdemo/map/json/province/gansu.json',
'青海': '/mapdemo/map/json/province/qinghai.json',
'宁夏': '/mapdemo/map/json/province/ningxia.json',
'新疆': '/mapdemo/map/json/province/xinjiang.json',
'北京': '/mapdemo/map/json/province/beijing.json',
'天津': '/mapdemo/map/json/province/tianjin.json',
'重庆': '/mapdemo/map/json/province/chongqing.json',
'香港': '/mapdemo/map/json/province/xianggang.json',
'澳门': '/mapdemo/map/json/province/aomen.json'
};
var data1 = [
{
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: '澳门'
}];
for (var i = 0; i < data1.length; i++) {
data1[i].value = Math.round(Math.random() * 10000);
}
option = {
backgroundColor: '#404a59',
tooltip: {
//trigger: 'item'
backgroundColor:"#ff7f50",//提示标签背景颜色
textStyle:{color:"#fff"} //提示标签字体颜色
},
toolbox: {
show: true,
orient: 'vertical',
x: 'right',
y: 'center',
feature: {
mark: {
// show: true
},
// dataView: {
// show: true,
// readOnly: false
// }
}
},
series: [{
name: '选择器',
type: 'map',
mapType: 'china',
// left: 'left',
// top: '25%',
// width: '50%',
// height:'50%',
// roam: true,
selectedMode: 'single',
showLegendSymbol:false,
// geo:{
// map: 'china',
// label: {
// normal: {
// //show: true, //显示省名称
// color: '#36c377',
// fontSize: 12,
// textStyle:{
// color:"#333", //显示省名称颜色
// }
// },
// emphasis: {
// show: true,
// color: '#5c401e',
// textStyle:{
// color:"#333"
// },
// fontSize: 12,
// },
// },
// roam: true,
// itemStyle: {
// normal: {
// areaColor: '#ffefd5',
// borderColor: '#58662f',
// shadowColor:'#6f913b',
// //shadowBlur: 2,
// shadowOffsetY: 5,
// shadowOffsetX: -4,
// //shadowColor: '#22220b',
// },
// emphasis: {
// areaColor: '#ffefd5',
// shadowOffsetX: 0,
// }
// }
// },
label: {
normal: {
show: true,//显示省份标签
textStyle:{color:"#333"},//省份标签字体颜色
},
emphasis: {//对应的鼠标悬浮效果
show: true,
textStyle:{color:"#333"}
}
},
itemStyle: {
normal: {
label: {
show: true,
// borderWidth: .5,//区域边框宽度
borderColor: '#009fe8',//区域边框颜色
areaColor:"#ffefd5",//区域颜色
},
// areaColor:"#ffefd5",//区域颜色
shadowColor:'#6f913b',
shadowBlur: 2,
shadowOffsetY: 5,
shadowOffsetX: -4
//shadowColor: '#22220b',
},
emphasis: {
label: {
show: true,
// borderWidth: .5,
// borderColor: '#4b0082',
//
},
areaColor:"#56d241bd",
}
},
data: data1
}],
animation: false
};
myChart.setOption(option, true);
var data2 = [
{
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: '陇南市'
}, {
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: '白山市'
}, {
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: '沈阳市'
}, {
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: '屯昌县'
}, {
name: '定安县'
}, {
name: '保亭黎族苗族自治县'
}, {
name: '五指山市'
}];
for (var i = 0; i < data2.length; i++) {
data2[i].value = Math.round(Math.random() * 1000);
}
//setTimeout(delay, 1000);
//function delay() {
//myChart.on("mapselectchanged", function (param)
myChart.on("click", function(param) {
var selectedProvince = param.name;
if (!provinces[selectedProvince]) {
option.series.splice(1);
option.legend = null;
option.visualMap = null;
cityChart.setOption(option, true);
return;
}
//$.get('http://echarts.baidu.com/gallery/vendors/echarts/map/json/province/' + provinces[selectedProvince] + '.json', function (geoJson) {
// console.log(provinces[selectedProvince]); /map/json/province/heilongjiang.json
$.get(provinces[selectedProvince], function(geoJson) {
// console.log(provinces[selectedProvince]);
echarts.registerMap(selectedProvince, geoJson);
option2 = {
series: {
name: '选择器',
type: 'map',
mapType: selectedProvince,
// left: '50%',
// top: '25%',
// width: '50%',
// height:'50%',
// roam: true,
// selectedMode: 'single',
itemStyle: {
normal: {
label: {
show: true,
borderColor: '#009fe8',//区域边框颜色
},
areaColor:"#ffefd5",//区域颜色
},
emphasis: {
label: {
show: true
},
areaColor:"#ffdead", //区域颜色
}
},
label: {
normal: {
show: false,//显示省份标签
textStyle:{color:"#c71585"}//省份标签字体颜色
},
emphasis: {//对应的鼠标悬浮效果
show: true,
textStyle:{color:"#800080"},
}
},
data: data2
}
};
option.legend = {
left: 'right',
data: ['随机数据']
};
option.visualMap = {
seriesIndex: 1,
orient: 'horizontal',
left: 'right',
min: 0,
max: 1000,
color: ['orange', 'yellow'],
text: ['高', '低'], // 文本，默认为数值文本
splitNumber: 0
};
cityChart.setOption(option2, true);
});
});
//}
$('#citymap').on("click",function(){
$('#chinamap').css({'z-index':'1'});
$('#citymap').css({'z-index':'0','display':'none'});
})
$('#chinamap').on("click",function(){
$('#chinamap').css({'z-index':'0'});
$('#citymap').css({'z-index':'1','display':'block'});
})
</script>
</body>
</html>
