版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Dj_Fairy/article/details/86298059
1、如果引用echarts，则需引入china.js,文档在我的资源页中有。
2、代码如下，然后具体的配置，如颜色之类的配置问题到echarts中官网查找（https://echarts.baidu.com/option.html#series-map）
<script src="../js/echarts.min.js"></script>
<script src="../js/china.js"></script><div id="map" style="width: 900px;height:500px;"></div>
<script type="text/javascript">
function randomData() {
return Math.round(Math.random()*500);
}
var optionMap = {
backgroundColor: '#FFFFFF',
title: {
text: '学校分布',
subtext: '',
x:'center'
},
tooltip: {
position: function (pos, params, dom, rect, size) {
// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
var obj = {top: 60};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
return obj;
},
backgroundColor:'#fff',
borderWidth:0,
formatter: function(p){
if(p.name=='上海') name='SHANGHAI'; else
if(p.name=='云南') name='YUNNAN'; else
if(p.name=='内蒙古') name='NEIMENGGU'; else
if(p.name=='北京') name='BEIJING'; else
if(p.name=='台湾') name='TAIWAN'; else
if(p.name=='吉林') name='JILIN'; else
if(p.name=='四川') name='SICHUAN'; else
if(p.name=='天津') name='TIANJIN'; else
if(p.name=='宁夏') name='NINGXIA'; else
if(p.name=='安徽') name='ANHUI'; else
if(p.name=='山东') name='SHANDONG'; else
if(p.name=='山西') name='SHANXI'; else
if(p.name=='广东') name='GUANGDONG'; else
if(p.name=='广西') name='GUANGXI'; else
if(p.name=='新疆') name='XINJIANG'; else
if(p.name=='江苏') name='JIANGSU'; else
if(p.name=='江西') name='JIANGXI'; else
if(p.name=='河北') name='HEBEI'; else
if(p.name=='河南') name='HENAN'; else
if(p.name=='浙江') name='ZHEJIANG'; else
if(p.name=='海南') name='HAINAN'; else
if(p.name=='湖北') name='HUBEI'; else
if(p.name=='湖南') name='HUNAN'; else
if(p.name=='甘肃') name='GANSU'; else
if(p.name=='福建') name='FUJIAN'; else
// if(p.name=='西藏') name='XIZANG'; else
if(p.name=='贵州') name='GUIZHOU'; else
if(p.name=='辽宁') name='LIAONING'; else
if(p.name=='重庆') name='CHONGQING'; else
if(p.name=='陕西') name='SHANXI2'; else
if(p.name=='青海') name='QINGHAI'; else
if(p.name=='黑龙江') name='HEILONGJIANG'; else
if(p.name=='') return"";
return "<img style='width:450px;' src='../img/map/"+name+".png'>";
}
},
//配置属性
series: [{
name: '学校分布图',
type: 'map',
mapType: 'china',
roam: true,
label: {
normal: {
show: true //省份名称
},
emphasis: {
show: true,
textStyle:{color:"#800080"}
}
},
itemStyle: {
normal: {
borderWidth: .5,
borderColor: '#009fe8',
areaColor:"#ffefd5"
},
emphasis: {
borderWidth: .5,
borderColor: '#4b0082',
areaColor:"#ffdead"
}
},
data:[
{name:'上海'},
{name:'甘肃'},
{name:'云南'},
{name:'内蒙古'},
{name:'北京'},
{name:'台湾'},
{name:'吉林'},
{name:'四川'},
{name:'天津'},
{name:'宁夏'},
{name:'安徽'},
{name:'山东'},
{name:'山西'},
{name:'广东'},
{name:'广西'},
{name:'新疆'},
{name:'江苏'},
{name:'江西'},
{name:'河北'},
{name:'河南'},
{name:'浙江'},
{name:'海南'},
{name:'湖北'},
{name:'湖南'},
{name:'福建'},
{name:'贵州'},
{name:'辽宁'},
{name:'重庆'},
{name:'陕西'},
{name:'青海'},
{name:'黑龙江'}
]
}]
};
var myChart = echarts.init(document.getElementById('map'));
myChart.setOption(optionMap);
</script>3、效果图：
