echarts之中國地圖統計數據

1、下載導入echarts和中國地圖相關的js文件

<script type="text/javascript" src="/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="/echarts/china.js"></script>     <!--中國地圖的js-->
    <script type="text/javascript" src="/echarts/theme/wonderland.js"></script>

2、html文件中創建存放地圖的div

<div id="map" class="chunk" style="width:98%;height:600px;"></div>

3、編寫相關js

//創建畫圖面板
var myChartmap = echarts.init(document.getElementById('map'),'wonderland');
window.onresize = function () {     //設置大小自適應
    myChartmap.resize();
}
$(function(){
    var mydata =[];
    $.ajax({
        type : "post",
        async : true, // 異步請求（同步請求將會鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行）
        url : "/sourceProvince", // 請求發送到TestServlet處
        data : {
            field:'source_province',
            startTime:$("#effectStartTime").val(),
            endTime :$("#effectEndTime").val()
        },
        dataType : "json", // 返回數據形式為json
        success : function(result) {
            //接收后端的數據
            if (result) {
                for ( var key in result) {
                    var json={name:key,value:result[key]};
                    //將后台數據以 {name:國家名稱,value:數據}的形式存與集合中
                    mydata.push(json);
                    }
                }
            myChartmap.setOption({
                backgroundColor: '#FFFFFF',  
                 title: {  
                     text: '信源區域',    //圖表標題
                     subtext: '',  
                     x:'center'  
                 },  
                 tooltip : {  
                     trigger: 'item'  
                 },  
                 toolbox: {
                        padding:[40,80],
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: true},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                 //左側小導航圖標
                 visualMap: {  
                     show : true,  
                     x: 'left',  
                     y: 'center',  
                     splitList: [   
                         {start: 10000},{start: 5000, end: 9999 },   
                         {start: 2000, end: 4999},
                         {start: 1000, end:1999},{start: 500, end: 999},
                         {start: 100, end: 499},{start: 0, end: 99},  
                     ],  
                     /*color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']  */
                 },  
                 
                 //配置屬性
                 series: [{  
                     name: '信源數據',    //詳細數據的標題
                     type: 'map',  
                     mapType: 'china',   
                     roam: true,  
                     label: {  
                         normal: {  
                             show: true  //省份名稱  
                         },  
                         emphasis: {  
                             show: false  
                         }
                     },  
                     data:mydata  //數據
                 }]  
            }); 
            }
        })           
})

4、顯示效果