首页 前端知识 echarts 绘制世界地图 中国地图

echarts 绘制世界地图 中国地图

2024-06-05 13:06:13 前端知识 前端哥 672 551 我要收藏

1、下载 世界地图和中国地图加载包
网上找了很长时间,分享
world.js
china.js
下载地址:
链接:https://pan.baidu.com/s/1itbfiTMNMkcbLfUs0NnWdQ
提取码:6542

文件夹内有

在这里插入图片描述
2、中国地图

//引入echarts库
//引入 china.js库 ,
//如是vue环境,可将china.js放到node-moudules/echarts文件夹下,再主js文件引入即可

var option= {
                    tooltip: {
                        triggerOn: "mousemove",   
                        padding:8,
                        borderWidth:1,
                        borderColor:'#409eff',
                        backgroundColor:'rgba(255,255,255,0.7)',
                        textStyle:{
                            color:'#000000',
                            fontSize:13
                        },                       
                    },
                    visualMap: {
                        show:true,
                        left: 26,
                        bottom: 40,
                        showLabel:true,
                        pieces: [
                            {
                                gte: 1000,
                                label: ">= 1000",
                                color: "#889900"
                            },
                            {
                                gte: 700,
                                lt: 999,
                                label: "700 - 999",
                                color: "#776655"
                            },
                            {
                                gte: 500,
                                lt: 699,
                                label: "500 - 699",
                                color: "#9fea77"
                            },
                            {
                                gte: 100,
                                lt:499,
                                label: "100 - 499",
                                color: "#866aef"
                            },
                            {
                                gte: 10,
                                lt: 99,
                                label: "10 - 99",
                                color: "#74e2ca"
                            },
                            {
                                lt:10,
                                label:'<10',
                                color: "#99b8ea"
                            }
                        ]
                    },
                    geo: {                       
                        map: "china", //重要                      
                        scaleLimit: {
                            min: 1,
                            max: 2
                        },
                        zoom: 1,
                         layoutSize: "100%",
                        label: {
                            normal: {                               
                                show:true,//显示地名
                                fontSize: "14",
                                color: "rgba(0,0,0,0.7)"
                            },
                            emphasis: {
								show: false,
								textStyle: {
									color: "#F3F3F3"
								}
							}
                        },
                        itemStyle: {
                            normal: {
                                borderColor: "rgba(0, 0, 0, 0.2)",
                                areaColor: '#1955a4',
                            },
                            emphasis: {
                                areaColor: "#f2d5ad",
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                borderWidth: 0
                            }
                        }
                    },
                    series: [
                        {
                            name:"专利数量",
                            type: "map",                       
                            geoIndex: 0,
                            //数据格式重要
                            data:[{ name: "北京", value: 440 },
                                  { name: "天津", value: 730 },
                                  { name: "上海", value: 100},]
                           }
                    ]
            }

3、世界地图
世界地图涉及参数字典,中英文对照

var  nameMap = {
     "中国台湾":"Taiwan",
    "加拿大": "Canada",
    "土库曼斯坦": "Turkmenistan",
    "圣赫勒拿": "Saint Helena",
    "老挝": "Lao PDR",
    "立陶宛": "Lithuania",
    "柬埔寨": "Cambodia",
    "埃塞俄比亚": "Ethiopia",
    "法罗群岛": "Faeroe Is.",
    "斯威士兰": "Swaziland",
    "巴勒斯坦": "Palestine",
    "伯利兹": "Belize",
    "阿根廷": "Argentina",
    "玻利维亚": "Bolivia",
    "喀麦隆": "Cameroon",
    "布基纳法索": "Burkina Faso",
    "奥兰群岛": "Aland",
    "巴林": "Bahrain",
    "沙特阿拉伯": "Saudi Arabia",
    "法属波利尼西亚": "Fr. Polynesia",
    "佛得角": "Cape Verde",
    "西撒哈拉": "W. Sahara",
    "斯洛文尼亚": "Slovenia",
    "危地马拉": "Guatemala",
    "几内亚": "Guinea",
    "刚果(金)": "Dem. Rep. Congo",
    "德国": "Germany",
    "西班牙": "Spain",
    "利比里亚": "Liberia",
    "荷兰": "Netherlands",
    "牙买加": "Jamaica",
    "所罗门群岛": "Solomon Is.",
    "阿曼": "Oman",
    "坦桑尼亚": "Tanzania",
    "哥斯达黎加": "Costa Rica",
    "曼岛": "Isle of Man",
    "加蓬": "Gabon",
    "纽埃": "Niue",
    "巴哈马": "Bahamas",
    "新西兰": "New Zealand",
    "也门": "Yemen",
    "泽西岛": "Jersey",
    "巴基斯坦": "Pakistan",
    "阿尔巴尼亚": "Albania",
    "萨摩亚": "Samoa",
    "捷克": "Czech Rep.",
    "阿拉伯联合酋长国": "United Arab Emirates",
    "关岛": "Guam",
    "印度": "India",
    "阿塞拜疆": "Azerbaijan",
    "北马里亚纳群岛": "N. Mariana Is.",
    "莱索托": "Lesotho",
    "肯尼亚": "Kenya",
    "白俄罗斯": "Belarus",
    "塔吉克斯坦": "Tajikistan",
    "土耳其": "Turkey",
    "阿富汗": "Afghanistan",
    "孟加拉国": "Bangladesh",
    "毛里塔尼亚": "Mauritania",
    "朝鲜": "Dem. Rep. Korea",
    "圣卢西亚": "Saint Lucia",
    "英属印度洋领地": "Br. Indian Ocean Ter.",
    "蒙古国": "Mongolia",
    "法国": "France",
    "库拉索岛": "Cura?ao",
    "南苏丹": "S. Sudan",
    "卢旺达": "Rwanda",
    "斯洛伐克": "Slovakia",
    "索马里": "Somalia",
    "秘鲁": "Peru",
    "瓦努阿图": "Vanuatu",
    "挪威": "Norway",
    "马拉维": "Malawi",
    "贝宁": "Benin",
    "圣文森特和格林纳丁斯": "St. Vin. and Gren.",
    "韩国": "Korea",
    "新加坡": "Singapore",
    "黑山": "Montenegro",
    "开曼群岛": "Cayman Is.",
    "多哥": "Togo",
    "中国": "China",
    "赫德岛和麦克唐纳群岛": "Heard I. and McDonald Is.",
    "亚美尼亚": "Armenia",
    "马尔维纳斯群岛(福克兰)": "Falkland Is.",
    "乌克兰": "Ukraine",
    "加纳": "Ghana",
    "汤加": "Tonga",
    "芬兰": "Finland",
    "利比亚": "Libya",
    "多米尼加": "Dominican Rep.",
    "印度尼西亚": "Indonesia",
    "毛里求斯": "Mauritius",
    "赤道几内亚": "Eq. Guinea",
    "瑞典": "Sweden",
    "越南": "Vietnam",
    "马里": "Mali",
    "俄罗斯": "Russia",
    "保加利亚": "Bulgaria",
    "美国": "United States",
    "罗马尼亚": "Romania",
    "安哥拉": "Angola",
    "乍得": "Chad",
    "南非": "South Africa",
    "斐济": "Fiji",
    "列支敦士登": "Liechtenstein",
    "马来西亚": "Malaysia",
    "奥地利": "Austria",
    "莫桑比克": "Mozambique",
    "乌干达": "Uganda",
    "日本": "Japan",
    "尼日尔": "Niger",
    "巴西": "Brazil",
    "科威特": "Kuwait",
    "巴拿马": "Panama",
    "圭亚那合作共和国": "Guyana",
    "马达加斯加": "Madagascar",
    "卢森堡": "Luxembourg",
    "美属萨摩亚": "American Samoa",
    "安道尔": "Andorra",
    "爱尔兰": "Ireland",
    "意大利": "Italy",
    "尼日利亚": "Nigeria",
    "特克斯和凯科斯群岛": "Turks and Caicos Is.",
    "厄瓜多尔": "Ecuador",
    "美属维尔京群岛": "U.S. Virgin Is.",
    "文莱": "Brunei",
    "澳大利亚": "Australia",
    "伊朗": "Iran",
    "阿尔及利亚": "Algeria",
    "萨尔瓦多": "El Salvador",
    "科特迪瓦": "Côte d'Ivoire",
    "智利": "Chile",
    "波多黎各": "Puerto Rico",
    "比利时": "Belgium",
    "泰国": "Thailand",
    "海地": "Haiti",
    "伊拉克": "Iraq",
    "圣多美和普林西比": "S?o Tomé and Principe",
    "塞拉利昂": "Sierra Leone",
    "格鲁吉亚": "Georgia",
    "丹麦": "Greenland",
    "菲律宾": "Philippines",
    "南乔治亚岛和南桑威奇群岛": "S. Geo. and S. Sandw. Is.",
    "摩尔多瓦": "Moldova",
    "摩洛哥": "Morocco",
    "纳米比亚": "Namibia",
    "马耳他": "Malta",
    "几内亚比绍": "Guinea-Bissau",
    "基里巴斯": "Kiribati",
    "瑞士": "Switzerland",
    "格林纳达": "Grenada",
    "塞舌尔": "Seychelles",
    "葡萄牙": "Portugal",
    "爱沙尼亚": "Estonia",
    "乌拉圭": "Uruguay",
    "安提瓜和巴布达": "Antigua and Barb.",
    "黎巴嫩": "Lebanon",
    "乌兹别克斯坦": "Uzbekistan",
    "突尼斯": "Tunisia",
    "吉布提": "Djibouti",
    "东帝汶": "Timor-Leste",
    "多米尼克": "Dominica",
    "哥伦比亚": "Colombia",
    "布隆迪": "Burundi",
    "波斯尼亚和黑塞哥维那": "Bosnia and Herz.",
    "塞浦路斯": "Cyprus",
    "巴巴多斯": "Barbados",
    "卡塔尔": "Qatar",
    "帕劳": "Palau",
    "不丹": "Bhutan",
    "苏丹": "Sudan",
    "尼泊尔": "Nepal",
    "密克罗尼西亚": "Micronesia",
    "百慕大": "Bermuda",
    "苏里南": "Suriname",
    "委内瑞拉": "Venezuela",
    "以色列": "Israel",
    "圣皮埃尔和密克隆群岛": "St. Pierre and Miquelon",
    "中非共和国": "Central African Rep.",
    "冰岛": "Iceland",
    "赞比亚": "Zambia",
    "塞内加尔": "Senegal",
    "巴布亚新几内亚": "Papua New Guinea",
    "特立尼达和多巴哥": "Trinidad and Tobago",
    "津巴布韦": "Zimbabwe",
    "约旦": "Jordan",
    "冈比亚": "Gambia",
    "哈萨克斯坦": "Kazakhstan",
    "波兰": "Poland",
    "厄立特里亚": "Eritrea",
    "吉尔吉斯斯坦": "Kyrgyzstan",
    "蒙特塞拉特": "Montserrat",
    "新喀里多尼亚": "New Caledonia",
    "马其顿": "Macedonia",
    "巴拉圭": "Paraguay",
    "拉脱维亚": "Latvia",
    "匈牙利": "Hungary",
    "叙利亚": "Syria",
    "洪都拉斯": "Honduras",
    "缅甸": "Myanmar",
    "墨西哥": "Mexico",
    "埃及": "Egypt",
    "尼加拉瓜": "Nicaragua",
    "古巴": "Cuba",
    "塞尔维亚": "Serbia",
    "科摩罗": "Comoros",
    "英国": "United Kingdom",
    "南极洲": "Fr. S. Antarctic Lands",
    "刚果(布)": "Congo",
    "希腊": "Greece",
    "斯里兰卡": "Sri Lanka",
    "克罗地亚": "Croatia",
    "博茨瓦纳": "Botswana",
    "锡亚琴冰川地区": "Siachen Glacier"
}

代码基本同上:

var option= {
                 。。。。。
                    },
                    geo: {                       
                        map: "world", //重要                      
                        。。。。
                       。。。
                    },
                    series: [
                        {
                            name:"专利数量",
                            type: "map",                       
                            geoIndex: 0,
                            //数据格式重要
                            data:[{ name: "Egypt", value: 440 },
                                  { name: "Serbia", value: 730 },
                                  { name: "Botswana", value: 100},]
                           }
                    ]
            }
```![在这里插入图片描述](https://img-blog.csdnimg.cn/acd0e98083e54b48b7c04b0dc1001678.png)


转载请注明出处或者链接地址:https://www.qianduange.cn//article/10848.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!