Echarts地图-辐射图

1,386 阅读6分钟

直接上代码吧,将此代码复制到echarts示例里面就可以直接看到效果啦。

var geoCoordMap = {
   '北京市':[116.407526,39.904030],
    '天津市':[117.200983,39.084158],
    '石家庄市':[114.514859,38.042306],
    '唐山市':[118.180193,39.630867],
    '秦皇岛市':[119.600492,39.935385],
    '邯郸市':[114.538961,36.625657],
    '邢台市':[114.504844,37.070589],
    '保定市':[115.464806,38.873891],
    '张家口市':[114.887543,40.824418],
    '承德市':[117.962410,40.954071],
    '沧州市':[116.838834,38.304477],
    '廊坊市':[116.683752,39.538047],
    '衡水市':[115.670177,37.738920],
    '太原市':[112.548879,37.870590],
    '大同市':[113.300129,40.076762],
    '阳泉市':[113.580519,37.856971],
    '长治市':[113.116255,36.195386],
    '晋城市':[112.851831,35.490701],
    '朔州市':[112.432825,39.331595],
    '晋中市':[112.752694,37.687024],
    '运城市':[111.007528,35.026412],
    '忻州市':[112.734174,38.416663],
    '临汾市':[111.518976,36.088005],
    '吕梁市':[111.144319,37.518314],
    '呼和浩特市':[111.749180,40.842585],
    '包头市':[109.840347,40.657449],
    '乌海市':[106.794249,39.655388],
    '赤峰市':[118.886856,42.257817],
    '通辽市':[122.243444,43.652890],
    '鄂尔多斯市':[109.781327,39.608266],
    '呼伦贝尔市':[119.765744,49.211574],
    '巴彦淖尔市':[107.387657,40.743213],
    '乌兰察布市':[113.132585,40.994785],
    '兴安盟':[122.067042,46.077561],
    '锡林郭勒盟':[116.048222,43.933454],
    '阿拉善盟':[105.728969,38.851892],
    '沈阳市':[123.431474,41.805698],
    '大连市':[121.614682,38.914003],
    '鞍山市':[122.994329,41.108647],
    '抚顺市':[123.957208,41.880872],
    '本溪市':[123.766485,41.294175],
    '丹东市':[124.354706,40.000499],
    '锦州市':[121.127003,41.095119],
    '营口市':[122.235417,40.667012],
    '阜新市':[121.670323,42.021619],
    '辽阳市':[123.236944,41.267244],
    '盘锦市':[122.070714,41.119997],
    '铁岭市':[123.726166,42.223769],
    '朝阳市':[120.450372,41.573734],
    '葫芦岛市':[120.836932,40.711052],
    '长春市':[125.323544,43.817071],
    '吉林市':[126.549576,43.837883],
    '四平市':[124.350398,43.166419],
    '辽源市':[125.143532,42.887918],
    '通化市':[125.939697,41.728401],
    '白山市':[126.423587,41.939994],
    '松原市':[124.825117,45.141789],
    '白城市':[122.839024,45.619641],
    '延边朝鲜族自治州':[129.508946,42.891253],
    '哈尔滨市':[126.534967,45.803775],
    '齐齐哈尔市':[123.918186,47.354348],
    '鸡西市':[130.969333,45.295075],
    '鹤岗市':[130.297964,47.349916],
    '双鸭山市':[131.159133,46.646508],
    '大庆市':[125.103784,46.589309],
    '伊春市':[128.841147,47.727536],
    '佳木斯市':[130.318917,46.799922],
    '七台河市':[131.003138,45.771726],
    '牡丹江市':[129.633168,44.551653],
    '黑河市':[127.528560,50.245329],
    '绥化市':[126.968887,46.653845],
    '大兴安岭地区':[124.711080,52.335206],
    '上海市':[121.473701,31.230416],
    '南京市':[118.796877,32.060255],
    '无锡市':[120.311910,31.491169],
    '徐州市':[117.284124,34.205768],
    '常州市':[119.973987,31.810689],
    '苏州市':[120.585315,31.298886],
    '南通市':[120.894291,31.980171],
    '连云港市':[119.221611,34.596653],
    '淮安市':[119.015285,33.610353],
    '盐城市':[120.163561,33.347382],
    '扬州市':[119.412966,32.394210],
    '镇江市':[119.425836,32.187849],
    '泰州市':[119.923116,32.455778],
    '宿迁市':[118.275198,33.963232],
    '杭州市':[120.155070,30.274084],
    '宁波市':[121.550357,29.874556],
    '温州市':[120.699366,27.994267],
    '嘉兴市':[120.755486,30.746129],
    '湖州市':[120.086823,30.894348],
    '绍兴市':[120.580232,30.029752],
    '金华市':[119.647444,29.079059],
    '衢州市':[118.859457,28.970079],
    '舟山市':[122.207215,29.985295],
    '台州市':[121.420757,28.656386],
    '丽水市':[119.922796,28.467630],
    '合肥市':[117.227239,31.820586],
    '芜湖市':[118.432941,31.352859],
    '蚌埠市':[117.389719,32.916287],
    '淮南市':[116.999932,32.625478],
    '马鞍山市':[118.506759,31.670452],
    '淮北市':[116.798265,33.955844],
    '铜陵市':[117.812079,30.945429],
    '安庆市':[117.063754,30.543494],
    '黄山市':[118.337481,29.714655],
    '滁州市':[118.317106,32.301556],
    '阜阳市':[115.814204,32.890124],
    '宿州市':[116.964356,33.646373],
    '六安市':[116.521854,31.733699],
    '亳州市':[115.778676,33.844582],
    '池州市':[117.491568,30.664800],
    '宣城市':[118.758816,30.940718],
    '福州市':[119.296494,26.074507],
    '厦门市':[118.089425,24.479833],
    '莆田市':[119.007777,25.454084],
    '三明市':[117.638678,26.263406],
    '泉州市':[118.675675,24.874132],
    '漳州市':[117.647481,24.512948],
    '南平市':[118.177708,26.641768],
    '龙岩市':[117.017536,25.075123],
    '宁德市':[119.547932,26.665617],
    '南昌市':[115.858197,28.682892],
    '景德镇市':[117.178419,29.268835],
    '萍乡市':[113.854556,27.622768],
    '九江市':[116.001930,29.705077],
    '新余市':[114.917346,27.817808],
    '鹰潭市':[117.069202,28.260189],
    '赣州市':[114.935029,25.831829],
    '吉安市':[114.992509,27.113443],
    '宜春市':[114.416778,27.815619],
    '抚州市':[116.358181,27.949217],
    '上饶市':[117.943433,28.454863],
    '济南市':[117.119999,36.651216],
    '青岛市':[120.382639,36.067082],
    '淄博市':[118.054927,36.813487],
    '枣庄市':[117.323725,34.810487],
    '东营市':[118.674767,37.434751],
    '烟台市':[121.447935,37.463822],
    '潍坊市':[119.161755,36.706774],
    '济宁市':[116.587098,35.414921],
    '泰安市':[117.087614,36.200252],
    '威海市':[122.120419,37.513068],
    '日照市':[119.526888,35.416377],
    '临沂市':[118.356448,35.104672],
    '德州市':[116.357464,37.434092],
    '聊城市':[115.985371,36.456703],
    '滨州市':[117.970703,37.381990],
    '菏泽市':[115.480656,35.233750],
    '郑州市':[113.625368,34.746599],
    '开封市':[114.307581,34.797239],
    '洛阳市':[112.454040,34.619682],
    '平顶山市':[113.192661,33.766169],
    '安阳市':[114.392392,36.097577],
    '鹤壁市':[114.297272,35.747225],
    '新乡市':[113.926800,35.303004],
    '焦作市':[113.241823,35.215892],
    '濮阳市':[115.029215,35.761829],
    '许昌市':[113.852640,34.035506],
    '漯河市':[114.016539,33.581412],
    '三门峡市':[111.200135,34.772493],
    '南阳市':[112.528321,32.990833],
    '商丘市':[115.656370,34.414172],
    '信阳市':[114.091023,32.146983],
    '周口市':[114.696951,33.626149],
    '驻马店市':[114.022298,33.011529],
    '武汉市':[114.305392,30.593098],
    '黄石市':[115.038520,30.199652],
    '十堰市':[110.797990,32.629397],
    '宜昌市':[111.286471,30.691967],
    '襄阳市':[112.122414,32.008986],
    '鄂州市':[114.894843,30.391940],
    '荆门市':[112.199265,31.035423],
    '孝感市':[113.916902,30.924568],
    '荆州市':[112.239741,30.335165],
    '黄冈市':[114.872316,30.453905],
    '咸宁市':[114.322492,29.841443],
    '随州市':[113.382458,31.690215],
    '恩施土家族苗族自治州':[109.488172,30.272156],
    '长沙市':[112.938814,28.228209],
    '株洲市':[113.134002,27.827550],
    '湘潭市':[112.944049,27.829738],
    '衡阳市':[112.571997,26.893230],
    '邵阳市':[111.467791,27.238892],
    '岳阳市':[113.128958,29.357104],
    '常德市':[111.698497,29.031673],
    '张家界市':[110.479191,29.117096],
    '益阳市':[112.355180,28.553860],
    '郴州市':[113.014717,25.770509],
    '永州市':[111.613445,26.420394],
    '怀化市':[109.998488,27.554978],
    '娄底市':[111.993497,27.700062],
    '湘西土家族苗族自治州':[109.739172,28.311947],
    '广州市':[113.264434,23.129162],
    '韶关市':[113.597522,24.810403],
    '深圳市':[114.057868,22.543099],
    '珠海市':[113.576726,22.270715],
    '汕头市':[116.681972,23.354091],
    '佛山市':[113.121416,23.021548],
    '江门市':[113.081901,22.578738],
    '湛江市':[110.359377,21.270707],
    '茂名市':[110.925456,21.662999],
    '肇庆市':[112.465091,23.047191],
    '惠州市':[114.416196,23.111847],
    '梅州市':[116.122238,24.288615],
    '汕尾市':[115.375278,22.786211],
    '河源市':[114.700447,23.743538],
    '阳江市':[111.982232,21.857958],
    '清远市':[113.056031,23.681763],
    '东莞市':[113.751765,23.020536],
    '中山市':[113.392782,22.517645],
    '潮州市':[116.622603,23.656950],
    '揭阳市':[116.372831,23.549993],
    '云浮市':[112.044491,22.915094],
    '南宁市':[108.366543,22.817002],
    '柳州市':[109.415953,24.325502],
    '桂林市':[110.290194,25.273566],
    '梧州市':[111.279115,23.476962],
    '北海市':[109.119927,21.481254],
    '防城港市':[108.353846,21.686860],
    '钦州市':[108.654146,21.979933],
    '贵港市':[109.598926,23.111530],
    '玉林市':[110.164756,22.636379],
    '百色市':[106.618201,23.902333],
    '贺州市':[111.566694,24.403582],
    '河池市':[108.085261,24.692931],
    '来宾市':[109.221465,23.750306],
    '崇左市':[107.364711,22.376532],
    '海口市':[110.198293,20.044001],
    '三亚市':[109.511909,18.252847],
    '三沙市':[112.338695,16.831839],
    '儋州市':[109.580811,19.521134],
    '重庆市':[106.551556,29.563009],
    '成都市':[104.066541,30.572269],
    '自贡市':[104.778442,29.339030],
    '攀枝花市':[101.718637,26.582347],
    '泸州市':[105.442258,28.871811],
    '德阳市':[104.397894,31.126855],
    '绵阳市':[104.679114,31.467450],
    '广元市':[105.843357,32.435435],
    '遂宁市':[105.592898,30.532847],
    '内江市':[105.058433,29.580228],
    '乐山市':[103.765568,29.552106],
    '南充市':[106.110698,30.837793],
    '眉山市':[103.848538,30.075439],
    '宜宾市':[104.643215,28.751768],
    '广安市':[106.633212,30.455961],
    '达州市':[107.468023,31.209571],
    '雅安市':[103.013261,29.980537],
    '巴中市':[106.747477,31.867903],
    '资阳市':[104.627636,30.128901],
    '阿坝藏族羌族自治州':[102.224653,31.899413],
    '甘孜藏族自治州':[101.962310,30.049520],
    '凉山彝族自治州':[102.267335,27.881610],
    '贵阳市':[106.630153,26.647661],
    '六盘水市':[104.830359,26.592666],
    '遵义市':[106.927389,27.725654],
    '安顺市':[105.947593,26.253072],
    '毕节市':[105.283992,27.302589],
    '铜仁市':[109.189598,27.731514],
    '黔西南布依族苗族自治州':[104.906396,25.087825],
    '黔东南苗族侗族自治州':[107.982859,26.583442],
    '黔南布依族苗族自治州':[107.522097,26.254092],
    '昆明市':[102.832891,24.880095],
    '曲靖市':[103.796167,25.489999],
    '玉溪市':[102.546543,24.352036],
    '保山市':[99.161761,25.112046],
    '昭通市':[103.717465,27.338257],
    '丽江市':[100.227750,26.855047],
    '普洱市':[100.966512,22.825065],
    '临沧市':[100.079583,23.877573],
    '楚雄彝族自治州':[101.528068,25.045532],
    '红河哈尼族彝族自治州':[103.374799,23.363130],
    '文山壮族苗族自治州':[104.216248,23.400733],
    '西双版纳傣族自治州':[100.797777,22.007351],
    '大理白族自治州':[100.267638,25.606486],
    '德宏傣族景颇族自治州':[98.584895,24.433353],
    '怒江傈僳族自治州':[98.853097,25.852547],
    '迪庆藏族自治州':[99.702234,27.818882],
    '拉萨市':[91.140856,29.645554],
    '日喀则市':[88.880583,29.266869],
    '昌都市':[97.172020,31.140969],
    '林芝市':[94.361558,29.648943],
    '山南市':[91.773134,29.237137],
    '那曲市':[92.060211,31.476004],
    '阿里地区':[80.105804,32.501111],
    '西安市':[108.940174,34.341568],
    '铜川市':[108.945233,34.896756],
    '宝鸡市':[107.237974,34.361979],
    '咸阳市':[108.708991,34.329605],
    '渭南市':[109.509786,34.499995],
    '延安市':[109.489727,36.585455],
    '汉中市':[107.023323,33.067480],
    '榆林市':[109.734589,38.285390],
    '安康市':[109.029022,32.684714],
    '商洛市':[109.940477,33.870422],
    '兰州市':[103.834303,36.061089],
    '嘉峪关市':[98.289152,39.773130],
    '金昌市':[102.188043,38.520089],
    '白银市':[104.138559,36.544756],
    '天水市':[105.724947,34.580863],
    '武威市':[102.638011,37.928264],
    '张掖市':[100.449818,38.925875],
    '平凉市':[106.665240,35.543051],
    '酒泉市':[98.494483,39.732410],
    '庆阳市':[107.643631,35.709077],
    '定西市':[104.626282,35.580662],
    '陇南市':[104.921841,33.400684],
    '临夏回族自治州':[103.210538,35.601182],
    '甘南藏族自治州':[102.911027,34.983385],
    '西宁市':[101.778228,36.617144],
    '海东市':[102.104287,36.502039],
    '海北藏族自治州':[100.900997,36.954413],
    '黄南藏族自治州':[102.015248,35.519548],
    '海南藏族自治州':[100.620373,36.286437],
    '果洛藏族自治州':[100.244808,34.471431],
    '玉树藏族自治州':[97.091934,33.011674],
    '海西蒙古族藏族自治州':[97.369751,37.377139],
    '银川市':[106.230909,38.487193],
    '石嘴山市':[106.383303,38.983236],
    '吴忠市':[106.198393,37.997460],
    '固原市':[106.242610,36.015855],
    '中卫市':[105.196902,37.499972],
    '乌鲁木齐市':[87.616848,43.825592],
    '克拉玛依市':[84.889207,45.579888],
    '吐鲁番市':[89.189651,42.951382],
    '哈密市':[93.514916,42.818501],
    '昌吉回族自治州':[87.308224,44.011182],
    '博尔塔拉蒙古自治州':[82.066159,44.905588],
    '巴音郭楞蒙古自治州':[86.145298,41.764115],
    '阿克苏地区':[80.260605,41.168779],
    '克孜勒苏柯尔克孜自治州':[76.167819,39.714526],
    '喀什地区':[75.989755,39.470400],
    '和田地区':[79.922211,37.114157],
    '伊犁哈萨克自治州':[81.324136,43.916823],
    '塔城地区':[82.980316,46.745364],
    '阿勒泰地区':[88.141253,47.844924],
    '台湾省':[121.508903,25.044319],
    '香港特别行政区':[114.163825,22.276284],
    '澳门特别行政区':[113.543028,22.186835],
};

var BJData = [
    [{name:'北京市'}, {name:'上海市'}],
    [{name:'北京市'}, {name:'广州市'}],
    [{name:'北京市'}, {name:'大连市'}],
    [{name:'北京市'}, {name:'南宁市'}],
    [{name:'北京市'}, {name:'南昌市'}],
    [{name:'北京市'}, {name:'拉萨市'}],
    [{name:'北京市'}, {name:'长春市'}],
    [{name:'北京市'}, {name:'包头市'}],
    [{name:'北京市'}, {name:'重庆市'}],
    [{name:'北京市'}, {name:'常州市'}]
];

var SHData = [
    [{name:'上海市'},{name:'包头市'}],
    [{name:'上海市'},{name:'昆明市'}],
    [{name:'上海市'},{name:'广州市'}],
    [{name:'上海市'},{name:'郑州市'}],
    [{name:'上海市'},{name:'长春市'}],
    [{name:'上海市'},{name:'重庆市'}],
    [{name:'上海市'},{name:'长沙市'}],
    [{name:'上海市'},{name:'北京市'}],
    [{name:'上海市'},{name:'丹东市'}],
    [{name:'上海市'},{name:'大连市'}]
];

var GZData = [
    [{name:'广州市'},{name:'福州市'}],
    [{name:'广州市'},{name:'太原市'}],
    [{name:'广州市'},{name:'长春市'}],
    [{name:'广州市'},{name:'重庆市'}],
    [{name:'广州市'},{name:'西安市'}],
    [{name:'广州市'},{name:'成都市'}],
    [{name:'广州市'},{name:'常州市'}],
    [{name:'广州市'},{name:'北京市'}],
    [{name:'广州市'},{name:'北海市'}],
    [{name:'广州市'},{name:'海口市'}]
];


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({
                fromName: dataItem[0].name,
                toName: dataItem[1].name,
                coords: [fromCoord, toCoord]
            });
        }
    }
    return res;
};

var series = [];
[['北京市', BJData], ['上海市', SHData], ['广州市', GZData]].forEach(function (item, i) {
    series.push({
        name: item[0],
        type: 'lines',
        zlevel: 1,
        effect: {
            show: true,
            period: 6,
            trailLength: 0.7,
            color: '#fff',
            symbolSize: 3
        },
        lineStyle: {
            normal: {
                width: 0,
                curveness: 0.2
            }
        },
        data: convertData(item[1])
    },
    {
        name: item[0],
        type: 'lines',
        zlevel: 2,
        symbol: ['none', 'arrow'],
        symbolSize: 5,
        effect: {
            show: true,
            period: 6,
            trailLength: 0,
            symbolSize: 5
        },
        lineStyle: {
            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: {
            show: true,
            position: 'right',
            formatter: '{b}'
        },
        symbolSize: function (val) {
            return val[2] / 8;
        },
        data: item[1].map(function (dataItem) {
            return {
                name: dataItem[1].name,
                value: geoCoordMap[dataItem[1].name].concat(1)
            };
        })
    });
});

option = {
    legend: {
        orient: 'vertical',
        top: 'bottom',
        left: 'right',
        data: ['北京市', '上海市', '广州市'],
        textStyle: {
            color: '#fff'
        },
        selectedMode: 'single'
    },
    geo: {
        map: 'china',
         label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            //激活样式
            emphasis: {
                areaColor: '#eeeeee'
            }
        }
    },
    series: series
};