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:},

            dataType: "json",

            success: function(mapdata){

                console.log(mapdata)

             var option1 = myChart.getOption()

                option1.series[].data=mapdata

                myChart.setOption(option1)

            },

            error:function (err) {

              console.log(err)

            }

        });

        if(execTiemes>)

        {

            console.log(execTiemes);

            execTiemes--;

            setTime = setTimeout('setTimeDraw('+ execTiemes +')', );

        }

        else

        {

            clearTimeout(setTime);

        }

    }

    function randomValue() {

        return Math.round(Math.random()*);

    }

    var option = {

        tooltip: {},

        visualMap: {

            min: ,

            max: ,

            left: 'left',

            top: 'bottom',

            text: ['High','Low'],

            seriesIndex: [],

            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: ,

                    shadowOffsetY: ,

                    shadowBlur: ,

                    borderWidth: ,

                    shadowColor: 'rgba(0, 0, 0, 0.5)'

                }

            }

        },

        series : [

            {

                type: 'scatter',

                coordinateSystem: 'geo',

                symbolSize: ,

                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: ,

                label: {

                    normal: {

                        formatter: '{b}',

                        position: 'right',

                        show: false

                    },

                    emphasis: {

                        show: true

                    }

                },

                itemStyle: {

                    normal: {

                        color: '#F06C00'

                    }

                }

            },

            {

                name: 'IP访问量',

                type: 'map',

                geoIndex: ,

                // tooltip: {show: false},

                data:[

                    {name: '北京', value: },

                    {name: '天津', value: },

                    {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();

    })

</script>

</body>

</html>

echart 地图的更多相关文章

Echart - 地图散点图(服务网点图)的实现
Echart是百度开发的一个javascript图表库,可以流程运行于pc和移动端,底层依赖轻量级的 Canvas 类库 ZRender. ECharts 提供了常规的折线图,柱状图,散点图,饼图,K ...
echart地图下钻
需求:展示中国地图,鼠标点击显示对应的省份在echart的github上下载需要的地图文件China.js,各个省份的json文件遇到的问题:直接在浏览器打开报错,跨域问题,用webstrom打 ...
Echart地图城市用json返回格式
用Echarts中,使用地图的series部分中展示城市如果用json返回数据的话,js不能直接用字符串使用.需要处理一下. php中的部分 json返回的数据 js中获取json信息用ajax实现 ...
百度Echart 地图
使用百度地图做一个全国地图数据分析的功能,如下图代码 <%@ Page Language="C#" AutoEventWireup="true" Cod ...
Echart 地图实例
1.地图实例 function func_InEchart() { require.config({ paths: { echarts: '../Scripts/echart2/echarts' }, ...
echarts 点击方法总结，点任意一点获取点击数据，在多图联动中用生成标线举例
关于点击(包括左击,双击,右击等)echarts图形任意一点,获取相关的图形数据,尤其是多图,我想部分人遇到这个问题一直很头大.下面我用举例说明,如何在多图联动基础上,我们点击点击任意一个图上任意一点 ...
Echarts 南海诸岛简图显示位置调整
最近需要echart同时显示海南岛和南海诸岛,开始想寻找南海诸岛的数据,经过查找,这种简图数据是没有的(china.js地图数据一一找过了),下图是echarts的一些示例,没有满足我们的要求 ...
echarts 点击方法总结，点任意一点获取点击数据，举例说明:在多图联动中点击绘制标线
关于点击(包括左击,双击,右击等)echarts图形任意一点,获取相关的图形数据,尤其是多图,我想部分人遇到这个问题一直很头大.下面我用举例说明,如何在多图联动基础上,我们点击任意一个图上任意一点,在 ...
canvas实现平面迁徙图
前言最近在做自己维护的一个可视化工具的时候,在添加基于echart的雷达图的时候,按照echart官网案例写完发现在自己项目中无法正常运行,排查了一番发现是我项目中echart的版本太低.找到问题原 ...

随机推荐

keychain实现ssh对秘钥免登陆免输入密码
Linux同一网段实现密码认证,管理. 项目:https://github.com/funtoo/keychain 01.生成秘钥 ssh-keygen -t rsa # -t rsa | ds ...
awk 取列后对数值进行判断取出大于1的数值
[root@dataline-prod nginx]# tail -2 access.log 122.238.119.177 - - [26/Oct/2018:18:20:25 +0800] &quo ...
PHP-表达式
最精确的定义一个表达式的方式就是"任何有值的东西" $a = 5; 1 > 2;等
BasicAuth和OAuth
参考资料百度百科BasicAuth 维基百科OAuth BasicAuth基本授权 BasicAuth又叫HttpAuth,它非常简单.例如你访问一个页面时,会弹出用户名密码框它的优点是:简单,只 ...
PowerDesigner 的常用方法
http://www.cnblogs.com/studyzy/archive/2008/01/23/1050194.html PowerDesigner 的常用方法修改外键命名规则选择Databa ...
百度定位SDK实现获取当前经纬度及位置
使用Android自带的LocationManager和Location获取位置的时候,经常会有获取的location为null的情况,并且操作起来也不是很方便,在这个Demo里我使用了百度地图API ...
iOS - CodeReview 代码评审
1.CodeReview Code Review 中文应该译作 "代码审查" 或是 "代码评审",这是一个流程,当开发人员写好代码后,需要让别人来 review ...
Linux内核(14) - 二分法与printk
人生就是一个茶几,上面摆满了杯具.内核也是一个大茶几,不过它上面的杯具是一个个的bug.确定bug什么时候被引入是一个很关键的步骤,在这个定位bug的过程中,不论有意或无意,都会很自然地用到二分查找的 ...
[Android&Java]浅谈设计模式-代码篇：观察者模式Observer
观察者,就如同一个人,对非常多东西都感兴趣,就好像音乐.电子产品.Game.股票等,这些东西的变化都能引起爱好者们的注意并时刻关注他们.在代码中.我们也有这种一种方式来设计一些好玩的思想来.今天就写个 ...
在ubuntu16.4中为pycharm创建桌面快捷启动方式
在ubuntu环境中每次使用pycharm需要到它的安装目录中执行./pycharm.sh来启动pycharm.比较麻烦,既然ubuntu提供了桌面环境我们应该从分利用.哈哈哈... 上干货我的py ...

echart 地图

echart 地图的更多相关文章

随机推荐

热门专题