前提条件需引入china.js文件
具体代码：
function getMapChart() {// 初始化echarts实例var myEcharts = echarts.init(document.getElementById("map-chart"));var option = {geo: {map: 'china',label: {normal: {show: false, //显示省份标签},emphasis: {//对应的鼠标悬浮效果show: false,textStyle: {color: "#fff"}}},roam: false,//是否开启鼠标缩放和平移漫游itemStyle: {//地图区域的多边形 图形样式normal: {//是图形在默认状态下的样式borderWidth: .5, //区域边框宽度borderColor: '#fff', //区域边框颜色areaColor: "#3EABFF", //区域颜色},emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时borderWidth: .5,borderColor: '#fff',areaColor: "#0078FF",label: {show: true }}},aspectScale: 0.75,zoom: 1.2,//地图缩放比例,默认为1},title: {//标题样式text: '',x: "center",textStyle: {fontSize: 18,color: "#fff"},},tooltip: {//这里设置提示框show: false,trigger: 'item', //数据项图形触发backgroundColor: "#fff", //提示框浮层的背景颜色。},visualMap: {//视觉映射组件show: false,top: 'center',left: 'left',min: 10,max: 500000,text: ['High', 'Low'],realtime: false, //拖拽时，是否实时更新calculable: true, //是否显示拖拽用的手柄inRange: {color: ['lightskyblue', 'yellow', 'orangered']}},series: [{name: '',type: 'effectScatter', // series图表类型coordinateSystem: 'geo', // series坐标系类型symbolSize: function (val) {//设置散点大小return val[2] / (val[2] / 12)},data: [{name: '北京', // 数据项名称，在这里指地区名称value: [ // 数据项值116.46,// 地理坐标，经度39.92,// 地理坐标，纬度340 // 北京地区的数值],tooltip: {show: true,trigger: 'item', //数据项图形触发backgroundColor: "#fff", //提示框浮层的背景颜色。borderColor: 'rgba(0,0,0,0)',formatter: function (params) {//return 'Top1<br><br>{b}：' + params,},},itemStyle: {normal: {color: '#0041D2',}},label: {normal: {show: true, //显示省份标签position: 'right',textStyle: {color: "#0041D2",//标签字体颜色},formatter: '{b}'},},rippleEffect: {//涟漪特效相关配置brushType: 'stroke'//波纹的绘制方式，可选 'stroke' 和 'fill'},}, {name: '海门', value: [121.15, 31.89, 90] },{name: '鄂尔多斯', value: [109.781327, 39.608266, 120] },{name: '招远', value: [120.38, 37.35, 142] },]}]};// 使用刚指定的配置项和数据显示图表。myEcharts.setOption(option);}
展示效果：
