echarts展示国内各省各市地图

1、下载echarts插件，引入界面

<script src="js/echarts5.1/echarts.js"></script>

2、创建一个div容器

<div class="china-map" id="china-map" style="width:1000px;height:600px;"></div>

3、在下面的网站上下载自己所需的省、市、县\区的JSON文件，打开页面，选择需要的地区、点击右侧的JSON API地址即可下载

http://datav.aliyun.com/tools/atlas/index.html#&lat=33.50475906922609&lng=104.2822265625&zoom=4

4、注册地图即可展示

<script>
//获取地区json文件甘广欣
$.get(config.web_root+'js/chinamap/nanning.json',function(rs){
                echarts.registerMap('nanning',rs);
                showMap();
            })

function showMap(){
        var myChart = echarts.init(document.getElementById('china-map'));
        var option = {
            tooltip: {
//                    show: false //不显示提示标签
                formatter: '{b}', //提示标签格式
                backgroundColor:"#ff7f50",//提示标签背景颜色
                textStyle:{color:"#fff"} //提示标签字体颜色
            },
            series: [{
                type: 'map',
                mapType: 'nanning',
                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);
        });
    }
</script>

5、展示效果