1. 引入echarts插件(注意编码格式，个人建议UTF-8对中文的兼容性更好一点)

2.建立一个有高度和宽度的dom(建议div)

3.获取地图json文件，设置option,展示地图。各个省的地图json数据官网有下载。

废话不多说，直接上代码

<script type="text/javascript" src="./javaScript/echarts.min.js" charset="utf-8"/>

<div id="mainMap" style="width:400px;height:400px">
</div>

　　

//用山东地图展示各个地市的人口数量
$.get(\'/map/shandong.json\', function (mapJson) {
    echarts.registerMap(\'shandong\', mapJson);
    var chart = echarts.init(document.getElementById(\'mainMap\'));//在id为mainMap的dom元素中显示地图
    chart.setOption({
    	tooltip: {
        	trigger: \'item\',
        	formatter: function(params) {//回调函数，参数params具体格式参加官方API
        		//鼠标放到某个地市上，显示这个地市的名称加人口数
				//例如 params.name：当前地市名称。params.value：你传入的json数据与当前地市匹配的一项。
				//params.data.value:你传入的json数据与当前地市匹配的一项中\'value\'对应的数据
        		return params.name+":"+params.data.value;
        	}
		},
        series: [{
            type: \'map\',
            map: \'shandong\',//要和echarts.registerMap（）中第一个参数一致
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
        	},
        	data : dataParam//人口数据：例如[{name:\'济南\',value:\'100万\'},{name:\'菏泽\'，value:\'100万\'}......]
        }]
    }),
    chart.on(\'click\', function (params) {//回调函数，点击时触发，参数params格式参加官方API
    	alert(params.name);//弹出当前点击城市的名称
    });
});

　　效果图：　

　

 

版权声明：本文为shn-bbg原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/shn-bbg/p/5672932.html