琳琳echarts lines配置项内容和展示

132

      var geoCoordMap = {
     '阿坝州':[102.228564,31.905762],
              '安康市':[109.038044,32.704370],
              '安庆市':[117.058738,30.537897],
              '安顺市':[105.928269,26.228594],
              '安阳市':[114.35,36.1],
              '鞍山市':[122.85,41.12],
              '巴彦淖尔市':[107.423806,40.769179],
              '巴音郭楞州':[86.121688,41.771362],
              '巴中市':[106.757915,31.869189],
              '白城市':[122.840776,45.621086],
              '白山市':[126.435797,41.945859],
              '白银市':[104.171240,36.546681],
              '百色市':[106.631821,23.901512],
              '蚌埠市':[117.357079,32.929498],
              '包头市':[110,40.58],
              '宝鸡市':[107.15,34.38],
              '保定市':[115.48,38.85],
              '保山市':[99.177995,25.120489],
              '北海市':[109.12,21.49],
              '北京市':[116.403119,39.914714],
              '本溪市':[123.73,41.3],
              '毕节地区':[105.333323,27.408562],
              '滨州市':[118.03,37.36],
              '亳州市':[115.787928,33.871210],
              '博尔塔拉州':[82.052436,44.913651],
              '沧州市':[116.83,38.33],
              '昌都地区':[97.185581,31.140575],
              '昌吉州':[87.296038,44.007057],
              '常德市':[111.69,29.05],
              '常州市':[119.95,31.79],
              '朝阳市':[120.446162,41.571827],
              '潮州市':[116.63,23.68],
              '郴州市':[113.037704,25.782263],
              '成都市':[104.06,30.67],
              '承德市':[117.93,40.97],
              '池州市':[117.494476,30.660019],
              '赤峰市':[118.87,42.28],
              '崇左市':[107.357322,22.415455],
              '滁州市':[118.324570,32.317350],
              '楚雄州':[101.529382,25.066355],
              '达州市':[107.494973,31.214198],
              '大理州':[100.223674,25.596899],
              '大连市':[121.62,38.92],
              '大庆市':[125.03,46.58],
              '大同市':[113.3,40.12],
              '丹东市':[124.37,40.13],
              '德宏州':[98.589434,24.441239],
              '德阳市':[104.37,31.13],
              '德州市':[116.29,37.45],
              '迪庆州':[99.713681,27.831029],
              '定西市':[104.626637,35.586056],
              '东莞市':[113.75,23.04],
              '东营市':[118.49,37.46],
              '鄂尔多斯市':[109.781327,39.608266],
              '鄂州市':[114.895594,30.384439],
              '恩施州':[109.491923,30.285888],
              '防城港市':[108.351791,21.617398],
              '佛山市':[113.11,23.05],
              '福州市':[119.3,26.08],
              '抚顺市':[123.97,41.97],
              '抚州市':[116.360918,27.954545],
              '阜新市':[121.660822,42.019250],
              '阜阳市':[115.820932,32.901211],
              '甘南州':[102.917442,34.992211],
              '甘孜州':[101.969232,30.055144],
              '赣州市':[114.935909,25.845295],
              '固原市':[106.285267,36.021523],
              '广安市':[106.635720,30.463983],
              '广元市':[105.819686,32.441040],
              '广州市':[113.23,23.16],
              '贵港市':[109.613707,23.103373],
              '贵阳市':[106.71,26.57],
              '桂林市':[110.28,25.29],
              '果洛州':[100.223722,34.480484],
              '哈尔滨市':[126.63,45.75],
              '海北州':[100.879802,36.960654],
              '海东地区':[102.085206,36.517610],
              '海口市':[110.35,20.02],
              '海南州':[100.624066,36.284363],
              '海西州':[97.342625,37.373799],
              '邯郸市':[114.47,36.6],
              '汉中市':[107.045477,33.081568],
              '杭州市':[120.19,30.26],
              '合肥市':[117.27,31.86],
              '河池市':[108.069947,24.699520],
              '河源市':[114.68,23.73],
              '菏泽市':[115.480656,35.23375],
              '贺州市':[111.552594,24.411053],
              '鹤壁市':[114.297769,35.755425],
              '鹤岗市':[130.292472,47.338665],
              '黑河市':[127.500830,50.250690],
              '衡水市':[115.72,37.72],
              '衡阳市':[112.583818,26.898164],
              '红河州':[103.384064,23.367717],
              '呼和浩特市':[111.65,40.82],
              '呼伦贝尔市':[119.760821,49.201636],
              '葫芦岛市':[120.836932,40.711052],
              '湖州市':[120.1,30.86],
              '怀化市':[109.986958,27.557482],
              '淮安市':[119.15,33.5],
              '淮北市':[116.791447,33.960023],
              '淮南市':[117.018638,32.642811],
              '黄冈市':[114.906618,30.446108],
              '黄南州':[102.007600,35.522851],
              '黄山市':[118.293569,29.734434],
              '黄石市':[115.050683,30.216127],
              '惠州市':[114.4,23.09],
              '鸡西市':[130.941767,45.321539],
              '吉安市':[114.992038,27.113847],
              '吉林市':[126.57,43.87],
              '济南市':[117,36.65],
              '济宁市':[116.59,35.38],
              '佳木斯市':[130.284734,46.813779],
              '嘉兴市':[120.76,30.77],
              '嘉峪关市':[98.289152,39.77313],
              '江门市':[113.06,22.61],
              '焦作市':[113.21,35.24],
              '揭阳市':[116.35,23.55],
              '金昌市':[102.188043,38.520089],
              '金华市':[119.64,29.12],
              '锦州市':[121.15,41.13],
              '晋城市':[112.867332,35.499834],
              '晋中市':[112.738514,37.693361],
              '荆门市':[112.217330,31.042611],
              '荆州市':[112.239741,30.335165],
              '景德镇市':[117.186522,29.303562],
              '九江市':[115.97,29.71],
              '酒泉市':[121.478889,31.228489],
              '开封市':[114.35,34.79],
              '克拉玛依市':[84.77,45.59],
              '克孜勒苏州':[120.62,31.32],
              '昆明市':[102.73,25.04],
              '拉萨市':[91.11,29.97],
              '来宾市':[109.231816,23.741165],
              '莱芜市':[117.67,36.19],
              '兰州市':[103.73,36.03],
              '廊坊市':[116.7,39.53],
              '乐山市':[103.760824,29.600957],
              '丽江市':[100.229628,26.875351],
              '丽水市':[119.92,28.45],
              '连云港市':[119.16,34.59],
              '凉山州':[102.259590,27.892392],
              '辽阳市':[123.172451,41.273339],
              '辽源市':[125.133686,42.923302],
              '聊城市':[115.97,36.45],
              '临沧市':[100.092612,23.887806],
              '临汾市':[111.5,36.08],
              '临夏州':[103.215249,35.598514],
              '临沂市':[118.35,35.05],
              '柳州市':[109.4,24.33],
              '六安市':[116.505252,31.755558],
              '六盘水市':[104.852086,26.591866],
              '龙岩市':[117.017996,25.078685],
              '陇南市':[104.934573,33.394479],
              '娄底市':[111.996396,27.741073],
              '泸州市':[105.39,28.91],
              '洛阳市':[112.44,34.7],
              '漯河市':[114.046061,33.576278],
              '吕梁市':[111.143156,37.527316],
              '马鞍山市':[118.48,31.56],
              '茂名市':[110.88,21.68],
              '眉山市':[103.841429,30.061115],
              '梅州市':[116.1,24.55],
              '绵阳市':[104.73,31.48],
              '牡丹江市':[129.58,44.6],
              '南昌市':[115.89,28.68],
              '南充市':[106.110698,30.837793],
              '南京市':[118.78,32.04],
              '南宁市':[108.33,22.84],
              '南平市':[118.181882,26.643626],
              '南通市':[121.05,32.08],
              '南阳市':[112.542841,33.011419],
              '内江市':[105.073055,29.599461],
              '宁波市':[121.56,29.86],
              '宁德市':[119.542082,26.656527],
              '怒江州':[98.859932,25.860676],
              '攀枝花市':[101.718637,26.582347],
              '盘锦市':[122.070714,41.119997],
              '平顶山市':[113.29,33.75],
              '平凉市':[106.688911,35.550110],
              '萍乡市':[121.478889,31.228489],
              '莆田市':[119.077730,25.448450],
              '濮阳市':[115.026627,35.753297],
              '普洱市':[100.980057,22.788777],
              '七台河市':[131.019048,45.775005],
              '齐齐哈尔市':[123.97,47.33],
              '黔东南州':[107.985352,26.583991],
              '黔南州':[107.523205,26.264535],
              '黔西南州':[104.900557,25.095148],
              '钦州市':[108.638798,21.973350],
              '秦皇岛市':[119.57,39.95],
              '青岛市':[120.33,36.07],
              '清远市':[113.01,23.7],
              '庆阳市':[107.644227,35.726800],
              '衢州市':[118.88,28.97],
              '曲靖市':[103.79,25.51],
              '泉州市':[118.58,24.93],
              '日喀则地区':[88.891485,29.269023],
              '日照市':[119.46,35.42],
              '三门峡市':[111.19,34.76],
              '三明市':[117.642193,26.270835],
              '三亚市':[109.511909,18.252847],
              '厦门市':[118.1,24.46],
              '汕头市':[116.69,23.39],
              '汕尾市':[115.375279,22.786211],
              '商洛市':[109.934208,33.873907],
              '商丘市':[115.641885,34.438588],
              '上海市':[121.48,31.22],
              '上饶市':[117.955463,28.457622],
              '韶关市':[113.62,24.84],
              '邵阳市':[111.461525,27.236811],
              '绍兴市':[120.58,30.01],
              '深圳市':[114.07,22.62],
              '沈阳市':[123.38,41.8],
              '十堰市':[110.801228,32.636994],
              '石家庄市':[114.48,38.03],
              '双鸭山市':[131.171401,46.655102],
              '朔州市':[112.479927,39.337671],
              '四平市':[124.391382,43.175524],
              '松原市':[124.832994,45.136048],
              '苏州市':[120.62,31.32],
              '绥化市':[126.989094,46.646063],
              '随州市':[113.379358,31.717857],
              '遂宁市':[105.564887,30.557491],
              '台州市':[121.420757,28.656386],
              '太原市':[112.53,37.87],
              '泰安市':[117.13,36.18],
              '泰州市':[119.9,32.49],
              '唐山市':[118.02,39.63],
              '天津市':[117.2,39.13],
              '天水市':[105.736931,34.584319],
              '铁岭市':[123.854849,42.299757],
              '通化市':[125.942650,41.736397],
              '通辽市':[122.260363,43.633756],
              '铜川市':[109.11,35.09],
              '铜陵市':[117.819428,30.940929],
              '铜仁地区':[109.168558,27.674902],
              '威海市':[122.1,37.5],
              '潍坊市':[119.1,36.62],
              '渭南市':[109.5,34.52],
              '温州市':[120.65,28.01],
              '文山州':[104.246294,23.374086],
              '乌海市':[106.831999,39.683177],
              '乌兰察布市':[113.112846,41.022362],
              '乌鲁木齐市':[87.68,43.77],
              '无锡市':[120.29,31.59],
              '芜湖市':[118.38,31.33],
              '吴忠市':[106.208254,37.993561],
              '梧州市':[111.305471,23.485394],
              '武汉市':[114.31,30.52],
              '武威市':[102.640147,37.933172],
              '西安市':[108.95,34.27],
              '西宁市':[101.74,36.56],
              '西双版纳州':[100.803038,22.009433],
              '咸宁市':[114.300060,29.880656],
              '咸阳市':[108.72,34.36],
              '湘潭市':[112.91,27.87],
              '湘西州':[109.745745,28.317950],
              '孝感市':[113.935734,30.927954],
              '忻州市':[112.727938,38.461030],
              '新乡市':[121.478889,31.228489],
              '新余市':[114.947117,27.822321],
              '信阳市':[114.085490,32.128582],
              '邢台市':[114.48,37.05],
              '宿迁市':[118.3,33.96],
              '宿州市':[116.988692,33.636772],
              '徐州市':[117.2,34.26],
              '许昌市':[113.835312,34.026739],
              '宣城市':[118.752096,30.951642],
              '雅安市':[103.009356,29.999716],
              '烟台市':[121.39,37.52],
              '延安市':[109.47,36.6],
              '延边州':[129.485901,42.896413],
              '盐城市':[120.13,33.38],
              '扬州市':[119.42,32.39],
              '阳江市':[111.95,21.85],
              '阳泉市':[113.57,37.85],
              '伊春市':[128.910765,47.734685],
              '伊犁州':[81.297853,43.922248],
              '宜宾市':[104.56,29.77],
              '宜昌市':[111.3,30.7],
              '宜春市':[114.400038,27.811129],
              '益阳市':[112.366546,28.588087],
              '银川市':[106.27,38.47],
              '鹰潭市':[117.035450,28.241309],
              '营口市':[122.18,40.65],
              '永州市':[111.614647,26.435971],
              '榆林市':[109.745925,38.279439],
              '玉林市':[110.151676,22.643973],
              '玉树州':[97.013316,33.006239],
              '玉溪市':[102.52,24.35],
              '岳阳市':[113.09,29.37],
              '云浮市':[112.02,22.93],
              '运城市':[111.006853,35.038859],
              '枣庄市':[117.57,34.86],
              '湛江市':[110.359377,21.270708],
              '张家界市':[110.479191,29.117096],
              '张家口市':[114.87,40.82],
              '张掖市':[100.459891,38.939320],
              '漳州市':[117.676204,24.517064],
              '长春市':[125.35,43.88],
              '长沙市':[113,28.21],
              '长治市':[113.08,36.18],
              '昭通市':[103.725020,27.340632],
              '肇庆市':[112.44,23.05],
              '镇江市':[119.44,32.2],
              '郑州市':[113.65,34.76],
              '中山市':[113.38,22.52],
              '中卫市':[105.196754,37.521124],
              '重庆市':[106.54,29.59],
              '舟山市':[122.207216,29.985295],
              '周口市':[114.654101,33.623740],
              '珠海市':[113.52,22.3],
              '株洲市':[113.16,27.83],
              '驻马店市':[114.049153,32.983158],
              '资阳市':[104.635930,30.132191],
              '淄博市':[118.05,36.78],
              '自贡市':[104.778442,29.33903],
              '遵义市':[106.9,27.7]
};

var BJData = [
    [{name:'北京市'}, {name:'上海市',value:95}],
    [{name:'北京市'}, {name:'成都市',value:90}],
    [{name:'北京市'}, {name:'西安市',value:80}],
   
];



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 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;
};

var color = ['#a6c84c', '#ffa022', '#46bee9'];
var series = [];
[['北京', BJData]].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: '#404a59',
    title : {
        text: '模拟迁徙',
        subtext: '数据纯属虚构',
        left: 'center',
        textStyle : {
            color: '#fff'
        }
    },
    tooltip : {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        top: 'bottom',
        left: 'right',
        data:['北京 Top10'],
        textStyle: {
            color: '#fff'
        },
        selectedMode: 'single'
    },
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#404a59'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: series
};