<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<!-- <script src="js/shine.js" type="text/javascript" charset="utf-8"></script> -->
<!-- <script src="js/map-china.js" type="text/javascript" charset="utf-8"></script> -->
<!-- <script src="js/province/lvliang.js" type="text/javascript" charset="utf-8"></script> -->
<!-- <script src="js/province/xingxian.js" type="text/javascript" charset="utf-8"></script> -->
<script src="js/province/shanxi.js" type="text/javascript" charset="utf-8"></script>
<!-- <script src="js/address.js" type="text/javascript" charset="utf-8"></script> -->
<title>山西地图</title>
</head>
<body>
<div id="main" style="width: 1200px;height:900px;"></div>
</body>
<script type="text/javascript">
//container 为div的id
var dom = document.getElementById("main");
//得到echarts的实例对象
var myChart = echarts.init(dom);
initEcharts('山西');
function initEcharts(pName) {
//关键是配置项
var option = {
series: [{
name: '网点个数',
//series[i]-map:系列列表。每个系列通过 type 决定自己的图表类型,此处是地图类型
type: 'map',
//这里是'china',及因为js中注册的名字，如果是上海市，则该出需pName 指的是'shanghai'
mapType: pName,
//地图区域的多边形 图形样式，有 normal 和 emphasis 两个状态
itemStyle: {
//normal 是图形在默认状态下的样式；
normal: {
show: true,
areaColor: "#CECECE",
borderColor: "#FCFCFC",
borderWidth: "1"
},
//emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
emphasis: {
show: true,
areaColor: "#C8A5DF",
}
},
//图形上的文本标签，可用于说明图形的一些数据信息
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
}],
title: {
text: pName,
left: 'center'
}
};
//使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
//定义全国省份的数组
var provinces = ['datong', 'shuozhou', 'xinzhou', 'lvliang', 'taiyuan', 'yangquan', 'jinzhong', 'linfen', 'changzhi', 'jincheng', 'yuncheng'];
var provincesText = ['大同市', '朔州市', '忻州市', '吕梁市', '太原市', '阳泉市', '晋中市', '临汾市', '长治市', '晋城市', '运城市' ];
myChart.on('click', function(param) {
console.log(param);
//遍历取到provincesText 中的下标 去拿到对应的省js
for (var i = 0; i < provincesText.length; i++) {
if (param.name == provincesText[i]) {
//显示对应省份的方法
showProvince(provincesText[i],provinces[i]);
break;
}
}
});
//展示对应的省
function showProvince(pText,pName) {
//这写省份的js都是通过在线构建工具生成的，保存在本地，需要时加载使用即可，最好不要一开始全部直接引入。
loadBdScript('$' + pName + 'JS', 'js/province/' + pName + '.js', function() {
//初始化echarts:具体代码参考上面初始化中国地图即可，这里不再重复。
initEcharts(pText);
});
}
//加载对应的JS
function loadBdScript(scriptId, url, callback) {
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState) { //IE
script.onreadystatechange = function() {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function() {
callback();
};
}
script.src = url;
script.id = scriptId;
document.getElementsByTagName("head")[0].appendChild(script);
};
</script>
</html>
echarts-map.zip （15个子文件） 
echarts-map 
index.html 4KB js province 
jinzhong.js 12KB datong.js 19KB taiyuan.js 15KB linfen.js 14KB shuozhou.js 9KB yuncheng.js 20KB xinzhou.js 17KB yangquan.js 6KB shanxi.js 23KB jincheng.js 9KB changzhi.js 12KB lvliang.js 17KB echarts.min.js 632KB jquery.js 293KB资源评论
shz513452020-07-15不是想要的，不过还是谢谢了- zhuyinyin_662020-02-24很好用，不错，谢谢
鲲鹏LEO2019-03-06不错，好用，多谢- qq_365294342019-02-14不小心删掉了
公主范儿i2019-02-25什么？
