最近关于echarts3弄了个地图下钻，也许是因为运气不好，开始上来需要传递到的城市是成都，结果成都地图（js）加载下来总是挤到了一起，好尴尬，各方实验查找后发现原来是js文件中，成都市地图有个县市并没有画出来，导致比例不正常。。。。要是有做成都的，需要注意下。。下面直接铺上三连跳下钻地图吧。。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts 地图展示</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
<body>
<!--定义页面图表容器-->
<!-- 必须制定容器的大小（height、width） -->
<div id="maps" style="width: 33%; height: 500px; border: 1px solid #ccc; display: inline-block;float: left;"></div>
<div id="mapsProvice" style="width: 33%; height: 500px; border: 1px solid #ccc; display: inline-block;float: left;"></div>
<div id="mapsCity" style="width: 33%; height: 500px; border: 1px solid #ccc; display: inline-block;float: left;"></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="mapjs/china.js"></script>
<script type="text/javascript">
function loadScript(url, callback) {
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState) {
script.onreadystatechange = function() {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
} else {
script.onload = function() {
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
var myChartMap = echarts.init(document.getElementById(\'maps\'));
var option = {
title: {
text: \'全国态势图\',
subtext: \'进入省市可详细查看\',
x: \'center\',
textStyle: {
color: \'#404a59\'
}
},
legend: {
orient: \'vertical\',
x: \'left\',
data: [\'安全状态\']
},
dataRange: {
orient: \'vertical\',
x: \'left\',
min: 0,
max: 1000,
color: [\'orange\', \'yellow\'],
text: [\'高\', \'低\'], // 文本，默认为数值文本
},
series: [{
tooltip: {
trigger: \'item\',
formatter: \'{b}\'
},
name: \'安全态势\',
type: \'map\',
mapType: \'china\',
x: \'5%\',
y: \'center\',
roam: false,
selectedMode: \'single\',
itemStyle: {
normal: {
label: {
show: true
}
},
emphasis: {
label: {
show: true
}
}
},
data: [{
name: \'北京\',
selected: true,
value: 100
}, {
name: \'天津\',
selected: false
}, {
name: \'上海\',
selected: false
}, {
name: \'重庆\',
selected: true,
value: 100
}, {
name: \'河北\',
selected: false
}, {
name: \'河南\',
selected: false
}, {
name: \'云南\',
selected: false
}, {
name: \'辽宁\',
selected: true,
value: 100
}, {
name: \'黑龙江\',
selected: false
}, {
name: \'湖南\',
selected: true,
value: 1000
}, {
name: \'安徽\',
selected: false
},
]
}],
animation: false
};
myChartMap.setOption(option, true); //显示国家地图
var myChartProvice = echarts.init(document.getElementById(\'mapsProvice\'));
var myChartCity = echarts.init(document.getElementById(\'mapsCity\'));
if (selectProvice = "undefined") {
selectProvice = "四川";
selectCity = "成都市";
var url = "mapjs/" + selectProvice + "/" + selectProvice + ".js";
loadScript(url, setOpt);
var cityurl = "mapjs/" + selectProvice + "/city/" + selectCity + ".js";
loadScript(cityurl, setOptCity);
setOpt();
setOptCity();
}
myChartMap.on(\'mapselectchanged\', function(param) { //单击省份事件
selectProvice = param.batch[0].name;
var url = "mapjs/" + selectProvice + "/" + selectProvice + ".js";
loadScript(url, setOpt);
setOpt();
})
myChartProvice.on(\'mapselectchanged\', function(param) {
selectCity = param.batch[0].name;
var cityurl = "mapjs/" + selectProvice + "/city/" + selectCity + ".js";
loadScript(cityurl, setOptCity);
setOptCity();
});
function setOpt() {
var option = {
title: {
text: selectProvice + \'地区详情\',
x: \'center\',
textStyle: {
color: \'black\'
}
},
dataRange: {
x: \'-3000px\',
y: \'bottom\',
splitList: [{
start: 41,
color: \'rgba(182,132,220,0.8)\'
}, {
start: 21,
end: 40,
color: \'rgba(255,108,96,0.8)\'
}, {
start: 11,
end: 20,
color: \'rgba(252,179,34,0.8)\'
}, {
start: 5,
end: 10,
color: \'rgba(89,172,226,0.8)\'
}, {
start: 0,
end: 4,
label: \'<4\',
color: "rgba(120,205,81,0.8)"
},
],
//
textStyle: {
color: \'white\',
},
},
roam: true,
series: [{
tooltip: {
trigger: \'item\',
formatter: \'{b}\'
},
name: \'安全态势\',
type: \'map\',
mapType: selectProvice,
x: \'center\',
y: \'center\',
// roam: true,
selectedMode: \'single\',
itemStyle: {
normal: {
label: {
show: true
}
},
emphasis: {
label: {
show: true
}
}
},
data: ""
}],
animation: false,
}
myChartProvice.setOption(option, true);
}
function setOptCity() {
var option = {
title: {
text: selectCity + \'地区详情\',
x: \'center\',
textStyle: {
color: \'black\'
}
},
roam: true,
dataRange: {
x: \'-3000px\',
y: \'bottom\',
splitList: [{
start: 41,
color: \'rgba(182,132,220,0.8)\'
}, {
start: 21,
end: 40,
color: \'rgba(255,108,96,0.8)\'
}, {
start: 11,
end: 20,
color: \'rgba(252,179,34,0.8)\'
}, {
start: 5,
end: 10,
color: \'rgba(89,172,226,0.8)\'
}, {
start: 0,
end: 4,
label: \'<4\',
color: "rgba(120,205,81,0.8)"
}, ],
textStyle: {
color: \'white\',
},
},
series: [{
tooltip: {
trigger: \'item\',
formatter: \'{b}\'
},
name: \'安全态势\',
type: \'map\',
mapType: selectCity,
x: \'center\',
y: \'center\',
// roam: true,
itemStyle: {
normal: {
label: {
show: true
},
},
emphasis: {
label: {
show: true
}
}
},
selectedMode: \'single\',
data: ""
}],
animation: false,
}
myChartCity.setOption(option, true);
}
</script>
</body>
</html>
地图js代码现在已经不支持下载了，要结合百度地图使用，如果有需要的同学，请重视中国领土完整，部分市县数据缺失，请注意！
展示效果请狂戳： https://wanglaowuplus.github.io/echarts-maps/
下载请走这里：（https://github.com/wanglaowuPlus/echarts-maps）！
如果此文章对你有帮助，请在github 上点亮你的小星星！！