echars省份地图（安徽地图地图加散点图）亮点展示

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中渲染echars
    myChart.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.length
        for (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十分灵活，图形间可以任意组合；能做出你想要的的任何图形。