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、显示效果