直接上代码吧,将此代码复制到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
};