echart 地图 - 爱码网

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <meta charset="UTF-8">
    <script src="js/echarts.min.js"></script>
    <script src="js/china.js"></script>
    <script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<h2>Hello World!</h2>

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 1600px;height:1400px;"></div>
<script type="text/javascript">

    var myChart = echarts.init(document.getElementById(\'main\'));

    function setTimeDraw(execTiemes)
    {
        $.ajax({
            type: "POST",
            url: "/chinaMapdata",
            data:{type:0},
            dataType: "json",
            success: function(mapdata){
                console.log(mapdata)
             var option1 = myChart.getOption()
                option1.series[1].data=mapdata
                myChart.setOption(option1)
            },
            error:function (err) {
              console.log(err)
            }
        });
        if(execTiemes>1)
        {
            console.log(execTiemes);
            execTiemes--;
            setTime = setTimeout(\'setTimeDraw(\'+ execTiemes +\')\', 2000);

        }
        else
        {
            clearTimeout(setTime);
        }

    }


    function randomValue() {
        return Math.round(Math.random()*1000);
    }



    var option = {
        tooltip: {},
        visualMap: {
            min: 0,
            max: 2500,
            left: \'left\',
            top: \'bottom\',
            text: [\'High\',\'Low\'],
            seriesIndex: [1],
            inRange: {
                color: [\'#e0ffff\', \'#006edd\']
            },
            calculable : true
        },
        geo: {
            map: \'china\',
            roam: true,
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: \'rgba(0,0,0,0.4)\'
                    }
                }
            },
            itemStyle: {
                normal:{
                    borderColor: \'rgba(0, 0, 0, 0.2)\'
                },
                emphasis:{
                    areaColor: null,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: \'rgba(0, 0, 0, 0.5)\'
                }
            }
        },
        series : [
            {
                type: \'scatter\',
                coordinateSystem: \'geo\',
                symbolSize: 20,
                symbol: \'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z\',
                symbolRotate: 35,
                label: {
                    normal: {
                        formatter: \'{b}\',
                        position: \'right\',
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: \'#F06C00\'
                    }
                }
            },
            {
                name: \'IP访问量\',
                type: \'map\',
                geoIndex: 0,
                // tooltip: {show: false},
                data:[
                    {name: \'北京\', value: 1500},
                    {name: \'天津\', value: 50},
                    {name: \'上海\', value: randomValue()},
                    {name: \'重庆\', value: randomValue()},
                    {name: \'河北\', value: randomValue()},
                    {name: \'河南\', value: randomValue()},
                    {name: \'云南\', value: randomValue()},
                    {name: \'辽宁\', value: randomValue()},
                    {name: \'黑龙江\', value: randomValue()},
                    {name: \'湖南\', value: randomValue()},
                    {name: \'安徽\', value: randomValue()},
                    {name: \'山东\', value: randomValue()},
                    {name: \'新疆\', value: randomValue()},
                    {name: \'江苏\', value: randomValue()},
                    {name: \'浙江\', value: randomValue()},
                    {name: \'江西\', value: randomValue()},
                    {name: \'湖北\', value: randomValue()},
                    {name: \'广西\', value: randomValue()},
                    {name: \'甘肃\', value: randomValue()},
                    {name: \'山西\', value: randomValue()},
                    {name: \'内蒙古\', value: randomValue()},
                    {name: \'陕西\', value: randomValue()},
                    {name: \'吉林\', value: randomValue()},
                    {name: \'福建\', value: randomValue()},
                    {name: \'贵州\', value: randomValue()},
                    {name: \'广东\', value: randomValue()},
                    {name: \'青海\', value: randomValue()},
                    {name: \'西藏\', value: randomValue()},
                    {name: \'四川\', value: randomValue()},
                    {name: \'宁夏\', value: randomValue()},
                    {name: \'海南\', value: randomValue()},
                    {name: \'台湾\', value: randomValue()},
                    {name: \'香港\', value: randomValue()},
                    {name: \'澳门\', value: randomValue()}
                ]
            }
        ]
    };


    myChart.setOption(option);

    $(function () {
        //查询5次
        setTimeDraw(5);
    })
</script>
</body>
</html>