$(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. AngularJS进阶(二十四)AngularJS与单选框及多选框的双向动态绑定

    AngularJS与单选框及多选框的双向动态绑定      赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! AngularJS 在 <in ...

  2. JSP判断移动设备

    日期: 2014年3月6日 人员::铁锚 看到了一篇很好的文章, <在天猫,前端做什么?>,里面有天猫php判断移动设备的正则(个人猜测),觉得很好用,于是就决定移植到JSP里面. jsp ...

  3. WINCE的批处理

    WINCE上没有提供象window一样的bat文件,如果需要类似功能可以借助第三方程序MortScript MortScript是一个运行于WINCE上的免费脚本解释程序,脚本文件为.mscr或.mo ...

  4. linux下ruby使用tcl/tk编程环境设置

    正常情况下最新的ruby都是不带tcl/tk选项编译的,所以我们在运行tcl/tk代码时都会发生找不到tk库的错误.解决办法很简单只要以tcl/tk选项编译ruby即可. 这里以ubuntu 15.0 ...

  5. C语言之插入排序

    插入法排序的要领就是每读入一个数立即插入到最终存放的数组中,每次插入都使得该数组有序. 上代码: #include <stdio.h> #include <stdlib.h> ...

  6. 网站开发进阶(十八)js获取html标签中的值

    js获取html标签中的值 项目开发过程中,由于需求所迫,需要获取html标签元素中的内容,下面做一简单总结.以下所讲的示例适用于其它标签元素. 主要包括2中方法获取元素内容: 方法一:.innerT ...

  7. PS 滤镜算法原理——碎片效果

    %%% Fragment %%% 对原图做四个方向的平移,然后对平移的结果取平均 %%% 碎片效果 clc; clear all; Image=imread('4.jpg'); Image=doubl ...

  8. iOS中动态计算不同颜色、字体的文字高度

    在改项目bug的时候,有一个问题动态计算label的高度,前开发者竟然用字符串长度除以14.16这样的常量来计算是否换行,结果cell的高度问题非常严重. 因为label内容里有部分关键字是要另一种颜 ...

  9. Select、Poll与Epoll比较

    (1)select select最早于1983年出现在4.2BSD中,它通过一个select()系统调用来监视多个文件描述符的数组,当select()返回后,该数组中就绪的文件描述符便会被内核修改标志 ...

  10. Mac OS X下各种文件编码的转换方法

    何曾几时本猫还在windows下编码的时候,那时ruby的源代码的编码格式都是gbk啊!导致N多中文显示为乱码.后来无奈写了个转换代码从gbk编码转为utf-8格式的小工具: #!/usr/bin/r ...