echars省份地图（安徽地图地图加散点图）亮点展示
一：需求讲解：
使用echars制作省份地图，显示城市名称，定位标点；点击地图区域，地图标点高亮。
二：主要准备工作
（1）：引入echars
（2）：下载省份地图js（各省份免费下载地址）
注意：地图中给的文字坐标可跟展示有偏差，需自己去js中修改坐标（微调就行）
三：代码示例（代码又臭又长，食用前做好心理准备）
（1）写个html容器放echars
<div id="chart" style="width: 200px;height: 300px"></div>
（2）编写js部分
//在div中初始化地图var myChart = echarts.init(document.getElementById('chart'));//自己造的数据，实际中找后台返回var dataList =[{name: "黄山市", value: 896, cityPercentage: "10.92"},{name: "宣城市", value: 862, cityPercentage: "10.51"},{name: "滁州市", value: 779, cityPercentage: "9.50"},{name: "六安市", value: 735, cityPercentage: "8.96"},{name: "池州市", value: 631, cityPercentage: "7.69"},{name: "合肥市", value: 617, cityPercentage: "7.52"},{name: "阜阳市", value: 535, cityPercentage: "6.52"},{name: "芜湖市", value: 485, cityPercentage: "5.91"},{name: "马鞍山市", value: 480, cityPercentage: "5.85"},{name: "安庆市", value: 464, cityPercentage: "5.66"},{name: "蚌埠市", value: 429, cityPercentage: "5.23"},{name: "亳州市", value: 377, cityPercentage: "4.60"},{name: "铜陵市", value: 288, cityPercentage: "3.51"},{name: "淮南市", value: 243, cityPercentage: "2.96"},{name: "淮北市", value: 234, cityPercentage: "2.85"},{name: "宿州市", value: 146, cityPercentage: "1.78"}]//散点坐标var arr = [{name: "蚌埠市", value: [117.003228,33.099667]},{name: "合肥市", value: [116.953042,31.86119]},{name: "芜湖市", value: [117.930051,31.226319]} ,{name: "宣城市", value: [118.397995,30.495667]} ,{name: "池州市", value: [117.139157,30.296037]} ,{name: "亳州市", value: [116.002939,33.550338]} ,{name: "铜陵市", value: [117.216576,30.909935]},{name: "淮北市", value: [116.794664,33.971707]} ,{name: "淮南市", value: [116.818329,32.347574]} ,{name: "黄山市", value: [117.697325,29.909239]} ,{name: "安庆市", value: [116.203551,30.50883]},{name: "滁州市", value: [117.670264,32.533627]},{name: "阜阳市", value: [115.250729,32.956969]},{name: "宿州市", value: [117.134084,33.783891]},{name: "马鞍山市", value: [118.507906,31.569362]},{name: "六安市", value: [115.857676,31.552889]}];//渲染地图var option = {tooltip: {},//使用geo坐标geo:{map:'安徽',//安徽地图写‘安徽’show:true,roam:false,selectedMode:'single',itemStyle:{normal:{borderColor: "#00FEFD",borderWidth: 1,areaColor:'#200076'},emphasis:{areaColor: '#5E34CE' //修改区域hover效果}},},series : [//第一个series 散点图 用于位置标点{tooltip: {trigger: 'item',show:false,},name:'scatter',type: 'scatter',coordinateSystem: 'geo',//使用坐标系//自定义散点图片 symbol:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAABS0lEQVQokU3SPUgWUBTG8V+vr4mDX4GGg7roErpqbg02SLgVIYLk0JAgOGWDIm4OQkGZqFMuUYNrY5AobYKTDkWLJH2IJviJIifOi97x3nPO8zz/c28UT37JcwsPMYw7rs4G5rGMv3FbaqrCFAZRg5/4l/fNWfwW0zgsogMDGMEPjONTPKIcD/ACz3GGmVBaxKOc/hRrqMRtfEcZOvEe9SFQQF9aepUN7XiDj3iHFnxNe+FsJJROsI1ebGVhfxac4yUmE1Q0NxaT0T720IbWzCIbu1Cbg0/DbiEf47IO31Lt+vmCP2jCTRzFpGAevu9jM9H/RjdWMJfUnqABnyPTbNI7wBBWUYFq7Gaue5k1gD0Oe0Htdcp/yJ3EYyw3sMd+llJloqQU9iP4GEaz4RgXiKGhGoRj6QuR6frfi4K7eIaeBLOTICLC+n96uARazFeiWsK6+QAAAABJRU5ErkJggg==',symbolSize: 13,data: arr,},//第二个series 用于点击地图 使散点高亮（其实就是用一个较大的亮点覆盖住上面的散点）{tooltip: {trigger: 'item',show:false,},name:'scatter',type: 'effectScatter', // 类型coordinateSystem: 'geo', // 该系列使用的坐标系 可选: 'cartesian2d','polar','geo'symbol: 'circle',// 图形的样式itemStyle: {color: '#07EFEE'},//默认没有数据 就不会显示亮点 待点击后再塞入数据data: []},//第三个series map地图 用于数据展示，点击事件{tooltip: {trigger: 'item',show:true,backgroundColor:'rgba(0,0,0,0.6)',textStyle:{color:'#FFFFFF',fontSize:13,fontWeight:'bold',},//自定义tooltip数据formatter(params) {return `${params.data.name}</br>接入数据量：${params.data.value}</br>占比：${params.data.cityPercentage}%`;},},type: 'map',name:'map',mapType:'安徽',coordinateSystem: 'geo',hoverable: true,dataRangeHoverLink: true,selectedMode : 'single',itemStyle:{normal:{borderColor: "#00FEFD",borderWidth: 1,areaColor:'#200076'},emphasis:{areaColor: '#5E34CE' //修改区域hover效果}},label:{//显示各地方名称normal:{show:true,textStyle:{color:'#FFB12A',fontSize:12,fontWeight:500},},emphasis:{show:true,textStyle:{color:'#FFB12A',fontSize: 15,fontWeight:500},},},//渲染的数据data: dataList},]};//在div中渲染echarsmyChart.setOption(option);//点击事件myChart.on('click', function (params) {//改变各市接入数据量分布占比var cityName = params.name;//亮点的数据var arrOf = {};//亮点坐标var arrs = [{name: "蚌埠市", value: [117.003228,33.099667]},{name: "合肥市", value: [116.953042,31.86119]},{name: "芜湖市", value: [117.930051,31.226319]} ,{name: "宣城市", value: [118.397995,30.495667]} ,{name: "池州市", value: [117.139157,30.296037]} ,{name: "亳州市", value: [116.002939,33.550338]} ,{name: "铜陵市", value: [117.216576,30.909935]},{name: "淮北市", value: [116.794664,33.971707]} ,{name: "淮南市", value: [116.818329,32.347574]} ,{name: "黄山市", value: [117.697325,29.909239]} ,{name: "安庆市", value: [116.203551,30.50883]},{name: "滁州市", value: [117.670264,32.533627]},{name: "阜阳市", value: [115.250729,32.956969]},{name: "宿州市", value: [117.134084,33.783891]},{name: "马鞍山市", value: [118.507906,31.569362]},{name: "六安市", value: [115.857676,31.552889]}]let j = arrs.lengthfor (let i = 0; i < j; i++) {if(arrs[i].name == cityName){arrOf = arrs[i];//设置亮点的大小arrOf.symbolSize = 10}}//点亮标点 点击修改对应的series数据myChart.setOption({series: [//第一个series不变{},//第二个series数据{data:[arrOf]},//第三个series不变{}]});//选择高亮 给地图点击区域显示高亮myChart.dispatchAction({type: "highlight",seriesName:'map',name:cityName});});
四：总结 echars十分灵活，图形间可以任意组合；能做出你想要的的任何图形。
