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);//彈出當前點擊城市的名稱
    });
});

　　效果圖：