echarts展示国内各省各市地图

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Mar

ggxin

7474人浏览 · 2021-06-30 14:41:14

ggxin · 2021-06-30 14:41:14 发布

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>