apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.44k stars 19.61k forks source link

Map legend symbol is not customizable #3172

Closed jarben closed 5 years ago

jarben commented 8 years ago

Version 3.1.7

I'm not able to find any options for legend symbols on map. It has showLegendSymbol:true|false to show or hide but I can't find any way to change symbol size, color, symbol shape etc.

Is it supported somehow or planned in future? Would be a good alternative to markpoints as these symbols are automatically getting centroid position from the region.

pissang commented 8 years ago

Currently only circle is supported. And not in the plan yet.

jarben commented 8 years ago

ok, thanks for info!

chaegumi commented 8 years ago

Like this?

qq20160512123912

jarben commented 8 years ago

Yeah, that would be great to be able to do this. Is this generated using mark points @chaegumi? The issue with that is that you need to get centroids of regions manually..

chaegumi commented 8 years ago

All code here, you can read it yourself.


var geoCoordMap = {
    "Xiamen" : [118.1, 24.46],
    "Beijing" : [116.46, 39.92],
    "Hangzhou" : [120.19, 30.26],
    "Hong Kong" : [114.1667, 22.25],
    "Macao" : [113.5, 22.2],
    "Nan'an" : [118.386085, 24.956862],
    "Shanghai" : [121.48, 31.22]
};
var latlong = {};
latlong.AD = {
    'latitude' : 42.5,
    'longitude' : 1.5
};
latlong.AE = {
    'latitude' : 24,
    'longitude' : 54
};
latlong.AF = {
    'latitude' : 33,
    'longitude' : 65
};
latlong.AG = {
    'latitude' : 17.05,
    'longitude' : -61.8
};
latlong.AI = {
    'latitude' : 18.25,
    'longitude' : -63.1667
};
latlong.AL = {
    'latitude' : 41,
    'longitude' : 20
};
latlong.AM = {
    'latitude' : 40,
    'longitude' : 45
};
latlong.AN = {
    'latitude' : 12.25,
    'longitude' : -68.75
};
latlong.AO = {
    'latitude' : -12.5,
    'longitude' : 18.5
};
latlong.AP = {
    'latitude' : 35,
    'longitude' : 105
};
latlong.AQ = {
    'latitude' : -90,
    'longitude' : 0
};
latlong.AR = {
    'latitude' : -34,
    'longitude' : -64
};
latlong.AS = {
    'latitude' : -14.3333,
    'longitude' : -170
};
latlong.AT = {
    'latitude' : 47.3333,
    'longitude' : 13.3333
};
latlong.AU = {
    'latitude' : -27,
    'longitude' : 133
};
latlong.AW = {
    'latitude' : 12.5,
    'longitude' : -69.9667
};
latlong.AZ = {
    'latitude' : 40.5,
    'longitude' : 47.5
};
latlong.BA = {
    'latitude' : 44,
    'longitude' : 18
};
latlong.BB = {
    'latitude' : 13.1667,
    'longitude' : -59.5333
};
latlong.BD = {
    'latitude' : 24,
    'longitude' : 90
};
latlong.BE = {
    'latitude' : 50.8333,
    'longitude' : 4
};
latlong.BF = {
    'latitude' : 13,
    'longitude' : -2
};
latlong.BG = {
    'latitude' : 43,
    'longitude' : 25
};
latlong.BH = {
    'latitude' : 26,
    'longitude' : 50.55
};
latlong.BI = {
    'latitude' : -3.5,
    'longitude' : 30
};
latlong.BJ = {
    'latitude' : 9.5,
    'longitude' : 2.25
};
latlong.BM = {
    'latitude' : 32.3333,
    'longitude' : -64.75
};
latlong.BN = {
    'latitude' : 4.5,
    'longitude' : 114.6667
};
latlong.BO = {
    'latitude' : -17,
    'longitude' : -65
};
latlong.BR = {
    'latitude' : -10,
    'longitude' : -55
};
latlong.BS = {
    'latitude' : 24.25,
    'longitude' : -76
};
latlong.BT = {
    'latitude' : 27.5,
    'longitude' : 90.5
};
latlong.BV = {
    'latitude' : -54.4333,
    'longitude' : 3.4
};
latlong.BW = {
    'latitude' : -22,
    'longitude' : 24
};
latlong.BY = {
    'latitude' : 53,
    'longitude' : 28
};
latlong.BZ = {
    'latitude' : 17.25,
    'longitude' : -88.75
};
latlong.CA = {
    'latitude' : 54,
    'longitude' : -100
};

latlong.CC = {
    'latitude' : -12.5,
    'longitude' : 96.8333
};
latlong.CD = {
    'latitude' : 0,
    'longitude' : 25
};
latlong.CF = {
    'latitude' : 7,
    'longitude' : 21
};
latlong.CG = {
    'latitude' : -1,
    'longitude' : 15
};
latlong.CH = {
    'latitude' : 47,
    'longitude' : 8
};
latlong.CI = {
    'latitude' : 8,
    'longitude' : -5
};
latlong.CK = {
    'latitude' : -21.2333,
    'longitude' : -159.7667
};
latlong.CL = {
    'latitude' : -30,
    'longitude' : -71
};
latlong.CM = {
    'latitude' : 6,
    'longitude' : 12
};
latlong.CN = {
    'latitude' : 35,
    'longitude' : 105
};
latlong.CO = {
    'latitude' : 4,
    'longitude' : -72
};
latlong.CR = {
    'latitude' : 10,
    'longitude' : -84
};
latlong.CU = {
    'latitude' : 21.5,
    'longitude' : -80
};
latlong.CV = {
    'latitude' : 16,
    'longitude' : -24
};
latlong.CX = {
    'latitude' : -10.5,
    'longitude' : 105.6667
};
latlong.CY = {
    'latitude' : 35,
    'longitude' : 33
};
latlong.CZ = {
    'latitude' : 49.75,
    'longitude' : 15.5
};
latlong.DE = {
    'latitude' : 51,
    'longitude' : 9
};
latlong.DJ = {
    'latitude' : 11.5,
    'longitude' : 43
};
latlong.DK = {
    'latitude' : 56,
    'longitude' : 10
};
latlong.DM = {
    'latitude' : 15.4167,
    'longitude' : -61.3333
};
latlong.DO = {
    'latitude' : 19,
    'longitude' : -70.6667
};
latlong.DZ = {
    'latitude' : 28,
    'longitude' : 3
};
latlong.EC = {
    'latitude' : -2,
    'longitude' : -77.5
};
latlong.EE = {
    'latitude' : 59,
    'longitude' : 26
};
latlong.EG = {
    'latitude' : 27,
    'longitude' : 30
};
latlong.EH = {
    'latitude' : 24.5,
    'longitude' : -13
};
latlong.ER = {
    'latitude' : 15,
    'longitude' : 39
};
latlong.ES = {
    'latitude' : 40,
    'longitude' : -4
};
latlong.ET = {
    'latitude' : 8,
    'longitude' : 38
};
latlong.EU = {
    'latitude' : 47,
    'longitude' : 8
};
latlong.FI = {
    'latitude' : 62,
    'longitude' : 26
};
latlong.FJ = {
    'latitude' : -18,
    'longitude' : 175
};
latlong.FK = {
    'latitude' : -51.75,
    'longitude' : -59
};
latlong.FM = {
    'latitude' : 6.9167,
    'longitude' : 158.25
};
latlong.FO = {
    'latitude' : 62,
    'longitude' : -7
};
latlong.FR = {
    'latitude' : 46,
    'longitude' : 2
};
latlong.GA = {
    'latitude' : -1,
    'longitude' : 11.75
};
latlong.GB = {
    'latitude' : 54,
    'longitude' : -2
};
latlong.GD = {
    'latitude' : 12.1167,
    'longitude' : -61.6667
};
latlong.GE = {
    'latitude' : 42,
    'longitude' : 43.5
};
latlong.GF = {
    'latitude' : 4,
    'longitude' : -53
};
latlong.GH = {
    'latitude' : 8,
    'longitude' : -2
};
latlong.GI = {
    'latitude' : 36.1833,
    'longitude' : -5.3667
};
latlong.GL = {
    'latitude' : 72,
    'longitude' : -40
};
latlong.GM = {
    'latitude' : 13.4667,
    'longitude' : -16.5667
};
latlong.GN = {
    'latitude' : 11,
    'longitude' : -10
};
latlong.GP = {
    'latitude' : 16.25,
    'longitude' : -61.5833
};
latlong.GQ = {
    'latitude' : 2,
    'longitude' : 10
};
latlong.GR = {
    'latitude' : 39,
    'longitude' : 22
};
latlong.GS = {
    'latitude' : -54.5,
    'longitude' : -37
};
latlong.GT = {
    'latitude' : 15.5,
    'longitude' : -90.25
};
latlong.GU = {
    'latitude' : 13.4667,
    'longitude' : 144.7833
};
latlong.GW = {
    'latitude' : 12,
    'longitude' : -15
};
latlong.GY = {
    'latitude' : 5,
    'longitude' : -59
};
latlong.HK = {
    'latitude' : 22.25,
    'longitude' : 114.1667
};
latlong.HM = {
    'latitude' : -53.1,
    'longitude' : 72.5167
};
latlong.HN = {
    'latitude' : 15,
    'longitude' : -86.5
};
latlong.HR = {
    'latitude' : 45.1667,
    'longitude' : 15.5
};
latlong.HT = {
    'latitude' : 19,
    'longitude' : -72.4167
};
latlong.HU = {
    'latitude' : 47,
    'longitude' : 20
};
latlong.ID = {
    'latitude' : -5,
    'longitude' : 120
};
latlong.IE = {
    'latitude' : 53,
    'longitude' : -8
};
latlong.IL = {
    'latitude' : 31.5,
    'longitude' : 34.75
};
latlong.IN = {
    'latitude' : 20,
    'longitude' : 77
};
latlong.IO = {
    'latitude' : -6,
    'longitude' : 71.5
};
latlong.IQ = {
    'latitude' : 33,
    'longitude' : 44
};
latlong.IR = {
    'latitude' : 32,
    'longitude' : 53
};
latlong.IS = {
    'latitude' : 65,
    'longitude' : -18
};
latlong.IT = {
    'latitude' : 42.8333,
    'longitude' : 12.8333
};
latlong.JM = {
    'latitude' : 18.25,
    'longitude' : -77.5
};
latlong.JO = {
    'latitude' : 31,
    'longitude' : 36
};
latlong.JP = {
    'latitude' : 36,
    'longitude' : 138
};
latlong.KE = {
    'latitude' : 1,
    'longitude' : 38
};
latlong.KG = {
    'latitude' : 41,
    'longitude' : 75
};
latlong.KH = {
    'latitude' : 13,
    'longitude' : 105
};
latlong.KI = {
    'latitude' : 1.4167,
    'longitude' : 173
};
latlong.KM = {
    'latitude' : -12.1667,
    'longitude' : 44.25
};
latlong.KN = {
    'latitude' : 17.3333,
    'longitude' : -62.75
};
latlong.KP = {
    'latitude' : 40,
    'longitude' : 127
};
latlong.KR = {
    'latitude' : 37,
    'longitude' : 127.5
};
latlong.KW = {
    'latitude' : 29.3375,
    'longitude' : 47.6581
};
latlong.KY = {
    'latitude' : 19.5,
    'longitude' : -80.5
};
latlong.KZ = {
    'latitude' : 48,
    'longitude' : 68
};
latlong.LA = {
    'latitude' : 18,
    'longitude' : 105
};
latlong.LB = {
    'latitude' : 33.8333,
    'longitude' : 35.8333
};
latlong.LC = {
    'latitude' : 13.8833,
    'longitude' : -61.1333
};
latlong.LI = {
    'latitude' : 47.1667,
    'longitude' : 9.5333
};
latlong.LK = {
    'latitude' : 7,
    'longitude' : 81
};
latlong.LR = {
    'latitude' : 6.5,
    'longitude' : -9.5
};
latlong.LS = {
    'latitude' : -29.5,
    'longitude' : 28.5
};
latlong.LT = {
    'latitude' : 55,
    'longitude' : 24
};
latlong.LU = {
    'latitude' : 49.75,
    'longitude' : 6
};
latlong.LV = {
    'latitude' : 57,
    'longitude' : 25
};
latlong.LY = {
    'latitude' : 25,
    'longitude' : 17
};
latlong.MA = {
    'latitude' : 32,
    'longitude' : -5
};
latlong.MC = {
    'latitude' : 43.7333,
    'longitude' : 7.4
};
latlong.MD = {
    'latitude' : 47,
    'longitude' : 29
};
latlong.ME = {
    'latitude' : 42.5,
    'longitude' : 19.4
};
latlong.MG = {
    'latitude' : -20,
    'longitude' : 47
};
latlong.MH = {
    'latitude' : 9,
    'longitude' : 168
};
latlong.MK = {
    'latitude' : 41.8333,
    'longitude' : 22
};
latlong.ML = {
    'latitude' : 17,
    'longitude' : -4
};
latlong.MM = {
    'latitude' : 22,
    'longitude' : 98
};
latlong.MN = {
    'latitude' : 46,
    'longitude' : 105
};
latlong.MO = {
    'latitude' : 22.1667,
    'longitude' : 113.55
};
latlong.MP = {
    'latitude' : 15.2,
    'longitude' : 145.75
};
latlong.MQ = {
    'latitude' : 14.6667,
    'longitude' : -61
};
latlong.MR = {
    'latitude' : 20,
    'longitude' : -12
};
latlong.MS = {
    'latitude' : 16.75,
    'longitude' : -62.2
};
latlong.MT = {
    'latitude' : 35.8333,
    'longitude' : 14.5833
};
latlong.MU = {
    'latitude' : -20.2833,
    'longitude' : 57.55
};
latlong.MV = {
    'latitude' : 3.25,
    'longitude' : 73
};
latlong.MW = {
    'latitude' : -13.5,
    'longitude' : 34
};
latlong.MX = {
    'latitude' : 23,
    'longitude' : -102
};
latlong.MY = {
    'latitude' : 2.5,
    'longitude' : 112.5
};
latlong.MZ = {
    'latitude' : -18.25,
    'longitude' : 35
};
latlong.NA = {
    'latitude' : -22,
    'longitude' : 17
};
latlong.NC = {
    'latitude' : -21.5,
    'longitude' : 165.5
};
latlong.NE = {
    'latitude' : 16,
    'longitude' : 8
};
latlong.NF = {
    'latitude' : -29.0333,
    'longitude' : 167.95
};
latlong.NG = {
    'latitude' : 10,
    'longitude' : 8
};
latlong.NI = {
    'latitude' : 13,
    'longitude' : -85
};
latlong.NL = {
    'latitude' : 52.5,
    'longitude' : 5.75
};
latlong.NO = {
    'latitude' : 62,
    'longitude' : 10
};
latlong.NP = {
    'latitude' : 28,
    'longitude' : 84
};
latlong.NR = {
    'latitude' : -0.5333,
    'longitude' : 166.9167
};
latlong.NU = {
    'latitude' : -19.0333,
    'longitude' : -169.8667
};
latlong.NZ = {
    'latitude' : -41,
    'longitude' : 174
};
latlong.OM = {
    'latitude' : 21,
    'longitude' : 57
};
latlong.PA = {
    'latitude' : 9,
    'longitude' : -80
};
latlong.PE = {
    'latitude' : -10,
    'longitude' : -76
};
latlong.PF = {
    'latitude' : -15,
    'longitude' : -140
};
latlong.PG = {
    'latitude' : -6,
    'longitude' : 147
};
latlong.PH = {
    'latitude' : 13,
    'longitude' : 122
};
latlong.PK = {
    'latitude' : 30,
    'longitude' : 70
};
latlong.PL = {
    'latitude' : 52,
    'longitude' : 20
};
latlong.PM = {
    'latitude' : 46.8333,
    'longitude' : -56.3333
};
latlong.PR = {
    'latitude' : 18.25,
    'longitude' : -66.5
};
latlong.PS = {
    'latitude' : 32,
    'longitude' : 35.25
};
latlong.PT = {
    'latitude' : 39.5,
    'longitude' : -8
};
latlong.PW = {
    'latitude' : 7.5,
    'longitude' : 134.5
};
latlong.PY = {
    'latitude' : -23,
    'longitude' : -58
};
latlong.QA = {
    'latitude' : 25.5,
    'longitude' : 51.25
};
latlong.RE = {
    'latitude' : -21.1,
    'longitude' : 55.6
};
latlong.RO = {
    'latitude' : 46,
    'longitude' : 25
};
latlong.RS = {
    'latitude' : 44,
    'longitude' : 21
};
latlong.RU = {
    'latitude' : 60,
    'longitude' : 100
};
latlong.RW = {
    'latitude' : -2,
    'longitude' : 30
};
latlong.SA = {
    'latitude' : 25,
    'longitude' : 45
};
latlong.SB = {
    'latitude' : -8,
    'longitude' : 159
};
latlong.SC = {
    'latitude' : -4.5833,
    'longitude' : 55.6667
};
latlong.SD = {
    'latitude' : 15,
    'longitude' : 30
};
latlong.SE = {
    'latitude' : 62,
    'longitude' : 15
};
latlong.SG = {
    'latitude' : 1.3667,
    'longitude' : 103.8
};
latlong.SH = {
    'latitude' : -15.9333,
    'longitude' : -5.7
};
latlong.SI = {
    'latitude' : 46,
    'longitude' : 15
};
latlong.SJ = {
    'latitude' : 78,
    'longitude' : 20
};
latlong.SK = {
    'latitude' : 48.6667,
    'longitude' : 19.5
};
latlong.SL = {
    'latitude' : 8.5,
    'longitude' : -11.5
};
latlong.SM = {
    'latitude' : 43.7667,
    'longitude' : 12.4167
};
latlong.SN = {
    'latitude' : 14,
    'longitude' : -14
};
latlong.SO = {
    'latitude' : 10,
    'longitude' : 49
};
latlong.SR = {
    'latitude' : 4,
    'longitude' : -56
};
latlong.ST = {
    'latitude' : 1,
    'longitude' : 7
};
latlong.SV = {
    'latitude' : 13.8333,
    'longitude' : -88.9167
};
latlong.SY = {
    'latitude' : 35,
    'longitude' : 38
};
latlong.SZ = {
    'latitude' : -26.5,
    'longitude' : 31.5
};
latlong.TC = {
    'latitude' : 21.75,
    'longitude' : -71.5833
};
latlong.TD = {
    'latitude' : 15,
    'longitude' : 19
};
latlong.TF = {
    'latitude' : -43,
    'longitude' : 67
};
latlong.TG = {
    'latitude' : 8,
    'longitude' : 1.1667
};
latlong.TH = {
    'latitude' : 15,
    'longitude' : 100
};
latlong.TJ = {
    'latitude' : 39,
    'longitude' : 71
};
latlong.TK = {
    'latitude' : -9,
    'longitude' : -172
};
latlong.TM = {
    'latitude' : 40,
    'longitude' : 60
};
latlong.TN = {
    'latitude' : 34,
    'longitude' : 9
};
latlong.TO = {
    'latitude' : -20,
    'longitude' : -175
};
latlong.TR = {
    'latitude' : 39,
    'longitude' : 35
};
latlong.TT = {
    'latitude' : 11,
    'longitude' : -61
};
latlong.TV = {
    'latitude' : -8,
    'longitude' : 178
};
latlong.TW = {
    'latitude' : 23.5,
    'longitude' : 121
};
latlong.TZ = {
    'latitude' : -6,
    'longitude' : 35
};
latlong.UA = {
    'latitude' : 49,
    'longitude' : 32
};
latlong.UG = {
    'latitude' : 1,
    'longitude' : 32
};
latlong.UM = {
    'latitude' : 19.2833,
    'longitude' : 166.6
};
latlong.US = {
    'latitude' : 38,
    'longitude' : -97
};
latlong.UY = {
    'latitude' : -33,
    'longitude' : -56
};
latlong.UZ = {
    'latitude' : 41,
    'longitude' : 64
};
latlong.VA = {
    'latitude' : 41.9,
    'longitude' : 12.45
};
latlong.VC = {
    'latitude' : 13.25,
    'longitude' : -61.2
};
latlong.VE = {
    'latitude' : 8,
    'longitude' : -66
};
latlong.VG = {
    'latitude' : 18.5,
    'longitude' : -64.5
};
latlong.VI = {
    'latitude' : 18.3333,
    'longitude' : -64.8333
};
latlong.VN = {
    'latitude' : 16,
    'longitude' : 106
};
latlong.VU = {
    'latitude' : -16,
    'longitude' : 167
};
latlong.WF = {
    'latitude' : -13.3,
    'longitude' : -176.2
};
latlong.WS = {
    'latitude' : -13.5833,
    'longitude' : -172.3333
};
latlong.YE = {
    'latitude' : 15,
    'longitude' : 48
};
latlong.YT = {
    'latitude' : -12.8333,
    'longitude' : 45.1667
};
latlong.ZA = {
    'latitude' : -29,
    'longitude' : 24
};
latlong.ZM = {
    'latitude' : -15,
    'longitude' : 30
};
latlong.ZW = {
    'latitude' : -20,
    'longitude' : 30
};
latlong.cnBJ = {
    'latitude' : 39.92,
    'longitude' : 116.46
};
latlong.cnSH = {
    'latitude' : 31.22,
    'longitude' : 121.48
};
latlong.cnHZ = {
    'latitude' : 30.26,
    'longitude' : 120.19
};
latlong.cnXM = {
    'latitude' : 24.46,
    'longitude' : 118.1
};
latlong.cnNA = {
    'latitude' : 24.956862,
    'longitude' : 118.386085
};
latlong.cnHK = {
    'latitude' : 22.25,
    'longitude' : 114.1667
};

latlong.OS1 = {
    'latitude' : 47.8136355,
    'longitude' : -69.1608618
};
latlong.OS2 = {
    'latitude' : -13.9193513,
    'longitude' : -41.0735985
};
latlong.OS3 = {
    'latitude' : 45.0708708,
    'longitude' : 9.2909206
};
latlong.OS4 = {
    'latitude' : 1.3667,
    'longitude' : 103.8
};
latlong.OS5 = {
    'latitude' : 28.6471948,
    'longitude' : 76.9531798
};
latlong.OS6 = {
    'latitude' : 25.0741032,
    'longitude' : 55.0897605
};
latlong.OS7 = {
    'latitude' : -26.1714402,
    'longitude' : 28.0050052
};

var mapData = [
    {
        'code' : 'AR',
        'name' : 'Argentina',
        'value' : 1,
        'color' : '#86a965'
    },
    {
        'code' : 'AU',
        'name' : 'Australia',
        'value' : 1,
        'color' : '#8aabb0'
    }, {
        'code' : 'AT',
        'name' : 'Austria',
        'value' : 1,
        'color' : '#d8854f'
    },
    {
        'code' : 'BD',
        'name' : 'Bangladesh',
        'value' : 1,
        'color' : '#eea638'
    }, {
        'code' : 'BY',
        'name' : 'Belarus',
        'value' : 1,
        'color' : '#d8854f'
    }, {
        'code' : 'BE',
        'name' : 'Belgium',
        'value' : 1,
        'color' : '#d8854f'
    },
    {
        'code' : 'BO',
        'name' : 'Bolivia',
        'value' : 1,
        'color' : '#86a965'
    },
    {
        'code' : 'BR',
        'name' : 'Brazil',
        'value' : 1,
        'color' : '#86a965'
    }, {
        'code' : 'BN',
        'name' : 'Brunei',
        'value' : 1,
        'color' : '#eea638'
    }, {
        'code' : 'BG',
        'name' : 'Bulgaria',
        'value' : 1,
        'color' : '#d8854f'
    },
    {
        'code' : 'KH',
        'name' : 'Cambodia',
        'value' : 1,
        'color' : '#eea638'
    },
    {
        'code' : 'CA',
        'name' : 'Canada',
        'value' : 1,
        'color' : '#a7a737'
    },
    {
        'code' : 'CL',
        'name' : 'Chile',
        'value' : 1,
        'color' : '#86a965'
    },
    // {'code':'CN' , 'name':'China', 'value':1, 'color':'#eea638'},

    {
        'code' : 'cnBJ',
        'name' : 'Beijing',
        'value' : 1,
        'color' : '#86a965'
    }, {
        'code' : 'cnSH',
        'name' : 'Shanghai',
        'value' : 1,
        'color' : '#86a965'
    }, {
        'code' : 'cnHZ',
        'name' : 'Hangzhou',
        'value' : 1,
        'color' : '#86a965'
    },
    // {'code':'cnXM', 'name':'Xiamen', 'value':1, 'color':'#a6c84c'},
    // {'code':'cnNA', 'name':'Nan\'an', 'value':1, 'color':'#ddb926'},
    //{'code':'cnHK', 'name':'Hong Kong', 'value':1, 'color':'#86a965'},

    {
        'code' : 'CO',
        'name' : 'Colombia',
        'value' : 1,
        'color' : '#86a965'
    },
    {
        'code' : 'CR',
        'name' : 'Costa Rica',
        'value' : 1,
        'color' : '#a7a737'
    },
    {
        'code' : 'HR',
        'name' : 'Croatia',
        'value' : 1,
        'color' : '#d8854f'
    },
    {
        'code' : 'CZ',
        'name' : 'Czech Rep.',
        'value' : 1,
        'color' : '#d8854f'
    }, {
        'code' : 'DK',
        'name' : 'Denmark',
        'value' : 1,
        'color' : '#d8854f'
    },
    {
        'code' : 'DO',
        'name' : 'Dominican Rep.',
        'value' : 1,
        'color' : '#a7a737'
    }, {
        'code' : 'EC',
        'name' : 'Ecuador',
        'value' : 1,
        'color' : '#86a965'
    }, {
        'code' : 'EG',
        'name' : 'Egypt',
        'value' : 1,
        'color' : '#de4c4f'
    }, {
        'code' : 'SV',
        'name' : 'El Salvador',
        'value' : 1,
        'color' : '#a7a737'
    },
    {
        'code' : 'FI',
        'name' : 'Finland',
        'value' : 1,
        'color' : '#d8854f'
    }, {
        'code' : 'FR',
        'name' : 'France',
        'value' : 1,
        'color' : '#d8854f'
    },
    {
        'code' : 'DE',
        'name' : 'Germany',
        'value' : 1,
        'color' : '#d8854f'
    },
    {
        'code' : 'GR',
        'name' : 'Greece',
        'value' : 1,
        'color' : '#d8854f'
    }, {
        'code' : 'GT',
        'name' : 'Guatemala',
        'value' : 1,
        'color' : '#a7a737'
    },
    {
        'code' : 'GY',
        'name' : 'Guyana',
        'value' : 1,
        'color' : '#86a965'
    },
    {
        'code' : 'HK',
        'name' : 'Hong Kong, China',
        'value' : 1,
        'color' : '#eea638'
    }, {
        'code' : 'HU',
        'name' : 'Hungary',
        'value' : 1,
        'color' : '#d8854f'
    },
    {
        'code' : 'IN',
        'name' : 'India',
        'value' : 1,
        'color' : '#eea638'
    }, {
        'code' : 'ID',
        'name' : 'Indonesia',
        'value' : 1,
        'color' : '#eea638'
    }, {
        'code' : 'IR',
        'name' : 'Iran',
        'value' : 1,
        'color' : '#eea638'
    }, {
        'code' : 'IQ',
        'name' : 'Iraq',
        'value' : 1,
        'color' : '#eea638'
    }, {
        'code' : 'IE',
        'name' : 'Ireland',
        'value' : 1,
        'color' : '#d8854f'
    },
    {
        'code' : 'IT',
        'name' : 'Italy',
        'value' : 1,
        'color' : '#d8854f'
    },
    {
        'code' : 'JP',
        'name' : 'Japan',
        'value' : 1,
        'color' : '#eea638'
    },
    {
        'code' : 'KE',
        'name' : 'Kenya',
        'value' : 1,
        'color' : '#de4c4f'
    }, {
        'code' : 'KP',
        'name' : 'Korea, Dem. Rep.',
        'value' : 1,
        'color' : '#eea638'
    }, {
        'code' : 'KR',
        'name' : 'Korea, Rep.',
        'value' : 1,
        'color' : '#eea638'
    },
    {
        'code' : 'LB',
        'name' : 'Lebanon',
        'value' : 1,
        'color' : '#eea638'
    },
    {
        'code' : 'MY',
        'name' : 'Malaysia',
        'value' : 1,
        'color' : '#eea638'
    },
    {
        'code' : 'MX',
        'name' : 'Mexico',
        'value' : 1,
        'color' : '#a7a737'
    },
    {
        'code' : 'MA',
        'name' : 'Morocco',
        'value' : 1,
        'color' : '#de4c4f'
    }, {
        'code' : 'MZ',
        'name' : 'Mozambique',
        'value' : 1,
        'color' : '#de4c4f'
    }, {
        'code' : 'MM',
        'name' : 'Myanmar',
        'value' : 1,
        'color' : '#eea638'
    },
    {
        'code' : 'NL',
        'name' : 'Netherlands',
        'value' : 1,
        'color' : '#d8854f'
    }, {
        'code' : 'NZ',
        'name' : 'New Zealand',
        'value' : 1,
        'color' : '#8aabb0'
    },
    {
        'code' : 'NO',
        'name' : 'Norway',
        'value' : 1,
        'color' : '#d8854f'
    }, {
        'code' : 'PK',
        'name' : 'Pakistan',
        'value' : 1,
        'color' : '#eea638'
    },
    {
        'code' : 'PY',
        'name' : 'Paraguay',
        'value' : 1,
        'color' : '#86a965'
    }, {
        'code' : 'PE',
        'name' : 'Peru',
        'value' : 1,
        'color' : '#86a965'
    }, {
        'code' : 'PH',
        'name' : 'Philippines',
        'value' : 1,
        'color' : '#eea638'
    }, {
        'code' : 'PL',
        'name' : 'Poland',
        'value' : 1,
        'color' : '#d8854f'
    }, {
        'code' : 'PT',
        'name' : 'Portugal',
        'value' : 1,
        'color' : '#d8854f'
    },
    {
        'code' : 'RO',
        'name' : 'Romania',
        'value' : 1,
        'color' : '#d8854f'
    },
    {
        'code' : 'SA',
        'name' : 'Saudi Arabia',
        'value' : 1,
        'color' : '#eea638'
    },
    {
        'code' : 'SG',
        'name' : 'Singapore',
        'value' : 1,
        'color' : '#eea638'
    }, {
        'code' : 'SK',
        'name' : 'Slovak Republic',
        'value' : 1,
        'color' : '#d8854f'
    }, {
        'code' : 'SI',
        'name' : 'Slovenia',
        'value' : 1,
        'color' : '#d8854f'
    },
    {
        'code' : 'ZA',
        'name' : 'South Africa',
        'value' : 1,
        'color' : '#de4c4f'
    }, {
        'code' : 'ES',
        'name' : 'Spain',
        'value' : 1,
        'color' : '#d8854f'
    }, {
        'code' : 'LK',
        'name' : 'Sri Lanka',
        'value' : 1,
        'color' : '#eea638'
    },
    {
        'code' : 'SR',
        'name' : 'Suriname',
        'value' : 1,
        'color' : '#86a965'
    },
    {
        'code' : 'SE',
        'name' : 'Sweden',
        'value' : 1,
        'color' : '#d8854f'
    }, {
        'code' : 'CH',
        'name' : 'Switzerland',
        'value' : 1,
        'color' : '#d8854f'
    }, {
        'code' : 'SY',
        'name' : 'Syria',
        'value' : 1,
        'color' : '#eea638'
    }, {
        'code' : 'TW',
        'name' : 'Taiwan',
        'value' : 1,
        'color' : '#eea638'
    },
    {
        'code' : 'TZ',
        'name' : 'Tanzania',
        'value' : 1,
        'color' : '#de4c4f'
    }, {
        'code' : 'TH',
        'name' : 'Thailand',
        'value' : 1,
        'color' : '#eea638'
    },
    {
        'code' : 'TN',
        'name' : 'Tunisia',
        'value' : 1,
        'color' : '#de4c4f'
    }, {
        'code' : 'TR',
        'name' : 'Turkey',
        'value' : 1,
        'color' : '#d8854f'
    },
    {
        'code' : 'UG',
        'name' : 'Uganda',
        'value' : 1,
        'color' : '#de4c4f'
    },
    {
        'code' : 'AE',
        'name' : 'United Arab Emirates',
        'value' : 1,
        'color' : '#eea638'
    }, {
        'code' : 'GB',
        'name' : 'United Kingdom',
        'value' : 1,
        'color' : '#d8854f'
    }, {
        'code' : 'US',
        'name' : 'United States',
        'value' : 1,
        'color' : '#a7a737'
    }, {
        'code' : 'UY',
        'name' : 'Uruguay',
        'value' : 1,
        'color' : '#86a965'
    },
    {
        'code' : 'VE',
        'name' : 'Venezuela',
        'value' : 1,
        'color' : '#86a965'
    }, {
        'code' : 'VN',
        'name' : 'Vietnam',
        'value' : 1,
        'color' : '#eea638'
    }
];

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 XMData = [
    [{
            name : 'Beijing'
        }, {
            name : 'Xiamen',
            value : 150
        }
    ],
    [{
            name : 'Shanghai'
        }, {
            name : 'Xiamen',
            value : 90
        }
    ],
    [{
            name : 'Hangzhou'
        }, {
            name : 'Xiamen',
            value : 80
        }
    ],
    [{
            name : 'Hong Kong'
        }, {
            name : 'Xiamen',
            value : 60
        }
    ]
];

var OSData = [{
        'code' : 'OS1',
        'name' : 'North America regional warehouse: Saint-Hubert, Canada',
        'value' : 1,
        'color' : '#fff'
    }, {
        'code' : 'OS2',
        'name' : 'South America regional warehouse: Porto Alegre, Brasil',
        'value' : 1,
        'color' : '#fff'
    }, {
        'code' : 'OS3',
        'name' : 'Europe regional warehouse: Stradella, Italy',
        'value' : 1,
        'color' : '#fff'
    }, {
        'code' : 'OS4',
        'name' : 'South East Asia regional warehouse: Singapore',
        'value' : 1,
        'color' : '#fff'
    }, {
        'code' : 'OS5',
        'name' : 'North Asia regional warehouse: Delhi, India',
        'value' : 1,
        'color' : '#fff'
    }, {
        'code' : 'OS6',
        'name' : 'Middle East regional warehouse: Dubai, U.A.E.',
        'value' : 1,
        'color' : '#fff'
    }, {
        'code' : 'OS7',
        'name' : 'Africa regional warehouse: Johannesburg, South Africa',
        'value' : 1,
        'color' : '#fff'
    },
];

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([{
                        name : dataItem[0].name,
                        coord : fromCoord
                    }, {
                        name : dataItem[1].name,
                        coord : toCoord,
                        value : dataItem[1].value
                    }
                ]);
        }
    }
    return res;
}
option = {
    backgroundColor : '#404a59',
    title : {
        text : 'Global Agents',
        left : 'center',
        top : 'top',
        textStyle : {
            color : '#fff'
        }
    },
    legend : {
        orient : 'vertical',
        y : 'bottom',
        x : 'right',
        data : ['FK Xiamen Headquarters', 'FK Nanan Factory', 'Dealers', 'Oversea Warehouse'],
        textStyle : {
            color : '#fff'
        }
    },
    tooltip : {
        trigger : 'item',
        formatter : '{b}'
    },
    geo : {
        name : 'Global Distributors',
        type : 'map',
        map : 'world',
        roam : true,
        label : {
            emphasis : {
                show : false
            }
        },
        itemStyle : {
            normal : {
                areaColor : '#323c48',
                borderColor : '#111'
            },
            emphasis : {
                areaColor : '#2a333d'
            }
        }
    },
    series : [{
            type : 'lines',
            zlevel : 2,
            effect : {
                show : true,
                period : 6,
                trailLength : 0,
                symbol : planePath,
                symbolSize : 15
            },
            lineStyle : {
                normal : {
                    color : '#f00',
                    width : 1,
                    opacity : 0.4,
                    curveness : 0.2
                }
            },
            label : {
                normal : {
                    show : true,
                    position : 'start',
                    formatter : function (params) {
                        // console.log(params);
                        return '' + params.data[0].name + ' to ' + params.data[1].name + ' ' + params.data[1].value + ' minutes';
                    }
                }
            },
            data : convertData1(XMData)
        }, {
            name : 'FK Xiamen Headquarters',
            type : 'scatter',
            zlevel : 11,
            coordinateSystem : 'geo',
            symbol : 'path://M480,480V192H256V0H32v480H0v32h512v-32H480z M64,32h64v64H64V32z M64,128h64v64H64V128z M64,224h64v64H64V224zM64,320h64v64H64V320z M192,480H96v-64h96V480z M224,384h-64v-64h64V384z M224,288h-64v-64h64V288z M224,192h-64v-64h64V192z M224,96h-64V32h64V96z M288,224h64v64h-64V224z M288,320h64v64h-64V320z M416,480h-96v-64h96V480z M448,384h-64v-64h64V384z M448,288h-64v-64h64V288z',
            symbolSize : 20,
            data : [{
                    name : 'Xiamen',
                    value : [
                        latlong.cnXM.longitude,
                        latlong.cnXM.latitude,
                        1
                    ]
                }
            ],
            itemStyle : {
                normal : {
                    symbol : 'diamond',
                    color : '#0073de'
                }
            }
        }, {
            name : 'FK Nanan Factory',
            type : 'scatter',
            zlevel : 5,
            coordinateSystem : 'geo',
            symbol : 'path://M384,288v-96l-128,96v-96l-128,96V160H0v352h128h384V192L384,288z M224,416h-64v-32h64V416z M224,352h-64v-32h64V352zM352,416h-64v-32h64V416z M352,352h-64v-32h64V352z M480,416h-64v-32h64V416z M480,352h-64v-32h64V352z',
            symbolSize : 20,
            data : [{
                    name : "Nan'an",
                    value : [
                        latlong['cnNA'].longitude,
                        latlong['cnNA'].latitude,
                        1
                    ]
                }
            ],
            itemStyle : {
                normal : {
                    symbol : 'triangle',
                    color : '#ddb926'
                }
            }
        }, {
            name : 'Dealers',
            type : 'scatter',
            coordinateSystem : 'geo',
            symbolSize : 5,
            data : mapData.map(function (itemOpt) {
                return {
                    name : itemOpt.name,
                    value : [
                        latlong[itemOpt.code].longitude,
                        latlong[itemOpt.code].latitude,
                        itemOpt.value
                    ],
                    label : {
                        emphasis : {
                            position : 'right',
                            show : false,
                            formatter : '{a}'
                        }
                    }
                };
            }),
            itemStyle : {
                normal : {
                    color : '#f00'
                }
            }
        }, {
            name : 'Oversea Warehouse',
            type : 'scatter',
            coordinateSystem : 'geo',
            symbol : 'path://M496,144c-65.781,24.219-115.906,41.469-160,96c-39.281,48.594-96,65.438-160,33.406V448h-32V16c0-8.844,7.156-16,16-16s16,7.156,16,16c35.531,51.656,97.281,63.094,160,64C432,81.406,496,144,496,144z M208,356.25v32.563c37.75,7.719,64,24.094,64,43.188c0,26.5-50.156,48-112,48S48,458.5,48,432c0-19.094,26.25-35.469,64-43.188V356.25C53.875,366.313,16,394.5,16,432c0,47.094,59.219,80,144,80s144-32.906,144-80C304,394.5,266.125,366.313,208,356.25z',
            symbolSize : 20,
            data : OSData.map(function (itemOpt) {
                return {
                    name : itemOpt.name,
                    value : [
                        latlong[itemOpt.code].longitude,
                        latlong[itemOpt.code].latitude,
                        itemOpt.value
                    ],
                    label : {
                        emphasis : {
                            position : 'right',
                            show : false,
                            formatter : '{a}'
                        }
                    }
                };
            }),
            itemStyle : {
                normal : {
                    color : '#fff'
                }
            }
        }
    ]
};
jarben commented 8 years ago

Thanks @chaegumi ! Yeah, using scatter is probably a better option that mark points..

One improvement that @pissang suggested is using coordinate system to get centroid geo cords of regions:

    var model = chart.getModel();

    var geo = chart.getModel().getComponent('series').coordinateSystem; // if your series[0] is geo
    var geoCord = geo.getRegion(regionName).center; // regionName as specified in geojson

The only thing is that you need to do this after your load your chart first time and then chart.setOption() again. There doesn't seem to be a way to get into the coordinateSystem component without running it first time as far as I understand..

Anyway, thanks for your suggestion!