码迷,mamicode.com
首页 > 其他好文 > 详细

echart 地图

时间:2017-08-19 23:44:43      阅读:499      评论:0      收藏:0      [点我收藏+]

标签:normal   2.0   error:   fse   福建   url   document   台湾   show   

<%@ 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>

 

echart 地图

标签:normal   2.0   error:   fse   福建   url   document   台湾   show   

原文地址:http://www.cnblogs.com/rocky-AGE-24/p/7398181.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!