前端 绘制世界地图

            <div class="col-xxl-6 col-lg-6  col-md-6" style="margin-bottom: -6px">
                <div class="panel  " style="margin-left: -5px; width: 102%;">
                    <div class="panel-heading">
                        <h3 class="panel-title">服务器分布</h3>
                    </div>
                    <div class="panel-body ">
                        <div class="servermap boxheight " id="servermap"></div>
                    </div>
                </div>
            </div>

 <script type="text/javascript" src="../../static/js/lib/echarts.min.js"></script>
<script type="text/javascript" src="../../static/js/lib/world.js"></script>

  $.ajax({
        url:'/textsearch/get_third_search_result',
        data:{
            'id': _id,
            'domain_name': domain_name,
        },
        success:function(dt){
            if(dt.success){ //成功
                result = dt.result;   
                var webserver = result.web_server_distribution; //网页服务分布
                fnWorldmapserver('servermap',webserver);
            }
        },error:function(dt){

        }
    })
 

    function fnWorldmapserver(id,dt){
        var data = [];
        for(var item in dt){
            data.push({
                name:dt[item].city,
                value:[dt[item].longitude,dt[item].latitude],
                total_number:dt[item].total_number
            });

            var otr = $('<tr></tr>');
            otr.html('<td>'+dt[item].country+'</td><td>'+dt[item].city+'</td><td>'+dt[item].total_number+'</td><td>'+dt[item].server_distribution_percent+'</td>')
            $('.webserver').append(otr);
        }
        var series = [];
        series.push(
            {
                name:'网页服务器',
                type: "effectScatter",
                coordinateSystem: "geo",
                zlevel: 2,
                rippleEffect: {
                    period: 4,
                    brushType: "stroke",
                    scale: 4
                },
                symbol: "circle",
                itemStyle: {
                    normal: {
                        color: '#00bc62',
                    }
                },
                zlevel: 1,
                data:data
            }
        );


        var myChart = echarts.init(document.getElementById(id));
        var option = {
            backgroundColor: '#eff3f4',
            legend: {
                right:20,
                bottom:10,
                data:['网页服务器']
            },
            tooltip: {
                trigger: "item",
                backgroundColor: "#1540a1",
                borderColor: "#FFFFCC",
                showDelay: 0,
                hideDelay: 0,
                enterable: true,
                transitionDuration: 0,
                extraCssText: "z-index:100",
                formatter: function(params, ticket, callback) {
                    //根据业务自己拓展要显示的内容
                    var res = "";
                    var name = params.name;
                    var value = params.value[params.seriesIndex + 1];
                    var total_number = params.data.total_number;
                    res =
                        "<span style='color:#fff;'>" +
                        name +
                        "</span><br/>话单总数：" +
                        total_number;
                    return res;
                }
            },
            geo: {
                map: "world",
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true, //是否允许缩放
                layoutCenter: ["50%", "50%"], //地图位置
                layoutSize: "180%",
                itemStyle: {
                    normal: {
                        color: "#fff", //地图背景色
                        borderColor: "#08acce" //省市边界线
                    },
                    emphasis: {
                        color: "rgba(37, 43, 61, .1)" //地图块悬浮背景
                    }
                },

            },

            series: series
        };

         myChart.setOption(option);
    }