test-业主迁出echarts lines配置项内容和展示

      var geoCoordMap = {
    '庄行':[121.392731086,30.904295066],
    '颛桥':[121.416398316,31.071385051],
    '祝桥':[121.788510225,31.144282959],
    '朱泾':[121.195069534,30.883788799],
    '朱家角':[121.022169308,31.106800236],
    '周浦':[121.586130271,31.104518546],
    '周家嘴路':[121.544000784,31.279484824],
    '重固':[121.185913769,31.210154814],
    '中远两湾城':[121.446787787,31.257673096],
    '中原':[121.540072857,31.327600582],
    '中山公园':[121.424710634,31.226582902],
    '植物园':[121.449437657,31.153811657],
    '镇宁路':[121.440338923,31.223181564],
    '真如':[121.415196038,31.258309019],
    '真光':[121.383318875,31.265592612],
    '柘林':[121.456633582,30.855834996],
    '赵巷':[121.206533711,31.148234408],
    '张堰':[121.288372618,30.80897653],
    '张庙':[121.459536548,31.340804507],
    '张江':[121.635729685,31.196648815],
    '闸北公园':[121.468387286,31.277461132],
    '月浦':[121.418457,31.446995928],
    '源深':[121.541484636,31.239317891],
    '豫园':[121.49671169,31.22945342],
    '御桥':[121.578128127,31.161696509],
    '永和':[121.439073908,31.302815901],
    '盈浦':[121.074903161,31.156485842],
    '叶榭':[121.304466451,30.940100866],
    '洋泾':[121.556691,31.247637],
    '杨行':[121.455932114,31.380407276],
    '杨东':[121.54634086,31.213981814],
    '阳城':[121.43947554,31.288623747],
    '宣桥':[121.698275031,31.033128656],
    '徐行':[121.241797498,31.433988152],
    '徐泾':[121.286729043,31.186900481],
    '徐家汇':[121.441761286,31.197288839],
    '徐汇滨江':[121.466280592,31.174255952],
    '新天地':[121.484014019,31.223047204],
    '新桥':[121.317811752,31.057453333],
    '新江湾城':[121.517559827,31.336735109],
    '新华路':[121.430782776,31.210876828],
    '新成路':[121.274943867,31.387296928],
    '新场':[121.642580051,31.051069312],
    '新浜':[121.078401269,30.942076288],
    '莘庄':[121.377028325,31.110775623],
    '莘闵别墅':[121.358613342,31.090207832],
    '斜土路':[121.468485867,31.202840433],
    '小昆山':[121.142362267,31.035092958],
    '香花桥':[121.134332325,31.205547847],
    '仙霞':[121.397415543,31.21426763],
    '夏阳':[121.142678046,31.134667401],
    '西郊':[121.363601145,31.202141218],
    '西渡':[121.434153935,30.981055677],
    '西藏北路':[121.480596701,31.255814204],
    '武宁':[121.428643379,31.243228412],
    '五里桥':[121.488284571,31.212922881],
    '五角场':[121.515888989,31.301700833],
    '吴泾':[121.464380566,31.057645424],
    '潍坊':[121.531452486,31.225669257],
    '万祥镇':[121.824546824,30.971493095],
    '万体馆':[121.447210262,31.185395967],
    '万里':[121.416598594,31.273671506],
    '外高桥':[121.56919451,31.367867893],
    '外冈':[121.161536952,31.363720616],
    '通河':[121.457559593,31.33531563],
    '亭林':[121.315413311,30.869814084],
    '田林':[121.425488662,31.188866338],
    '天山':[121.396884452,31.22130675],
    '桃浦':[121.36949987,31.290002688],
    '塘桥':[121.53065997,31.21973931],
    '唐镇':[121.666921348,31.227656188],
    '淞南':[121.499666878,31.355981026],
    '淞宝':[121.497589673,31.392106064],
    '松江新城':[121.221324453,31.040069535],
    '松江老城':[121.224726788,30.994649137],
    '松江大学城':[121.234431015,31.069476956],
    '泗泾':[121.269197024,31.118302234],
    '四团':[121.752203735,30.937688072],
    '四川北路':[121.490485796,31.260948109],
    '书院镇':[121.87990827,30.961196683],
    '世博滨江':[121.492263636,31.203443182],
    '世博':[121.498741932,31.183564814],
    '石化':[121.326570737,30.715833853],
    '石湖荡':[121.166601394,30.979194097],
    '佘山':[121.178878329,31.103491714],
    '上海南站':[121.441009023,31.151716163],
    '上大':[121.361209585,31.31375776],
    '山阳':[121.360398596,30.776065254],
    '三林':[121.510196078,31.140115222],
    '人民广场':[121.475234063,31.242111479],
    '曲阳':[121.49890938,31.285931543],
    '青村':[121.565145703,30.935124],
    '七宝':[121.343318812,31.159286084],
    '浦江':[121.538246369,31.070695778],
    '蓬莱公园':[121.49735879,31.213898339],
    '彭浦':[121.456102587,31.31577028],
    '泥城镇':[121.833161357,30.915268464],
    '南翔':[121.318499256,31.314513615],
    '南桥':[121.478701082,30.933722097],
    '南码头':[121.517251256,31.196623651],
    '南京西路':[121.463368797,31.239402593],
    '南京东路':[121.489425152,31.244314582],
    '梅陇':[121.412976241,31.131066931],
    '泖港':[121.174043601,30.939740243],
    '马桥':[121.353638162,31.046465749],
    '马陆':[121.317269893,31.36865613],
    '罗泾':[121.346587479,31.482010188],
    '罗店':[121.357845836,31.407839662],
    '吕巷':[121.20422225,30.847113244],
    '陆家嘴':[121.519288695,31.236849293],
    '鲁迅公园':[121.488682822,31.274465329],
    '龙华':[121.455392522,31.174271217],
    '龙柏':[121.372762531,31.183020625],
    '临平路':[121.504360841,31.267112159],
    '临港新城':[121.907197746,30.927243451],
    '凉城':[121.476675966,31.291471464],
    '练塘':[121.037459744,30.992274326],
    '联洋':[121.557673333,31.231277154],
    '老西门':[121.491522107,31.22535225],
    '老闵行':[121.378126074,31.008535148],
    '老港镇':[121.871391495,31.029738187],
    '廊下':[121.193268414,30.804596316],
    '控江路':[121.539931861,31.291323194],
    '康桥':[121.595505182,31.144443498],
    '康健':[121.427030455,31.166707424],
    '菊园新区':[121.225302843,31.385868659],
    '九亭':[121.321318712,31.13559726],
    '静安新城':[121.385720039,31.166410412],
    '静安寺':[121.451044867,31.227976949],
    '金泽':[120.928212933,31.078832633],
    '金杨':[121.581334394,31.26171302],
    '金山':[121.273445585,30.762716256],
    '金桥':[121.59371275,31.284679716],
    '金汇':[121.381638761,31.184893022],
    '金虹桥':[121.400999793,31.188034976],
    '江湾镇':[121.482394735,31.311535653],
    '江桥':[121.299216655,31.271679268],
    '江宁路':[121.451693162,31.242369667],
    '建国西路':[121.462914444,31.21434063],
    '嘉定新城':[121.263963459,31.34923599],
    '嘉定老城':[121.253642931,31.385011448],
    '惠南':[121.779836954,31.037013281],
    '黄兴公园':[121.544544803,31.300674667],
    '黄浦滨江':[121.508440985,31.221492924],
    '淮海中路':[121.471605067,31.2226863],
    '华新':[121.223333288,31.218367586],
    '华亭':[121.274619015,31.475787803],
    '华泾':[121.457105821,31.120455815],
    '华东理工':[121.432673125,31.1444979],
    '华漕':[121.306107446,31.216354317],
    '花木':[121.561247836,31.215555345],
    '虹桥':[121.407229327,31.208476345],
    '衡山路':[121.453801214,31.217111729],
    '横沙岛':[121.869442,31.337311429],
    '合庆':[121.737025158,31.231268589],
    '航头':[121.586907114,31.056024762],
    '航华':[121.35655375,31.181540917],
    '海湾':[121.607751112,30.860539981],
    '光新':[121.435837197,31.259265197],
    '顾村':[121.368699249,31.362771765],
    '古美':[121.396926576,31.150862242],
    '古北':[121.409940708,31.2013015],
    '共康':[121.434011673,31.332557158],
    '共富':[121.424116,31.3490235],
    '高行':[121.619015379,31.294198448],
    '高境':[121.4924635,31.327708571],
    '高东':[121.642204067,31.327268493],
    '甘泉宜川':[121.442842229,31.269159927],
    '奉贤金汇':[121.580114958,30.980328537],
    '奉城':[121.670790196,30.966293207],
    '枫泾':[121.052772433,30.893621594],
    '丰庄':[121.370876414,31.255089216],
    '董家渡':[121.504982422,31.221144278],
    '东外滩':[121.537689976,31.264866565],
    '大团镇':[121.780361385,30.980434714],
    '大宁':[121.457135205,31.285704783],
    '大华':[121.417915669,31.288244746],
    '大场镇':[121.413211476,31.315624387],
    '打浦桥':[121.474234529,31.209484706],
    '春申':[121.444480269,31.107016486],
    '川沙':[121.721025256,31.159964864],
    '崇明新城':[121.420050714,31.639806143],
    '崇明其它':[121.50151469,31.685294],
    '陈家镇':[121.884927,31.51566125],
    '车墩':[121.290936366,30.994618159],
    '长征':[121.376916,31.240668794],
    '长兴岛':[121.686595833,31.408153833],
    '长寿路':[121.444009384,31.248764791],
    '长桥':[121.447044395,31.139297105],
    '长风':[121.404312859,31.235218941],
    '漕泾':[121.394304017,30.814604099],
    '漕河泾':[121.407882247,31.179464364],
    '曹杨':[121.415957961,31.243296481],
    '曹路':[121.670494914,31.27458932],
    '曹家渡':[121.440586235,31.235000184],
    '不夜城':[121.462753585,31.253300363],
    '碧云':[121.599049771,31.241602143],
    '北新泾':[121.361285659,31.229004095],
    '北外滩':[121.508853265,31.257418675],
    '北蔡':[121.559379,31.181123626],
    '堡镇':[121.6308335,31.58143325],
    '白鹤':[121.121548296,31.250190635],
    '鞍山':[121.5139178,31.282479689],
    '安亭':[121.2028438,31.303483611],
    ' ':[121.299216655,31.271679268],    // 江桥,1个空格
    '  ':[121.538246369,31.070695778],   // 浦江,2个空格
    '   ':[121.510196078,31.140115222]   // 三林,3个空格
    
};

var aData = [  [{name:'江桥'},{name:'江桥',value:205} ], 
  [{name:'江桥'},{name:'丰庄',value:13} ], 
  [{name:'江桥'},{name:'北新泾',value:8} ], 
  [{name:'江桥'},{name:'安亭',value:6} ], 
  [{name:'江桥'},{name:'长风',value:6} ], 
  [{name:'江桥'},{name:'奉贤金汇',value:5} ], 
  [{name:'江桥'},{name:'南京西路',value:5} ], 
  [{name:'江桥'},{name:'上大',value:5} ], 
  [{name:'江桥'},{name:'桃浦',value:5} ], 
  [{name:'江桥'},{name:'杨行',value:5} ], 
  [{name:'江桥'},{name:'赵巷',value:5} ],  ];
var bData = [  [{name:'金桥'},{name:'金桥',value:304} ], 
  [{name:'金桥'},{name:'金杨',value:32} ], 
  [{name:'金桥'},{name:'高行',value:20} ], 
  [{name:'金桥'},{name:'外高桥',value:15} ], 
  [{name:'金桥'},{name:'源深',value:14} ], 
  [{name:'金桥'},{name:'洋泾',value:13} ], 
  [{name:'金桥'},{name:'曹路',value:12} ], 
  [{name:'金桥'},{name:'塘桥',value:12} ], 
  [{name:'金桥'},{name:'高东',value:8} ], 
  [{name:'金桥'},{name:'  ',value:8} ], 
  [{name:'金桥'},{name:'上大',value:8} ], 
  [{name:'金桥'},{name:'顾村',value:6} ], 
  [{name:'金桥'},{name:'惠南',value:5} ],  ];
var cData = [  [{name:'浦江'},{name:'浦江',value:275} ], 
  [{name:'浦江'},{name:'   ',value:14} ], 
  [{name:'浦江'},{name:'世博',value:14} ], 
  [{name:'浦江'},{name:'阳城',value:14} ], 
  [{name:'浦江'},{name:'春申',value:8} ], 
  [{name:'浦江'},{name:'莘庄',value:8} ], 
  [{name:'浦江'},{name:'颛桥',value:8} ], 
  [{name:'浦江'},{name:'北蔡',value:6} ], 
  [{name:'浦江'},{name:'古美',value:6} ], 
  [{name:'浦江'},{name:'江宁路',value:6} ], 
  [{name:'浦江'},{name:'鲁迅公园',value:6} ], 
  [{name:'浦江'},{name:'东外滩',value:5} ], 
  [{name:'浦江'},{name:' ',value:5} ], 
  [{name:'浦江'},{name:'上大',value:5} ], 
  [{name:'浦江'},{name:'周家嘴路',value:5} ],  ];
var dData = [  [{name:'三林'},{name:'三林',value:312} ], 
  [{name:'三林'},{name:'  ',value:33} ], 
  [{name:'三林'},{name:'康桥',value:12} ], 
  [{name:'三林'},{name:'世博滨江',value:12} ], 
  [{name:'三林'},{name:'周浦',value:12} ], 
  [{name:'三林'},{name:'世博',value:11} ], 
  [{name:'三林'},{name:'罗店',value:9} ], 
  [{name:'三林'},{name:'御桥',value:9} ], 
  [{name:'三林'},{name:'源深',value:9} ], 
  [{name:'三林'},{name:'徐家汇',value:8} ], 
  [{name:'三林'},{name:'北蔡',value:7} ], 
  [{name:'三林'},{name:'临平路',value:7} ], 
  [{name:'三林'},{name:'桃浦',value:6} ], 
  [{name:'三林'},{name:'五里桥',value:6} ], 
  [{name:'三林'},{name:'阳城',value:6} ], 
  [{name:'三林'},{name:'洋泾',value:6} ], 
  [{name:'三林'},{name:'南码头',value:5} ], 
  [{name:'三林'},{name:'曲阳',value:5} ], 
  [{name:'三林'},{name:'赵巷',value:5} ], 
  [{name:'三林'},{name:'中原',value:5} ],  ];
var eData = [  [{name:'泗泾'},{name:'泗泾',value:285} ], 
  [{name:'泗泾'},{name:'七宝',value:13} ], 
  [{name:'泗泾'},{name:'古美',value:8} ], 
  [{name:'泗泾'},{name:'莘庄',value:8} ], 
  [{name:'泗泾'},{name:'松江老城',value:8} ], 
  [{name:'泗泾'},{name:'大宁',value:6} ], 
  [{name:'泗泾'},{name:'光新',value:6} ], 
  [{name:'泗泾'},{name:'松江新城',value:6} ], 
  [{name:'泗泾'},{name:'五里桥',value:6} ], 
  [{name:'泗泾'},{name:'中山公园',value:6} ], 
  [{name:'泗泾'},{name:'曹家渡',value:5} ], 
  [{name:'泗泾'},{name:'黄兴公园',value:5} ], 
  [{name:'泗泾'},{name:'康健',value:5} ], 
  [{name:'泗泾'},{name:'彭浦',value:5} ], 
  [{name:'泗泾'},{name:'世博',value:5} ], 
  [{name:'泗泾'},{name:'赵巷',value:5} ], 
  [{name:'泗泾'},{name:'颛桥',value:5} ], ];



var planePath = 'path://M.6,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';

var convertData = 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([{
                coord: fromCoord
            }, {
                coord: toCoord
            }]);
        }
    }
    return res;
};

// 一个 xxdata 对应一个颜色
var color = ['#3ed4ff', '#ffa022', '#a6c84c','#c71585', '#ffff99' ];
var series = [];
[
    ['江桥', aData],
    ['金桥', bData],
    ['浦江', cData],
    ['三林', dData],
    ['泗泾', eData]
    
].forEach(function(item, i) {
    series.push({
        name: item[0] + ' Top10',
        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] + ' Top10',
        type: 'lines',
        zlevel: 2,
        effect: {
            show: true,
            period: 6,
            trailLength: 0,
            symbol: planePath,
            symbolSize: 15
        },
        lineStyle: {
            normal: {
                color: color[i],
                width: 1,
                opacity: 0.4,
                curveness: 0.2
            }
        },
        data: convertData(item[1])
    }, {
        name: item[0] + ' Top10',
        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])
            };
        })
    });
});

option = {
    backgroundColor: '#080a20',
    title: {
        text: '模拟迁徙',
        subtext: '数据纯属虚构',
        left: 'left',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        top: 'bottom',
        left: 'right',
        data: ['北京 Top10', '上海 Top10', '广州 Top10'],
        textStyle: {
            color: '#fff'
        },
        selectedMode: 'single'
    },
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#132937',
                borderColor: '#0692a4'
            },
            emphasis: {
                areaColor: '#0b1c2d'    // 选中区域高亮颜色
            }
        }
    },
    series: series
};