echarts 地图功能实现

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);//弹出当前点击城市的名称
    });
});

　　效果图：