一. map
1.覆盖省份填充不同color。
2.省份中心标注。
3.中心城市向周围动态连线。
4.tooltip。
a.根据需要动态弹出内容。
b.样式配置
废话不多说,上代码
var geoCoordMap = { "静海县": ["116.9824", "38.8312"], "濮阳": ["115.1917", "35.799"], "邵阳": ["110.9619", "26.8121"], "黑龙江": ["128.1445", "48.5156"], "黑河": ["127.1448", "49.2957"], "安庆": ["116.7517", "30.5255"], "湘潭": ["112.5439", "27.7075"], "杭州": ["119.5313", "29.8773"], "赤峰": ["118.6743", "43.2642"], "海北藏族自治州": ["100.3711", "37.9138"], "铁岭": ["124.2773", "42.7423"], "天水": ["105.6445", "34.6289"], "西藏": ["88.7695", "31.6846"], "临高县": ["109.6957", "19.8063"], "龙岩": ["116.8066", "25.2026"], "宝山区": ["121.4346", "31.4051"], "迪庆藏族自治州": ["99.4592", "27.9327"], "河西区": ["117.2365", "39.0804"], "乐山": ["103.5791", "29.1742"], "南汇区": ["121.8755", "30.954"], "渝中区": ["106.5344", "29.5477"], "日照": ["119.2786", "35.5023"], "湘西土家族苗族自治州": ["109.7864", "28.6743"], "韶关": ["113.7964", "24.7028"], "荣昌县": ["105.5127", "29.4708"], "河源": ["114.917", "23.9722"], "日喀则地区": ["86.2427", "29.5093"], "连云港": ["119.1248", "34.552"], "潮州": ["116.7847", "23.8293"], "保山": ["99.0637", "24.9884"], "克孜勒苏柯尔克孜自治州": ["74.6301", "39.5233"], "安康": ["109.1162", "32.7722"], "徐州": ["117.5208", "34.3268"], "柳州": ["109.3799", "24.9774"], "渝北区": ["106.7212", "29.8499"], "绍兴": ["120.564", "29.7565"], "阿里地区": ["82.3645", "32.7667"], "营口": ["122.4316", "40.4297"], "玉溪": ["101.9312", "23.8898"], "伊春": ["129.1992", "47.9608"], "万州区": ["108.3911", "30.6958"], "金山区": ["121.2657", "30.8112"], "巴彦淖尔": ["107.5562", "41.3196"], "宁德": ["119.6521", "26.9824"], "庆阳": ["107.5342", "36.2"], "遵义": ["106.908", "28.1744"], "自贡": ["104.6667", "29.2786"], "咸阳": ["108.4131", "34.8706"], "周口": ["114.873", "33.6951"], "常德": ["111.4014", "29.2676"], "洛阳": ["112.0605", "34.3158"], "青海": ["96.2402", "35.4199"], "张掖": ["99.7998", "38.7433"], "佛山": ["112.8955", "23.1097"], "红桥区": ["117.1596", "39.1663"], "宣城": ["118.8062", "30.6244"], "齐齐哈尔": ["124.541", "47.5818"], "嘉兴": ["120.9155", "30.6354"], "昌江黎族自治县": ["109.0407", "19.2137"], "阿坝藏族羌族自治州": ["102.4805", "32.4536"], "仙桃": ["113.3789", "30.3003"], "台湾": ["121.0295", "23.6082"], "德宏傣族景颇族自治州": ["98.1299", "24.5874"], "潜江": ["112.7637", "30.3607"], "普洱": ["100.7446", "23.4229"], "怀柔区": ["116.6377", "40.6219"], "铜川": ["109.0393", "35.1947"], "泰安": ["117.0264", "36.0516"], "长春": ["125.8154", "44.2584"], "南开区": ["117.1527", "39.1065"], "海淀区": ["116.2202", "40.0239"], "澳门": ["113.5547", "22.1484"], "通州区": ["116.7297", "39.8131"], "阳江": ["111.8298", "22.0715"], "商洛": ["109.8083", "33.761"], "乌海": ["106.886", "39.4739"], "吉林": ["126.8372", "43.6047"], "上海": ["121.4648", "31.2891"], "上饶": ["117.8613", "28.7292"], "益阳": ["111.731", "28.3832"], "博尔塔拉蒙古自治州": ["81.8481", "44.6979"], "吉安": ["114.884", "26.9659"], "永州": ["111.709", "25.752"], "崇文区": ["116.4166", "39.8811"], "开县": ["108.4131", "31.2561"], "克拉玛依": ["85.2869", "45.5054"], "琼海": ["110.4208", "19.224"], "巢湖": ["117.7734", "31.4978"], "延边朝鲜族自治州": ["129.397", "43.2587"], "临汾": ["111.4783", "36.1615"], "南充": ["106.2048", "31.1517"], "昆明": ["102.9199", "25.4663"], "闸北区": ["121.4511", "31.2794"], "临沂": ["118.3118", "35.2936"], "河北": ["115.4004", "37.9688"], "赣州": ["115.2795", "25.8124"], "聊城": ["115.9167", "36.4032"], "海南": ["109.9512", "19.2041"], "保亭黎族苗族自治县": ["109.6284", "18.6108"], "温州": ["120.498", "27.8119"], "嘉峪关": ["98.1738", "39.8035"], "绥化": ["126.7163", "46.8018"], "成都": ["103.9526", "30.7617"], "广安": ["106.6333", "30.4376"], "西城区": ["116.3631", "39.9353"], "阳泉": ["113.4778", "38.0951"], "巫溪县": ["109.3359", "31.4813"], "本溪": ["124.1455", "41.1987"], "惠州": ["114.6204", "23.1647"], "云浮": ["111.7859", "22.8516"], "来宾": ["109.7095", "23.8403"], "密云县": ["117.0923", "40.5121"], "临沧": ["99.613", "24.0546"], "扬州": ["119.4653", "32.8162"], "塔城地区": ["86.6272", "45.8514"], "苏州": ["120.6519", "31.3989"], "白城": ["123.0029", "45.2637"], "奉贤区": ["121.5747", "30.8475"], "十堰": ["110.5115", "32.3877"], "漳州": ["117.5757", "24.3732"], "双桥区": ["105.7874", "29.4928"], "河南": ["113.4668", "33.8818"], "开封": ["114.5764", "34.6124"], "铜陵": ["117.9382", "30.9375"], "东莞": ["113.8953", "22.901"], "德州": ["116.6858", "37.2107"], "石家庄": ["114.4995", "38.1006"], "江西": ["116.0156", "27.29"], "鄂州": ["114.7302", "30.4102"], "承德": ["117.5757", "41.4075"], "天津": ["117.4219", "39.4189"], "娄底": ["111.6431", "27.7185"], "莱芜": ["117.6526", "36.2714"], "平顶山": ["112.9724", "33.739"], "阿勒泰地区": ["88.2971", "47.0929"], "玉林": ["110.2148", "22.3792"], "七台河": ["131.2756", "45.9558"], "抚顺": ["124.585", "41.8579"], "三明": ["117.5317", "26.3013"], "塘沽区": ["117.6801", "38.9987"], "定西": ["104.5569", "35.0848"], "河东区": ["117.2571", "39.1209"], "临夏回族自治州": ["103.2715", "35.5737"], "万盛区": ["106.908", "28.9325"], "伊犁哈萨克自治州": ["82.5513", "43.5498"], "随州": ["113.4338", "31.8768"], "大渡口区": ["106.4905", "29.4214"], "盘锦": ["121.9482", "41.0449"], "海口": ["110.3893", "19.8516"], "许昌": ["113.6975", "34.0466"], "朔州": ["113.0713", "39.6991"], "忻州": ["112.4561", "38.8971"], "大兴安岭地区": ["124.1016", "52.2345"], "北海": ["109.314", "21.6211"], "晋中": ["112.7747", "37.37"], "德阳": ["104.48", "31.1133"], "哈尔滨": ["127.9688", "45.368"], "襄樊": ["111.9397", "31.9263"], "茂名": ["111.0059", "22.0221"], "安徽": ["117.2461", "32.0361"], "江门": ["112.6318", "22.1484"], "哈密地区": ["93.7793", "42.9236"], "孝感": ["113.9502", "31.1188"], "文昌": ["110.8905", "19.7823"], "湛江": ["110.3577", "20.9894"], "锦州": ["121.6626", "41.4294"], "唐山": ["118.4766", "39.6826"], "浦东新区": ["121.6928", "31.2561"], "红河哈尼族彝族自治州": ["103.0408", "23.6041"], "池州": ["117.3889", "30.2014"], "雅安": ["102.6672", "29.8938"], "东城区": ["116.418", "39.9367"], "乌兰察布": ["112.5769", "41.77"], "垫江县": ["107.4573", "30.2454"], "资阳": ["104.9744", "30.1575"], "东营": ["118.7073", "37.5513"], "亳州": ["116.1914", "33.4698"], "汉沽区": ["117.8888", "39.2191"], "宁波": ["121.5967", "29.6466"], "文山壮族苗族自治州": ["104.8865", "23.5712"], "潍坊": ["119.0918", "36.524"], "璧山县": ["106.2048", "29.5807"], "凉山彝族自治州": ["101.9641", "27.6746"], "合肥": ["117.29", "32.0581"], "商丘": ["115.741", "34.2828"], "珠海": ["113.7305", "22.1155"], "白山": ["127.2217", "42.0941"], "吐鲁番地区": ["89.6375", "42.4127"], "丽水": ["119.5642", "28.1854"], "南昌": ["116.0046", "28.6633"], "怒江傈僳族自治州": ["99.1516", "26.5594"], "宁夏": ["105.9961", "37.3096"], "酒泉": ["96.2622", "40.4517"], "丰都县": ["107.8418", "29.9048"], "九江": ["115.4224", "29.3774"], "衢州": ["118.6853", "28.8666"], "武汉": ["114.3896", "30.6628"], "崇左": ["107.3364", "22.4725"], "南阳": ["112.4011", "33.0359"], "三亚": ["109.3716", "18.3698"], "黄南藏族自治州": ["101.5686", "35.1178"], "黄石": ["115.0159", "29.9213"], "平凉": ["107.0728", "35.321"], "咸宁": ["114.2578", "29.6631"], "宁河县": ["117.6801", "39.3853"], "甘孜藏族自治州": ["99.9207", "31.0803"], "丽江": ["100.448", "26.955"], "廊坊": ["116.521", "39.0509"], "绵阳": ["104.7327", "31.8713"], "天门": ["113.0273", "30.6409"], "兴安盟": ["121.3879", "46.1426"], "陕西": ["109.5996", "35.6396"], "奉节县": ["109.3909", "30.9265"], "新疆": ["84.9023", "41.748"], "城口县": ["108.7756", "31.9098"], "陇南": ["105.304", "33.5632"], "呼伦贝尔": ["120.8057", "50.2185"], "衡阳": ["112.4121", "26.7902"], "鄂尔多斯": ["108.9734", "39.2487"], "钦州": ["109.0283", "22.0935"], "运城": ["111.1487", "35.2002"], "西青区": ["117.1829", "39.0022"], "达州": ["107.6111", "31.333"], "西宁": ["101.4038", "36.8207"], "虹口区": ["121.4882", "31.2788"], "宿州": ["117.5208", "33.6841"], "梅州": ["116.1255", "24.1534"], "巫山县": ["109.8853", "31.1188"], "南平": ["118.136", "27.2845"], "和平区": ["117.2008", "39.1189"], "西安": ["109.1162", "34.2004"], "宜昌": ["111.1707", "30.7617"], "双鸭山": ["133.5938", "46.7523"], "石河子": ["86.0229", "44.2914"], "河池": ["107.8638", "24.5819"], "宜春": ["115.0159", "28.3228"], "江北区": ["106.8311", "29.6191"], "张家界": ["110.5115", "29.328"], "辽阳": ["123.4094", "41.1383"], "阿拉善盟": ["102.019", "40.1001"], "宣武区": ["116.3603", "39.8852"], "房山区": ["115.8453", "39.7163"], "白银": ["104.8645", "36.5076"], "徐汇区": ["121.4333", "31.1607"], "卢湾区": ["121.4758", "31.2074"], "沧州": ["116.8286", "38.2104"], "安顺": ["105.9082", "25.9882"], "梧州": ["110.9949", "23.5052"], "淄博": ["118.0371", "36.6064"], "武清区": ["117.0621", "39.4121"], "宝坻区": ["117.4274", "39.5913"], "延庆县": ["116.1543", "40.5286"], "福州": ["119.4543", "25.9222"], "舟山": ["122.2559", "30.2234"], "吴忠": ["106.853", "37.3755"], "果洛藏族自治州": ["99.3823", "34.0466"], "浙江": ["120.498", "29.0918"], "通化": ["125.9583", "41.8579"], "宝鸡": ["107.1826", "34.3433"], "大庆": ["124.7717", "46.4282"], "泉州": ["118.3228", "25.1147"], "儋州": ["109.3291", "19.5653"], "黄浦区": ["121.4868", "31.219"], "石柱土家族自治县": ["108.2813", "30.1025"], "邯郸": ["114.4775", "36.535"], "攀枝花": ["101.6895", "26.7133"], "石嘴山": ["106.4795", "39.0015"], "黄山": ["118.0481", "29.9542"], "南京": ["118.8062", "31.9208"], "合川区": ["106.3257", "30.108"], "湖州": ["119.8608", "30.7782"], "株洲": ["113.5327", "27.0319"], "门头沟区": ["115.8", "39.9957"], "金昌": ["102.074", "38.5126"], "重庆": ["107.7539", "30.1904"], "陵水黎族自治县": ["109.9924", "18.5415"], "顺义区": ["116.7242", "40.1619"], "万宁": ["110.3137", "18.8388"], "丰台区": ["116.2683", "39.8309"], "江苏": ["120.0586", "32.915"], "南岸区": ["106.6663", "29.5367"], "葫芦岛": ["120.1575", "40.578"], "辽源": ["125.343", "42.7643"], "兰州": ["103.5901", "36.3043"], "甘肃": ["95.7129", "40.166"], "四川": ["102.9199", "30.1904"], "潼南县": ["105.7764", "30.1135"], "乌鲁木齐": ["87.9236", "43.5883"], "杨浦区": ["121.528", "31.2966"], "北碚区": ["106.5674", "29.8883"], "呼和浩特": ["111.4124", "40.4901"], "拉萨": ["91.1865", "30.1465"], "信阳": ["114.8291", "32.0197"], "梁平县": ["107.7429", "30.6519"], "清远": ["112.9175", "24.3292"], "莆田": ["119.0918", "25.3455"], "武隆县": ["107.655", "29.35"], "普陀区": ["121.3879", "31.2602"], "北京": ["116.4551", "40.2539"], "秦皇岛": ["119.2126", "40.0232"], "恩施土家族苗族自治州": ["109.5007", "30.2563"], "綦江县": ["106.6553", "28.8171"], "汕尾": ["115.5762", "23.0438"], "楚雄彝族自治州": ["101.6016", "25.3619"], "屯昌县": ["110.0377", "19.362"], "眉山": ["103.8098", "30.0146"], "抚州": ["116.4441", "27.4933"], "阿克苏地区": ["82.9797", "41.0229"], "景德镇": ["117.334", "29.3225"], "永川区": ["105.8643", "29.2566"], "鞍山": ["123.0798", "40.6055"], "东丽区": ["117.4013", "39.1223"], "海西蒙古族藏族自治州": ["94.9768", "37.1118"], "鹤岗": ["130.4407", "47.7081"], "沈阳": ["123.1238", "42.1216"], "曲靖": ["103.9417", "25.7025"], "阿拉尔": ["81.2769", "40.6549"], "常州": ["119.4543", "31.5582"], "广元": ["105.6885", "32.2284"], "巴中": ["107.0618", "31.9977"], "大足县": ["105.7544", "29.6136"], "昌都地区": ["97.0203", "30.7068"], "朝阳": ["120.0696", "41.4899"], "海东地区": ["102.3706", "36.2988"], "新乡": ["114.2029", "35.3595"], "蚌埠": ["117.4109", "33.1073"], "包头": ["110.3467", "41.4899"], "渭南": ["109.7864", "35.0299"], "巴音郭楞蒙古自治州": ["88.1653", "39.6002"], "鹤壁": ["114.3787", "35.744"], "澄迈县": ["109.9937", "19.7314"], "牡丹江": ["129.7815", "44.7089"], "肇庆": ["112.1265", "23.5822"], "蓟县": ["117.4672", "40.004"], "朝阳区": ["116.4977", "39.949"], "石景山区": ["116.1887", "39.9346"], "中卫": ["105.4028", "36.9525"], "山南地区": ["92.2083", "28.3392"], "榆林": ["109.8743", "38.205"], "巴南区": ["106.7322", "29.4214"], "泰州": ["120.0586", "32.5525"], "淮北": ["116.6968", "33.6896"], "平谷区": ["117.1706", "40.2052"], "长寿区": ["107.1606", "29.9762"], "长沙": ["113.0823", "28.2568"], "广西": ["108.2813", "23.6426"], "五指山": ["109.5282", "18.8299"], "鹰潭": ["117.0813", "28.2349"], "毕节地区": ["105.1611", "27.0648"], "黔江区": ["108.7207", "29.4708"], "云南": ["101.8652", "25.1807"], "晋城": ["112.7856", "35.6342"], "盐城": ["120.2234", "33.5577"], "江津区": ["106.2158", "28.9874"], "通辽": ["121.4758", "43.9673"], "四平": ["124.541", "43.4894"], "铜仁地区": ["108.6218", "28.0096"], "秀山土家族苗族自治县": ["109.0173", "28.5205"], "大兴区": ["116.4716", "39.6352"], "三门峡": ["110.8301", "34.3158"], "焦作": ["112.8406", "35.1508"], "烟台": ["120.7397", "37.5128"], "乐东黎族自治县": ["109.0283", "18.6301"], "南宁": ["108.479", "23.1152"], "铜梁县": ["106.0291", "29.8059"], "云阳县": ["108.8306", "31.0089"], "吕梁": ["111.3574", "37.7325"], "阜新": ["122.0032", "42.2699"], "神农架林区": ["110.4565", "31.5802"], "厦门": ["118.1689", "24.6478"], "汉中": ["106.886", "33.0139"], "丹东": ["124.541", "40.4242"], "津南区": ["117.3958", "38.9603"], "佳木斯": ["133.0005", "47.5763"], "黔南布依族苗族自治州": ["107.2485", "25.8398"], "长治": ["112.8625", "36.4746"], "大港区": ["117.3875", "38.757"], "昌吉回族自治州": ["89.6814", "44.4507"], "定安县": ["110.3384", "19.4698"], "东方": ["108.8498", "19.0414"], "怀化": ["109.9512", "27.4438"], "甘南藏族自治州": ["102.9199", "34.6893"], "菏泽": ["115.6201", "35.2057"], "和田地区": ["81.167", "36.9855"], "涪陵区": ["107.3364", "29.6796"], "青浦区": ["121.1751", "31.1909"], "淮南": ["116.7847", "32.7722"], "山西": ["112.4121", "37.6611"], "松江区": ["121.1984", "31.0268"], "芜湖": ["118.3557", "31.0858"], "滁州": ["118.1909", "32.536"], "驻马店": ["114.1589", "32.9041"], "广州": ["113.5107", "23.2196"], "郑州": ["113.4668", "34.6234"], "福建": ["118.3008", "25.9277"], "荆州": ["113.291", "30.0092"], "枣庄": ["117.323", "34.8926"], "无锡": ["120.3442", "31.5527"], "河北区": ["117.2145", "39.1615"], "淮安": ["118.927", "33.4039"], "武威": ["103.0188", "38.1061"], "黄冈": ["115.2686", "30.6628"], "保定": ["115.0488", "39.0948"], "贵州": ["106.6113", "26.9385"], "延安": ["109.1052", "36.4252"], "大理白族自治州": ["99.9536", "25.6805"], "喀什地区": ["77.168", "37.8534"], "彭水苗族土家族自治县": ["108.2043", "29.3994"], "闵行区": ["121.4992", "31.0838"], "锡林郭勒盟": ["115.6421", "44.176"], "琼中黎族苗族自治县": ["109.8413", "19.0736"], "漯河": ["113.8733", "33.6951"], "鸡西": ["132.7917", "45.7361"], "酉阳土家族苗族自治县": ["108.8196", "28.8666"], "遂宁": ["105.5347", "30.6683"], "深圳": ["114.5435", "22.5439"], "内江": ["104.8535", "29.6136"], "荆门": ["112.6758", "30.9979"], "汕头": ["117.1692", "23.3405"], "辽宁": ["122.3438", "41.0889"], "广东": ["113.4668", "22.8076"], "白沙黎族自治县": ["109.3703", "19.211"], "郴州": ["113.2361", "25.8673"], "黔东南苗族侗族自治州": ["108.4241", "26.4166"], "林芝地区": ["95.4602", "29.1138"], "张家口": ["115.1477", "40.8527"], "昭通": ["104.0955", "27.6031"], "海南藏族自治州": ["100.3711", "35.9418"], "阜阳": ["115.7629", "32.9919"], "贵港": ["109.9402", "23.3459"], "五家渠": ["87.5391", "44.3024"], "金华": ["120.0037", "29.1028"], "湖北": ["112.2363", "31.1572"], "贵阳": ["106.6992", "26.7682"], "西双版纳傣族自治州": ["100.8984", "21.8628"], "黔西南布依族苗族自治州": ["105.5347", "25.3949"], "桂林": ["110.5554", "25.318"], "青岛": ["120.4651", "36.3373"], "大连": ["122.2229", "39.4409"], "威海": ["121.9482", "37.1393"], "沙坪坝区": ["106.3696", "29.6191"], "邢台": ["114.8071", "37.2821"], "长宁区": ["121.3852", "31.2115"], "香港": ["114.2784", "22.3057"], "新余": ["114.95", "27.8174"], "马鞍山": ["118.6304", "31.5363"], "北辰区": ["117.1761", "39.2548"], "南通": ["121.1023", "32.1625"], "宜宾": ["104.6558", "28.548"], "静安区": ["121.4484", "31.2286"], "银川": ["106.3586", "38.1775"], "那曲地区": ["88.1982", "33.3215"], "六安": ["116.3123", "31.8329"], "昌平区": ["116.1777", "40.2134"], "百色": ["106.6003", "23.9227"], "太原": ["112.3352", "37.9413"], "山东": ["118.7402", "36.4307"], "安阳": ["114.5325", "36.0022"], "济南": ["117.1582", "36.8701"], "六盘水": ["104.7546", "26.0925"], "玉树藏族自治州": ["93.5925", "33.9368"], "湖南": ["111.5332", "27.3779"], "大同": ["113.7854", "39.8035"], "南川区": ["107.1716", "29.1302"], "崇明县": ["121.5637", "31.5383"], "忠县": ["107.8967", "30.3223"], "九龙坡区": ["106.3586", "29.4049"], "衡水": ["115.8838", "37.7161"], "台州": ["121.1353", "28.6688"], "萍乡": ["113.9282", "27.4823"], "嘉定区": ["121.2437", "31.3625"], "宿迁": ["118.5535", "33.7775"], "镇江": ["119.4763", "31.9702"], "揭阳": ["116.1255", "23.313"], "岳阳": ["113.2361", "29.1357"], "泸州": ["105.4578", "28.493"], "松原": ["124.0906", "44.7198"], "防城港": ["108.0505", "21.9287"], "中山": ["113.4229", "22.478"], "固原": ["106.1389", "35.9363"], "内蒙古": ["117.5977", "44.3408"], "贺州": ["111.3135", "24.4006"], "滨州": ["117.8174", "37.4963"], "图木舒克": ["79.1345", "39.8749"], "济宁": ["116.8286", "35.3375"] };
var alirl = [
[[109.5996, 35.6396], [116.4551, 40.2539]],
[[109.5996, 35.6396], [107.7539, 30.1904]],
[[109.5996, 35.6396], [113.4668, 33.8818]],
[[109.5996, 35.6396], [101.8652, 25.1807]],
[[109.5996, 35.6396], [122.3438, 41.0889]],
[[109.5996, 35.6396], [117.2461, 32.0361]],
[[109.5996, 35.6396], [118.7402, 36.4307]],
[[109.5996, 35.6396], [84.9023, 41.748]],
[[109.5996, 35.6396], [120.0586, 32.915]],
[[109.5996, 35.6396], [95.7129, 40.166]],
[[109.5996, 35.6396], [112.4121, 37.6611]],
[[109.5996, 35.6396], [126.8372, 43.6047]],
[[109.5996, 35.6396], [96.2402, 35.4199]],
[[109.5996, 35.6396], [102.9199, 30.1904]],
[[109.5996, 35.6396], [105.9961, 37.3096]],
[[109.5996, 35.6396], [111.5332, 27.3779]]
];
// 对应的地点坐标
var optionData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
console.log(res)
return res;
};
function randomData() {
return Math.round(Math.random() * 500);
}
var mydata = [
{ name: '北京', value: '100' },
{ name: '重庆', value: randomData() },
{ name: '河南', value: randomData() },
{ name: '云南', value: randomData() },
{ name: '辽宁', value: randomData() },
{ name: '安徽', value: randomData() },
{ name: '山东', value: randomData() },
{ name: '新疆', value: randomData() },
{ name: '江苏', value: randomData() },
{ name: '甘肃', value: randomData() },
{ name: '山西', value: randomData() },
{ name: '陕西', value: randomData() },
{ name: '吉林', value: randomData() },
{ name: '青海', value: randomData() },
{ name: '四川', value: randomData() },
{ name: '宁夏', value: randomData() },
{ name: '湖南', value: randomData() }
];
var option = {
tooltip: {
show: true,
trigger: 'item',
triggerOn: "none",
showContent: true,
alwaysShowContent: true,
showDelay: 0,
hideDelay: 5000,
enterable: false, //鼠标是否可进入提示框浮层中
confine: false, //是否将 tooltip 框限制在图表的区域内
transitionDuration: 0.4,
backgroundColor: "rgba(51, 82, 84, .8)", //标题背景色
padding: [2, 16],
z: 10,
width: "auto",
borderRadius: 22,
borderColor: "#5fae37", //边框颜色
borderWidth: 1,
textStyle: { color: '#fff', fontSize: 10, align: 'center' },
formatter: function (params, ticket, callback) {
$.ajax({
type: "GET",
url: "./main/getData",
dataType: "json",
success: function (data) {
let msg = data.msg
callback(ticket, msg)
},
error: function (jqXHR) {
console.log("Error: " + jqXHR.status);
}
});
return "Loading"
},
},
//左侧小导航图标
visualMap: [
{
show: false,
seriesIndex: 0,
text: ['cover'],
x: 'left',
y: 'bottom',
splitList: [
{ start: 500, end: 600 }, { start: 400, end: 500 },
{ start: 300, end: 400 }, { start: 200, end: 300 },
{ start: 100, end: 200 }, { start: 0, end: 100 },
],
color: ['#5a86a3', '#6c887a', '#5165a2', '#5a86a3']
},
{
show: false,
type: 'continuous',
seriesIndex: 1,
text: ['scatter'],
left: 'right',
calculable: true,
inRange: {
color: ['#88b354']
},
}
],
geo: {
name: 'geo',
map: 'china',
roam: true,//标识是否可以缩放和拖动
label: {
normal: {
show: true, //显示省份标签
textStyle: {
color: "white",
fontSize: 9
} //省份标签字体颜色
},
emphasis: { //对应的鼠标悬浮效果
show: false,
textStyle: {
// color: "#800080"
color: "white"
}
}
},
aspectScale: 0.75,
zoom: 1.2,
itemStyle: {
normal: {
borderWidth: .5, //区域边框宽度
borderColor: '#009fe8', //区域边框颜色
areaColor: "#271a62", //区域颜色
},
emphasis: {
borderWidth: .5,
borderColor: '#4b0082',
// areaColor: "#ffdead",
areaColor: "#0174ad",
}
}
},
//各省地图颜色数据依赖value
series: [
{
name: 'cover', // 浮动框的标题
type: 'map',
geoIndex: 0,
roam: true,//标识是否可以缩放和拖动
data: mydata
},
// 对应省份
{
name: 'scatter',
type: "scatter",
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: 14,
constantSpeed: 12,
// opacity: 1,
label: {
show: false,
formatter: '{b}',
textStyle: {
color: 'white',
decoration: 'none',
fontSize: 14,
backgroundColor: 'rgba(51,82,84,.6)'
}
},
itemStyle: {
borderWidth: 1,
borderColor: '#ffffff'
},
data: optionData([{
name: "云南",
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: "北京",
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: "吉林",
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: "四川",
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: "宁夏",
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: "安徽",
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: "山东",
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: "山西",
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: "新疆",
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: "江苏",
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: "河南",
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: "湖南",
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: "甘肃",
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: "辽宁",
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: "重庆",
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: "陕西",
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: "青海",
value: ((Math.random() * 100) + 50).toFixed(2)
}])
},
//画线
{
type: 'lines',
coordinateSystem: 'geo',
effect: {
show: true,
trailWidth: 1,
trailOpacity: 0.5,
trailLength: 0.2,
constantSpeed: 62
},
// blendMode: 'lighter',
lineStyle: {
width: 1,
color: 'white',
opacity: 0.5
},
data: alirl
}
]
};
var MapId = echarts.init(document.getElementById('MapId'));
$(document).ready(function () {
MapId.setOption(option);
window.addEventListener("resize", function () {
MapId.resize();
});
});
非常关键的几点
1.visualMap 缩略图
a.仅对series起作用
b.seriesIndex显示series中第几个
c.color图中需要标记的颜色
2.geo 标记地区、中心点、划线必设。(基础地图)
3.series[0] geoIndex 必设 ,否则出现两个地图;划线、标记中心点则使用coordinateSystem: ‘geo’
4.tooltip 想显示怎样就怎样 ,想什么时候显示就什么时候显示
a.样式 padding格式 number|array;数值设置均为number ,不带引号哦
b.何时显示:设置以下两点
formatter 中的callback ;使用异步请求通过callback(ticket, msg)返回且必须 return “Loading”;
使用此方法调用显示 seriesIndex第几个标记显示 。name显示在那块及标记点位置或者使用dataIndex对应位置在数组中的下标
MapId.dispatchAction({
type: 'showTip',
seriesIndex: 0,
name: "陕西"
});
版权所有:转载请注明 。 才疏学浅,如有错误,还望高手指正。