准备工作：导入ECharts依赖、和地图需要的.js文件。

文件获取方式：

官网：url

github：url

(下载完后 ：incubator-echarts-4.8.0mapjsprovince目录下有各个省级的.js文件)

绘制中国地图

先在html中添加一个地图要挂载的节点：china-map

js:

var myChart = echarts.init(document.getElementById('china-map'));

var option = {

tooltip: {

// show: false //不显示提示标签

formatter: '{b}', //提示标签格式

backgroundColor:"#ff7f50",//提示标签背景颜色

textStyle:{color:"#fff"} //提示标签字体颜色

},

series: [{

type: 'map',

mapType: 'china',

label: {

normal: {

show: true,//显示省份标签

textStyle:{color:"#c71585"}//省份标签字体颜色

},

emphasis: {//对应的鼠标悬浮效果

show: true,

textStyle:{color:"#800080"}

}

},

itemStyle: {

normal: {

borderWidth: .5,//区域边框宽度

borderColor: '#009fe8',//区域边框颜色

areaColor:"#ffefd5",//区域颜色

},

emphasis: {

borderWidth: .5,

borderColor: '#4b0082',

areaColor:"#f47920",

}

},

data:[

{name:'广西', selected:true},//广西为选中状态

{name:'贵州', selected:true},//贵州为选中状态

{name:'云南', selected:true},//云南为选中状态

{name:'广东', selected:true},//云南为选中状态

{name:'海南', selected:true},//云南为选中状态

{name:'湖北', selected:true},//云南为选中状态

]

}],

};

myChart.setOption(option);

myChart.on('mouseover', function (params) {

var dataIndex = params.dataIndex;

console.log(params);

});

绘制广西地图

和上面的中国地图类似：

var myChart = echarts.init(document.getElementById('guangxi-map'));

var option = {

title: {

text : '广西地图',

subtext : '各市区显示'

},

tooltip: {

// show: false //不显示提示标签

formatter: '{b}', //提示标签格式

backgroundColor:"#ff7f50",//提示标签背景颜色

textStyle:{color:"#fff"} //提示标签字体颜色

},

series: [

{

name: '数据名称',

type: 'map',

mapType: '广西',

selectedMode : 'single',

label: {

normal: {

show: true,//显示市区标签

textStyle:{color:"#c71585"}//省份标签字体颜色

},

emphasis: {//对应的鼠标悬浮效果

show: true,

textStyle:{color:"#800080"}

}

},

itemStyle:{

normal: {

borderWidth: .5,//区域边框宽度

borderColor: '#009fe8',//区域边框颜色

areaColor:"#ffefd5",//区域颜色

},

emphasis: {

show:true,

borderWidth: .5,

borderColor: '#4b0082',

areaColor:"#f47920",

}

},

data:[

{name:'南宁市', selected:true},//**为选中状态

{name:'百色市', selected:true},//**为选中状态

{name:'玉林市', selected:true},//**为选中状态

{name:'柳州市', selected:true},//**为选中状态

]

}]

};

myChart.setOption(option);

myChart.on('mouseover', function (params) {

var dataIndex = params.dataIndex;

console.log(params);

});

效果展示：