$(function() {
    loadMapData();    //页面加载时调用封装加载echarts地图的函数
});
function loadMapData (cityName) {
    if (cityName == '' || cityName == null) {
        cityName = '广州市';    //默认查询的城市, 此处默认查询广州市的迁入迁出情况
    }
    $.get('${basePath }/enterpriseMigration/getCityMigrationData',{'cityName':cityName}, function (migrationData) {
        var inDataCount = migrationData.inDataCount;
        var outDataCount = migrationData.outDataCount;
        if (inDataCount == null) {
            inDataCount = 0;
        }
        if (outDataCount == null) {
            outDataCount = 0;
        }
    $("#inDataCount").html(inDataCount+' <span> 户</span>');
    $("#outDataCount").html(outDataCount+' <span> 户</span>');
    $("#inDataCount").html();
    var geoCoordMap = {    //可以在地图上显示的城市的坐标信息
            '广州市': [113.5107,23.2196],
            '韶关市':[113.6,24.82],
            '深圳市':[114.05,22.55],
            '珠海市':[113.57,22.27],
            '汕头市':[116.68,23.35],
            '佛山市':[113.12,23.02],
            '江门市':[113.08,22.58],
            '湛江市':[110.35,21.27],
            '茂名市':[110.92,21.67],
            '肇庆市':[112.47,23.05],
            '惠州市':[114.42,23.12],
            '梅州市':[116.12,24.28],
            '汕尾市':[115.37,22.78],
            '河源市':[114.7,23.73],
            '阳江市':[111.98,21.87],
            '清远市':[113.03,23.7],
            '东莞市':[113.75,23.05],
            '中山市':[113.38,22.52],
            '潮州市':[116.62,23.67],
            '揭阳市':[116.37,23.55],
            '云浮市':[112.03,22.92]
    };

    var inData = [
        [{name:'云浮市',value:95},{name:'广州市'}],    //数据中name的城市名称必须与geoCoordMap中城市名称一致, 不然关联不上
        [{name:'揭阳市',value:95},{name:'广州市'}]
    ];

    var outData = [
        [{name:'广州市'},{name:'揭阳市',value:95}],
        [{name:'广州市'},{name:'潮州市',value:95}]
    ];
    
    
        inData = migrationData.in;
        outData = migrationData.out;
        if (inData == null){
            inData = [];
        }
        if (outData == null){
            outData = [];
        }
        /* for(var i = 0; i < inData.length; i ++) {
            alert(inData[i][1].name);
        } */
    
    var planePath = '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';

    var convertData0 = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = geoCoordMap[dataItem[0].name];
            var toCoord = geoCoordMap[dataItem[1].name];
            if (fromCoord && toCoord) {
                res.push({
                    fromName: dataItem[0].name,
                    toName: dataItem[1].name,
                    coords: [toCoord, fromCoord]
                });
            }
        }
        return res;
    };
    var convertData1 = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = geoCoordMap[dataItem[0].name];
            var toCoord = geoCoordMap[dataItem[1].name];
            if (fromCoord && toCoord) {
                res.push({
                    fromName: dataItem[0].name,
                    toName: dataItem[1].name,
                    coords: [fromCoord ,toCoord]
                });
            }
        }
        return res;
    };
    var color = ['#eee035', '#b958f5'];
    var series = [];
    [['迁入企业', inData], ['迁出企业', outData]].forEach(function (item, i) {
        if (i == 0) {
            convertData = convertData0;
        }
        if (i == 1) {
            convertData = convertData1;
        }
        series.push({
            name: item[0],
            type: 'lines',
            zlevel: 1,
            effect: {
                show: true,
                period: 6,
                trailLength: 0.7,
                color: '#fff',
                symbolSize: 3
            },
            lineStyle: {
                normal: {
                    color: color[i],
                    width: 0,
                    curveness: 0.2
                }
            },
            data: convertData(item[1])
        },
        {
            name: item[0],
            type: 'lines',
            zlevel: 2,
            symbol: ['none', 'arrow'],
            symbolSize: 10,
            effect: {
                show: true,
                period: 6,
                trailLength: 0,
                symbol: 'triangle',
                symbolSize: 10
            },
            lineStyle: {
                normal: {
                    color: color[i],
                    width: 1,
                    opacity: 0.6,
                    curveness: 0.2
                }
            },
            data: convertData(item[1])
        },
        {
            name: item[0],
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
                brushType: 'stroke'
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: '{b}'
                }
            },
            symbolSize: function (val) {
                return val[2] / 8;
            },
            itemStyle: {
                normal: {
                    color: color[i]
                }
            },
            data: item[1].map(function (dataItem) {
                return {
                    name: dataItem[1].name,
                    value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                };
            })
        });
    });
         $.getJSON(basePath + '/resources/data/guangdong.json', function(data) {
             echarts.registerMap('guangdong', data);
             gdchart3 = echarts.init(document.getElementById('gdmap3'));
    var option = {    
        title : {
            left: 'center',
            textStyle : {
                color: '#fff'
            }
        },
        tooltip : {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            bottom: 200,
            left: 100,
            data:['迁入企业', '迁出企业'],
            textStyle: {
                color: '#fff'
            },
            selectedMode: 'multiple'
        },
        geo: {
            map: 'guangdong',
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#1c498a',
                    borderColor: '#d278fc'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        },
        layoutCenter: ['50%', '38.5%'],   //地图在屏幕上显示的位置
        layoutSize: screen.width/1.95,  //地图加载的尺寸比例设置, screen.width为屏幕可用宽度
        series: series
    };

            gdchart3.setOption(option);
              $(window).on("resize", gdchart3.resize);    //根据屏幕大小, 自适应加载地图
            gdchart3.on('click',function (params) {
                var cityName = params.name;  //点击地图获取城市名称
                $("#inTitleSpan").html('实时各地迁入'+cityName+'的企业总量');
                $("#outTitleSpan").html('实时各地迁出'+cityName+'的企业总量');
                loadMapData(cityName);
            });
         });
    },'json');
}

echarts--迁徙图特性简介的更多相关文章

  1. echarts迁徙图

    前段时间在echarts社区,看见别人写的echarts迁徙图,学习并也写了一个 预览地址: https://gallery.echartsjs.com/editor.html?c=xYS-YtzOa ...

  2. Echarts4+EchartsGL 3D迁徙图(附源码)

    最近遇到些Echarts迁徙图问题,在实现二维地图的迁徙图后开始开发3D迁徙图,在网上一查,发现3D版本迁徙图资料较少,自己研究并借鉴一些资料后写了一个小demo,希望能帮大家少走些弯路,共同学习. ...

  3. 【转】各种图(流程图,思维导图,UML,拓扑图,ER图)简介

    原文地址:各种图(流程图,思维导图,UML,拓扑图,ER图)简介 流程图 1.定义:流程图是对过程.算法.流程的一种图像表示,在技术设计.交流及商业简报等领域有广泛的应用. 2.案例 3.计算机语言只 ...

  4. SpartanBrowser产品和安全特性简介

    v:* { } o:* { } w:* { } .shape { }p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-botto ...

  5. vue中使用 echarts3.0 或 echarts2.0 (模拟迁徙图,折线图)

    一.echarts3.0(官网: http://echarts.baidu.com/) 首先通过npm安装echarts依赖,安装的为3.0版本 npm install echarts -s 也可以使 ...

  6. 常见Struts、Hibernate、Spring、J2EE、ibatis、Oracle等开发框架架构图及其简介

    各种系统架构图及其简介 转载请保留出处,不胜人生一场醉汇总. 以下文字和架构图均在本人相关系统设计和架构方案中有所应用. 原文出处:http://space.itpub.net/6517/viewsp ...

  7. leaflet 结合 Echarts4 实现迁徙图(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  8. arcgis api 4.x for js 集成 Echarts4 实现模拟迁徙图效果(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...

  9. echarts雷达图

    用echarts展现雷达图的定制 <!doctype html> <html> <head> <meta charset="utf-8"& ...

随机推荐

  1. 【Python】Shell MD5使用的那些事

    MD5 应该是用的非常多的算法,就自己使用经验说说吧. 场景 算法层面不多说了,维基百科,还有很多文章都有说明. 主要用过的场景 密码存储,现在基本没怎么有使用的了,毕竟破解容易了很多 API校验,现 ...

  2. Leetcode_114_Flatten Binary Tree to Linked List

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/42744919 Given a binary tree, f ...

  3. 在多台PC上进行ROS通讯-学习笔记

    首先,致谢易科(ExBot)和ROSWiki中文社区. 重要参考文献: Running ROS across multiple machines http://wiki.ros.org/ROS/Tut ...

  4. 图像检索:CEDD(Color and Edge Directivity Descriptor)算法

    颜色和边缘的方向性描述符(Color and Edge Directivity Descriptor,CEDD) 本文节选自论文<Android手机上图像分类技术的研究>. CEDD具有抽 ...

  5. Jumpstart for Oracle Service Bus Development

    http://www.oracle.com/technetwork/articles/jumpstart-for-osb-development-page--097357.html Tutorial ...

  6. 标准会话管理器——StandardManager

    用于保存状态的会话对象已经有了,现在就需要一个管理器来管理所有会话,例如会话id生成.根据会话id找出对应的会话.对于过期的会话进行销毁等等操作.用一句话描述标准会话管理器:提供一个专门管理某个web ...

  7. LeetCode之“树”:Sum Root to Leaf Numbers

    题目链接 题目要求: Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represe ...

  8. Android开发常用网站汇总

    1.eoe Android开发者论坛 目前国内最早的Android开发者社区,人气非常旺聚集了不少Android开发方面的高手,开发中遇到的问题大都能在这里获得解决,网站最大的特色是定期发布<e ...

  9. 【LaTeX排版】LaTeX论文排版<三>

    A picture is worth a thousand words(一图胜千言).图在论文中的重要性不言而喻,本文主要讲解图的制作与插入. 1.图像的插入     图像可以分为两大类:位图和向量图 ...

  10. OpenCV——素描

    具体的算法原理可以参考: PS滤镜,素描算法 // define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_ ...