• Vue实现世界地图展示各国数据


    前几天开发项目有个需求:  通过世界地图的形式实时展示全球市场的销售情况

    效果图

      

       

    这里默认vue项目中安装好echart

    先在组件中引入(将需求封装为一个组件使用)

    import echarts from 'echarts'
    require('echarts/map/js/world.js')      //这安装的是4.2.1版本的echart,其他版本可能会出错没测过

    配置

                    this.chart.setOption({ // 图表主标题
                        title: {
                            text: '世界地图', // 主标题文本,支持使用 
     换行
                            top: 20, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
                            left: 'center', // 值: 'left', 'center', 'right' 同上
                            textStyle: { // 文本样式
                                fontSize: 24,
                                fontWeight: 600,
                                color: '#fff'
                            }
                        },
                        // 提示框组件
                        tooltip: {
                            trigger: 'item', // 触发类型, 数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用
                            // 提示框浮层内容格式器,支持字符串模板和回调函数两种形式
                            // 使用函数模板  传入的数据值 -> value: number | Array
                            formatter: function(val) {
                                return val.data.name + ': ' + val.data.value
                            }
                        },
                        // 视觉映射组件
                        visualMap: {
                            type: 'continuous', // continuous 类型为连续型  piecewise 类型为分段型
                            show: true, // 是否显示 visualMap-continuous 组件 如果设置为 false,不会显示,但是数据映射的功能还存在
                            // 指定 visualMapContinuous 组件的允许的最小/大值。'min'/'max' 必须用户指定。
                            // [visualMap.min, visualMax.max] 形成了视觉映射的『定义域』
                            min: 0,
                            max: 1000000,
                            // 文本样式
                            textStyle: {
                                fontSize: 14,
                                color: '#fff'
                            },
                            realtime: false, // 拖拽时,是否实时更新
                            calculable: true, // 是否显示拖拽用的手柄
                            // 定义 在选中范围中 的视觉元素
                            inRange: {
                                color: ['#9fb5ea', '#e6ac53', '#74e2ca', '#85daef', '#9feaa5', '#5475f5'] // 图元的颜色
                            }
                        },
                        series: [{
                            type: 'map', // 类型
                            // 系列名称,用于tooltip的显示,legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
                            name: '世界地图',
                            mapType: 'world', // 地图类型
                            // 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move' 设置成 true 为都开启
                            roam: true,
                            // 图形上的文本标签
                            label: {
                                show: false // 是否显示对应地名
                            },
                            // 地图区域的多边形 图形样式
                            itemStyle: {
                                areaColor: '#7B68EE', // 地图区域的颜色 如果设置了visualMap,areaColor属性将不起作用
                                borderWidth: 0.5, // 描边线宽 为 0 时无描边
                                borderColor: '#000', // 图形的描边颜色 支持的颜色格式同 color,不支持回调函数
                                borderType: 'solid' // 描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'
                            },
                            // 高亮状态下的多边形和标签样式
                            emphasis: {
                                label: {
                                    show: true, // 是否显示标签
                                    color: '#fff' // 文字的颜色 如果设置为 'auto',则为视觉映射得到的颜色,如系列色
                                },
                                itemStyle: {
                                    areaColor: '#FF6347' // 地图区域的颜色
                                }
                            },
                            // 自定义地区的名称映射(下面会给出nameMap)
                            nameMap:nameMap,
                            // 地图中的数据,内容数组 数组项可以为单个数值
                            data: this.data 
                        }]
                    }) 

    nameMap的数据

      const nameMap = {
            "Afghanistan": "阿富汗",
            "Angola": "安哥拉",
            "Albania": "阿尔巴尼亚",
            "Algeria": "阿尔及利亚",
            "Argentina": "阿根廷",
            "Armenia": "亚美尼亚",
            "Australia": "澳大利亚",
            "Austria": "奥地利",
            "Azerbaijan": "阿塞拜疆",
            "Bahamas": "巴哈马",
            "Bangladesh": "孟加拉国",
            "Belgium": "比利时",
            "Benin": "贝宁",
            "Burkina Faso": "布基纳法索",
            "Burundi": "布隆迪",
            "Bulgaria": "保加利亚",
            "Bosnia and Herz.": "波斯尼亚和黑塞哥维那",
            "Belarus": "白俄罗斯",
            "Belize": "伯利兹",
            "Bermuda": "百慕大群岛",
            "Bolivia": "玻利维亚",
            "Brazil": "巴西",
            "Brunei": "文莱",
            "Bhutan": "不丹",
            "Botswana": "博茨瓦纳",
            "Cambodia": "柬埔寨",
            "Cameroon": "喀麦隆",
            "Canada": "加拿大",
            "Central African Rep.": "中非共和国",
            "Chad": "乍得",
            "Chile": "智利",
            "China": "中国",
            "Colombia": "哥伦比亚",
            "Congo": "刚果",
            "Costa Rica": "哥斯达黎加",
            "Côte d'Ivoire": "科特迪瓦",
            "Croatia": "克罗地亚",
            "Cuba": "古巴",
            "Cyprus": "塞浦路斯",
            "Czech Rep.": "捷克共和国",
            "Dem. Rep. Korea": "韩国",
            "Dem. Rep. Congo": "民主刚果",
            "Denmark": "丹麦",
            "Djibouti": "吉布提",
            "Dominican Rep.": "多米尼加共和国",
            "Ecuador": "厄瓜多尔",
            "Egypt": "埃及",
            "El Salvador": "萨尔瓦多",
            "Eq. Guinea": "赤道几内亚",
            "Eritrea": "厄立特里亚",
            "Estonia": "爱沙尼亚",
            "Ethiopia": "埃塞俄比亚",
            "Falkland Is.": "福克兰群岛",
            "Fiji": "斐济",
            "Finland": "芬兰",
            "France": "法国",
            "French Guiana": "法属圭亚那",
            "Fr. S. Antarctic Lands": "法属南部领地",
            "Gabon": "加蓬",
            "Gambia": "冈比亚",
            "Germany": "德国",
            "Georgia": "佐治亚州",
            "Ghana": "加纳",
            "Greece": "希腊",
            "Greenland": "格陵兰",
            "Guatemala": "危地马拉",
            "Guinea": "几内亚",
            "Guinea-Bissau": "几内亚比绍",
            "Guyana": "圭亚那",
            "Haiti": "海地",
            "Heard I. and McDonald Is.": "赫德岛和麦克唐纳群岛",
            "Honduras": "洪都拉斯",
            "Hungary": "匈牙利",
            "Iceland": "冰岛",
            "India": "印度",
            "Indonesia": "印度尼西亚",
            "Iran": "伊朗",
            "Iraq": "伊拉克",
            "Ireland": "爱尔兰",
            "Israel": "以色列",
            "Italy": "意大利",
            "Ivory Coast": "象牙海岸",
            "Jamaica": "牙买加",
            "Japan": "日本",
            "Jordan": "乔丹",
            "Kashmir": "克什米尔",
            "Kazakhstan": "哈萨克斯坦",
            "Kenya": "肯尼亚",
            "Kosovo": "科索沃",
            "Kuwait": "科威特",
            "Kyrgyzstan": "吉尔吉斯斯坦",
            "Laos": "老挝",
            "Lao PDR": "老挝人民民主共和国",
            "Latvia": "拉脱维亚",
            "Lebanon": "黎巴嫩",
            "Lesotho": "莱索托",
            "Liberia": "利比里亚",
            "Libya": "利比亚",
            "Lithuania": "立陶宛",
            "Luxembourg": "卢森堡",
            "Madagascar": "马达加斯加",
            "Macedonia": "马其顿",
            "Malawi": "马拉维",
            "Malaysia": "马来西亚",
            "Mali": "马里",
            "Mauritania": "毛里塔尼亚",
            "Mexico": "墨西哥",
            "Moldova": "摩尔多瓦",
            "Mongolia": "蒙古",
            "Montenegro": "黑山",
            "Morocco": "摩洛哥",
            "Mozambique": "莫桑比克",
            "Myanmar": "缅甸",
            "Namibia": "纳米比亚",
            "Netherlands": "荷兰",
            "New Caledonia": "新喀里多尼亚",
            "New Zealand": "新西兰",
            "Nepal": "尼泊尔",
            "Nicaragua": "尼加拉瓜",
            "Niger": "尼日尔",
            "Nigeria": "尼日利亚",
            "Korea": "朝鲜",
            "Northern Cyprus": "北塞浦路斯",
            "Norway": "挪威",
            "Oman": "阿曼",
            "Pakistan": "巴基斯坦",
            "Panama": "巴拿马",
            "Papua New Guinea": "巴布亚新几内亚",
            "Paraguay": "巴拉圭",
            "Peru": "秘鲁",
            "Republic of the Congo": "刚果共和国",
            "Philippines": "菲律宾",
            "Poland": "波兰",
            "Portugal": "葡萄牙",
            "Puerto Rico": "波多黎各",
            "Qatar": "卡塔尔",
            "Republic of Seychelles": "塞舌尔共和国",
            "Romania": "罗马尼亚",
            "Russia": "俄罗斯",
            "Rwanda": "卢旺达",
            "Samoa": "萨摩亚",
            "Saudi Arabia": "沙特阿拉伯",
            "Senegal": "塞内加尔",
            "Serbia": "塞尔维亚",
            "Sierra Leone": "塞拉利昂",
            "Slovakia": "斯洛伐克",
            "Slovenia": "斯洛文尼亚",
            "Solomon Is.": "所罗门群岛",
            "Somaliland": "索马里兰",
            "Somalia": "索马里",
            "South Africa": "南非",
            "S. Geo. and S. Sandw. Is.": "南乔治亚和南桑德威奇群岛",
            "S. Sudan": "南苏丹",
            "Spain": "西班牙",
            "Sri Lanka": "斯里兰卡",
            "Sudan": "苏丹",
            "Suriname": "苏里南",
            "Swaziland": "斯威士兰",
            "Sweden": "瑞典",
            "Switzerland": "瑞士",
            "Syria": "叙利亚",
            "Tajikistan": "塔吉克斯坦",
            "Tanzania": "坦桑尼亚",
            "Thailand": "泰国",
            "The Kingdom of Tonga": "汤加王国",
            "Timor-Leste": "东帝汶",
            "Togo": "多哥",
            "Trinidad and Tobago": "特立尼达和多巴哥",
            "Tunisia": "突尼斯",
            "Turkey": "土耳其",
            "Turkmenistan": "土库曼斯坦",
            "Uganda": "乌干达",
            "Ukraine": "乌克兰",
            "United Arab Emirates": "阿拉伯联合酋长国",
            "United Kingdom": "大不列颠联合王国",
            "United Republic of Tanzania": "坦桑尼亚联合共和国",
            "United States": "美国",
            "United States of America": "美利坚合众国",
            "Uruguay": "乌拉圭",
            "Uzbekistan": "乌兹别克斯坦",
            "Vanuatu": "瓦努阿图",
            "Venezuela": "委内瑞拉",
            "Vietnam": "越南",
            "West Bank": "西岸",
            "W. Sahara": "西撒哈拉",
            "Yemen": "也门",
            "Zambia": "赞比亚",
            "Zimbabwe": "津巴布韦"
        }
  • 相关阅读:
    云栖大会2020
    云栖大会2020
    云栖大会2020
    《利用知识图提高抽象摘要的事实正确性》
    onkeyup="this.value=this.value.replace(/[^1-9]D*$/,'')"
    javamail发送excel附件
    model.org.orgId
    window.parent.returnValue
    删除了用户的org和role
    window.top.popForm()表单以窗口的形式弹出
  • 原文地址:https://www.cnblogs.com/baller/p/14681995.html
Copyright © 2020-2023  润新知