Echarts 地图设置鼠标hover区块颜色,地图描点,描点选中

<section class="con_Locations wal">
	<h3>Locations</h3>
	<div style="display:inline-block;width:30%;">			    	
    	<div class="main" data-title="苏州DC_苏州市唯胜公路">
    		<label>苏州DC_苏州市唯胜公路</label>
    	</div>
        <div class="main" data-title="南京DC_南京市六合开发区龙扬路龙须路湖口龙须湖路9号">
    		<label>南京DC_南京市六合开发区龙扬路龙须路湖口龙须湖路9号</label>
    	</div>
        <div class="main" data-title="金阊DC_安博苏州金阊物流中心浒墅关镇虎泉路1288">
    		<label>金阊DC_安博苏州金阊物流中心浒墅关镇虎泉路1288</label>
    	</div>
	</div>
	<div id="map" style="height:600px;display:inline-block;width:69%"></div>
			
			 
			</section>
 
<script src="/static/js/echarts.min.js"></script>
			<script src="/static/js/echarts.china.js"></script>
			<script>
			
			    //世界地图
var chartDom1 = document.getElementById('map');
    var myChartMap = echarts.init(chartDom1);
    let RDC_ARR = [];
    
    RDC_ARR =[
       {
           province: '江苏', 
           locs: [
           {name:"苏州DC_苏州市唯胜公路","value":[120.585315,31.298886,0]},
           {name:"南京DC_南京市六合开发区龙扬路龙须路湖口龙须湖路9号","value":[118.781603,32.305111,0]},
           {name:"金阊DC_安博苏州金阊物流中心浒墅关镇虎泉路1288","value":[120.537188,31.357254,0]}
           ]
       },
    ];
 
  const mapOption = {
   //修改悬浮背景色用geo
    geo:{
        show: true,
        map: 'china',
        zoom: 1.5,
        center:[104.73, 34.01],//34.013456, 104.737978
        roam: false,
        label:{
            show:false
        },
        emphasis: {
            label:{
                show:false
            },
            areaColor: '#e1261c',
        },
        itemStyle: {
            emphasis: {
                label:{
                    show:false
                },
                areaColor: '#e1261c',
            },
        },                
    },
    
    series: [
      {
//用geo渲染地图,此项可不要,否则会重复渲染
        id: 'population',
        type: 'map',
        roam: false,
        // map: 'world',
        // animationDurationUpdate: 1000,
        // universalTransition: true,
        // data: data,
        linestyle:{
            //  emphasis: {
            //         color:'#e1261c'
            //  },
            // color:'rgba(255,255,255,1)',
        },
        // tooltip: {
        //     show: true,
        //     backgroundColor: '#e1261c',
        // },
        // label: {
        //  emphasis: {
        //      show: false,  //开启悬浮事件
        //      color: '#D4EEFF',//字体颜色
        //     //  backgroundColor:'#e1261c',
        //     }
        //  },
      },
    //描点配置
      {
        name: 'RDC',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: getsimboldata('china', RDC_ARR),
        symbol: 'image://?/html/static/images/add.png',//自定义描点图片
        symbolSize: function (val) {
            return 20;
        },
        selectedMode: 'single',
        select:{//开启选中,做自动选中必须开启
            disabled: false,
            label:{
                show:true,
            }
        },
        label: {
            normal: {
                show: false,
                formatter: function (params) {                    
                    return params.name;
                },
                position: 'left',
                color: '#e1261c',
                fontSize: '12',
            },
            emphasis: {
                show: true,
            },
        },
        itemStyle: {
            normal: {
                color: '#4bbbb2',
                borderWidth: 2,
                borderColor: '#b4dccd',
            },
        },
    },
    ]
  };
  myChartMap.setOption(mapOption);
  myChartMap.on('click',function(params){
    //判断是点击scatter描点  给外部列表增加active
      if(params.seriesType == 'scatter'){
          let name = params.name;
          $('div[data-title="'+name+'"]').addClass("active").siblings().removeClass('active');
      }
  })
function getsimboldata(mapName, XXX_ARR) {
    //console.log(mapName);
    let final_arr = [];
    for (let arr of XXX_ARR) {
        if (mapName === 'china') {
            final_arr = final_arr.concat(arr.locs);
        } else if (mapName === arr.province) {
            return arr.locs;
        }
    }
    // console.log(final_arr);
    return final_arr;
}
 
//列表点击事件
$(document).on('click','.con_Locations .main',function(){
    //设置描点选中
    myChartMap.dispatchAction({
        type: 'select',
        name: $(this).data('title')
    });
})
			</script>复制

参考:echarts图表集