echarts--遷徙圖特性簡介

$(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');
}