Vue 实现世界地图展示，根据国家中数量的多少区分（类似世界疫情地图）

1.因为是根据国家进行展示，所以我们需要国家的数据，我建了一张表来存储国家的中英文，下面是对应的SQL

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for country
-- ----------------------------
DROP TABLE IF EXISTS `country`;
CREATE TABLE `country` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) DEFAULT NULL,
  `name_en` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=197 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of country
-- ----------------------------
INSERT INTO `country` VALUES ('1', '美国', 'United States');
INSERT INTO `country` VALUES ('2', '印度', 'India');
INSERT INTO `country` VALUES ('3', '巴西', 'Brazil');
INSERT INTO `country` VALUES ('4', '俄罗斯', 'Russia');
INSERT INTO `country` VALUES ('5', '法国', 'France');
INSERT INTO `country` VALUES ('6', '英国', 'United Kingdom');
INSERT INTO `country` VALUES ('7', '土耳其', 'Turkey');
INSERT INTO `country` VALUES ('8', '意大利', 'Italy');
INSERT INTO `country` VALUES ('9', '西班牙', 'Spain');
INSERT INTO `country` VALUES ('10', '阿根廷', 'Argentina');
INSERT INTO `country` VALUES ('11', '德国', 'Germany');
INSERT INTO `country` VALUES ('12', '哥伦比亚', 'Colombia');
INSERT INTO `country` VALUES ('13', '墨西哥', 'Mexico');
INSERT INTO `country` VALUES ('14', '波兰', 'Poland');
INSERT INTO `country` VALUES ('15', '伊朗', 'Iran');
INSERT INTO `country` VALUES ('16', '乌克兰', 'Ukraine');
INSERT INTO `country` VALUES ('17', '秘鲁', 'Peru');
INSERT INTO `country` VALUES ('18', '南非', 'South Africa');
INSERT INTO `country` VALUES ('19', '荷兰', 'Netherlands');
INSERT INTO `country` VALUES ('20', '印度尼西亚', 'Indonesia');
INSERT INTO `country` VALUES ('21', '捷克', 'Czech Rep.');
INSERT INTO `country` VALUES ('22', '比利时', 'Belgium');
INSERT INTO `country` VALUES ('23', '罗马尼亚', 'Romania');
INSERT INTO `country` VALUES ('24', '智利', 'Chile');
INSERT INTO `country` VALUES ('25', '伊拉克', 'Iraq');
INSERT INTO `country` VALUES ('26', '加拿大', 'Canada');
INSERT INTO `country` VALUES ('27', '孟加拉', 'Bangladesh');
INSERT INTO `country` VALUES ('28', '菲律宾', 'Philippines');
INSERT INTO `country` VALUES ('29', '巴基斯坦', 'Pakistan');
INSERT INTO `country` VALUES ('30', '摩洛哥', 'Morocco');
INSERT INTO `country` VALUES ('31', '瑞士', 'Switzerland');
INSERT INTO `country` VALUES ('32', '以色列', 'Israel');
INSERT INTO `country` VALUES ('33', '葡萄牙', 'Portugal');
INSERT INTO `country` VALUES ('34', '瑞典', 'Sweden');
INSERT INTO `country` VALUES ('35', '沙特阿拉伯', 'Saudi Arabia');
INSERT INTO `country` VALUES ('36', '奥地利', 'Austria');
INSERT INTO `country` VALUES ('37', '匈牙利', 'Hungary');
INSERT INTO `country` VALUES ('38', '塞尔维亚', 'Serbia');
INSERT INTO `country` VALUES ('39', '约旦', 'Jordan');
INSERT INTO `country` VALUES ('40', '尼泊尔', 'Nepal');
INSERT INTO `country` VALUES ('41', '巴拿马', 'Panama');
INSERT INTO `country` VALUES ('42', '格鲁吉亚', 'Georgia');
INSERT INTO `country` VALUES ('43', '厄瓜多尔', 'Ecuador');
INSERT INTO `country` VALUES ('44', '阿塞拜疆', 'Azerbaijan');
INSERT INTO `country` VALUES ('45', '日本', 'Japan');
INSERT INTO `country` VALUES ('46', '克罗地亚', 'Croatia');
INSERT INTO `country` VALUES ('47', '阿联酋', 'UAE');
INSERT INTO `country` VALUES ('48', '哈萨克斯坦', 'Kazakhstan');
INSERT INTO `country` VALUES ('49', '保加利亚', 'Bulgaria');
INSERT INTO `country` VALUES ('50', '白俄罗斯', 'Belarus');
INSERT INTO `country` VALUES ('51', '多米尼加', 'Dominican Rep.');
INSERT INTO `country` VALUES ('52', '黎巴嫩', 'Lebanon');
INSERT INTO `country` VALUES ('53', '哥斯达黎加', 'Costa Rica');
INSERT INTO `country` VALUES ('54', '亚美尼亚', 'Armenia');
INSERT INTO `country` VALUES ('55', '斯洛伐克', 'Slovakia');
INSERT INTO `country` VALUES ('56', '玻利维亚', 'Bolivia');
INSERT INTO `country` VALUES ('57', '科威特', 'Kuwait');
INSERT INTO `country` VALUES ('58', '卡塔尔', 'Qatar');
INSERT INTO `country` VALUES ('59', '丹麦', 'Denmark');
INSERT INTO `country` VALUES ('60', '摩尔多瓦', 'Moldova');
INSERT INTO `country` VALUES ('61', '危地马拉', 'Guatemala');
INSERT INTO `country` VALUES ('62', '希腊', 'Greece');
INSERT INTO `country` VALUES ('63', '阿曼', 'Oman');
INSERT INTO `country` VALUES ('64', '埃及', 'Egypt');
INSERT INTO `country` VALUES ('65', '巴勒斯坦', 'Palestine');
INSERT INTO `country` VALUES ('66', '突尼斯', 'Tunisia');
INSERT INTO `country` VALUES ('67', '埃塞俄比亚', 'Ethiopia');
INSERT INTO `country` VALUES ('68', '洪都拉斯', 'Honduras');
INSERT INTO `country` VALUES ('69', '缅甸', 'Myanmar');
INSERT INTO `country` VALUES ('70', '立陶宛', 'Lithuania');
INSERT INTO `country` VALUES ('71', '委内瑞拉', 'Venezuela');
INSERT INTO `country` VALUES ('72', '斯洛文尼亚', 'Slovenia');
INSERT INTO `country` VALUES ('73', '波黑', 'Bosnia and Herz.');
INSERT INTO `country` VALUES ('74', '巴拉圭', 'Paraguay');
INSERT INTO `country` VALUES ('75', '马来西亚', 'Malaysia');
INSERT INTO `country` VALUES ('76', '阿尔及利亚', 'Algeria');
INSERT INTO `country` VALUES ('77', '利比亚', 'Libya');
INSERT INTO `country` VALUES ('78', '肯尼亚', 'Kenya');
INSERT INTO `country` VALUES ('79', '巴林', 'Bahrain');
INSERT INTO `country` VALUES ('80', '爱尔兰', 'Ireland');
INSERT INTO `country` VALUES ('81', '吉尔吉斯斯坦', 'Kyrgyzstan');
INSERT INTO `country` VALUES ('82', '尼日利亚', 'Nigeria');
INSERT INTO `country` VALUES ('83', '北马其顿', 'Macedonia');
INSERT INTO `country` VALUES ('84', '乌兹别克斯坦', 'Uzbekistan');
INSERT INTO `country` VALUES ('85', '新加坡', 'Singapore');
INSERT INTO `country` VALUES ('86', '加纳', 'Ghana');
INSERT INTO `country` VALUES ('87', '阿尔巴尼亚', 'Albania');
INSERT INTO `country` VALUES ('88', '韩国', 'Korea');
INSERT INTO `country` VALUES ('89', '阿富汗', 'Afghanistan');
INSERT INTO `country` VALUES ('90', '黑山', 'Montenegro');
INSERT INTO `country` VALUES ('91', '挪威', 'Norway');
INSERT INTO `country` VALUES ('92', '萨尔瓦多', 'El Salvador');
INSERT INTO `country` VALUES ('93', '卢森堡', 'Luxembourg');
INSERT INTO `country` VALUES ('94', '斯里兰卡', 'Sri Lanka');
INSERT INTO `country` VALUES ('95', '芬兰', 'Finland');
INSERT INTO `country` VALUES ('96', '拉脱维亚', 'Latvia');
INSERT INTO `country` VALUES ('97', '乌干达', 'Uganda');
INSERT INTO `country` VALUES ('98', '澳大利亚', 'Australia');
INSERT INTO `country` VALUES ('99', '喀麦隆', 'Cameroon');
INSERT INTO `country` VALUES ('100', '苏丹', 'Sudan');
INSERT INTO `country` VALUES ('101', '爱沙尼亚', 'Estonia');
INSERT INTO `country` VALUES ('102', '科特迪瓦', 'Côte d\'Ivoire');
INSERT INTO `country` VALUES ('103', '赞比亚', 'Zambia');
INSERT INTO `country` VALUES ('104', '纳米比亚', 'Namibia');
INSERT INTO `country` VALUES ('105', '塞内加尔', 'Senegal');
INSERT INTO `country` VALUES ('106', '塞浦路斯', 'Cyprus');
INSERT INTO `country` VALUES ('107', '马达加斯加', 'Madagascar');
INSERT INTO `country` VALUES ('108', '莫桑比克', 'Mozambique');
INSERT INTO `country` VALUES ('109', '安哥拉', 'Angola');
INSERT INTO `country` VALUES ('110', '刚果（金）', 'Dem. Rep. Congo');
INSERT INTO `country` VALUES ('111', '几内亚', 'Guinea');
INSERT INTO `country` VALUES ('112', '马尔代夫', 'Maldives');
INSERT INTO `country` VALUES ('113', '乌拉圭', 'Uruguay');
INSERT INTO `country` VALUES ('114', '博茨瓦纳', 'Botswana');
INSERT INTO `country` VALUES ('115', '塔吉克斯坦', 'Tajikistan');
INSERT INTO `country` VALUES ('116', '毛里塔尼亚', 'Mauritania');
INSERT INTO `country` VALUES ('117', '津巴布韦', 'Zimbabwe');
INSERT INTO `country` VALUES ('118', '牙买加', 'Jamaica');
INSERT INTO `country` VALUES ('119', '马耳他', 'Malta');
INSERT INTO `country` VALUES ('120', '佛得角', 'Buddha Cape');
INSERT INTO `country` VALUES ('121', '叙利亚', 'Syria');
INSERT INTO `country` VALUES ('122', '古巴', 'Cuba');
INSERT INTO `country` VALUES ('123', '伯利兹', 'Belize');
INSERT INTO `country` VALUES ('124', '海地', 'Haiti');
INSERT INTO `country` VALUES ('125', '加蓬', 'Gabon');
INSERT INTO `country` VALUES ('126', '巴哈马', 'Bahamas');
INSERT INTO `country` VALUES ('127', '安道尔', 'Andorra');
INSERT INTO `country` VALUES ('128', '斯威士兰', 'Swaziland');
INSERT INTO `country` VALUES ('129', '卢旺达', 'Rwanda');
INSERT INTO `country` VALUES ('130', '特立尼达和多巴哥', 'Trinidad and Tobago');
INSERT INTO `country` VALUES ('131', '刚果（布）', 'Congo');
INSERT INTO `country` VALUES ('132', '马里', 'Mali');
INSERT INTO `country` VALUES ('133', '马拉维', 'Malawi');
INSERT INTO `country` VALUES ('134', '圭亚那', 'Guyana');
INSERT INTO `country` VALUES ('135', '尼加拉瓜', 'Nicaragua');
INSERT INTO `country` VALUES ('136', '吉布提', 'Djibouti');
INSERT INTO `country` VALUES ('137', '冰岛', 'Iceland');
INSERT INTO `country` VALUES ('138', '苏里南', 'Suriname');
INSERT INTO `country` VALUES ('139', '泰国', 'Thailand');
INSERT INTO `country` VALUES ('140', '赤道几内亚', 'Eq. Guinea');
INSERT INTO `country` VALUES ('141', '布基纳法索', 'Burkina Faso');
INSERT INTO `country` VALUES ('142', '中非共和国', 'Central African Rep.');
INSERT INTO `country` VALUES ('143', '索马里', 'Somalia');
INSERT INTO `country` VALUES ('144', '冈比亚', 'Gambia');
INSERT INTO `country` VALUES ('145', '多哥', 'Togo');
INSERT INTO `country` VALUES ('146', '贝宁', 'Benin');
INSERT INTO `country` VALUES ('147', '尼日尔', 'Niger');
INSERT INTO `country` VALUES ('148', '莱索托', 'Lesotho');
INSERT INTO `country` VALUES ('149', '塞拉利昂', 'Sierra Leone');
INSERT INTO `country` VALUES ('150', '几内亚比绍', 'Guinea-Bissau');
INSERT INTO `country` VALUES ('151', '圣马力诺', 'San Marino');
INSERT INTO `country` VALUES ('152', '新西兰', 'New Zealand');
INSERT INTO `country` VALUES ('153', '也门', 'Yemen');
INSERT INTO `country` VALUES ('154', '乍得', 'Chad');
INSERT INTO `country` VALUES ('155', '列支敦士登公国', 'Liechtenstein Principality');
INSERT INTO `country` VALUES ('156', '利比里亚', 'Liberia');
INSERT INTO `country` VALUES ('157', '越南', 'Vietnam');
INSERT INTO `country` VALUES ('158', '蒙古', 'Mongolia');
INSERT INTO `country` VALUES ('159', '布隆迪', 'Burundi');
INSERT INTO `country` VALUES ('160', '巴布亚新几内亚', 'Papua New Guinea');
INSERT INTO `country` VALUES ('161', '厄立特里亚', 'Eritrea');
INSERT INTO `country` VALUES ('162', '摩纳哥', 'Monaco');
INSERT INTO `country` VALUES ('163', '钻石号邮轮', 'Diamond Cruises');
INSERT INTO `country` VALUES ('164', '科摩罗', 'Comoros');
INSERT INTO `country` VALUES ('165', '毛里求斯', 'Mauritius');
INSERT INTO `country` VALUES ('166', '坦桑尼亚', 'Tanzania');
INSERT INTO `country` VALUES ('167', '不丹', 'Bhutan');
INSERT INTO `country` VALUES ('168', '柬埔寨', 'Cambodia');
INSERT INTO `country` VALUES ('169', '巴巴多斯', 'Barbados');
INSERT INTO `country` VALUES ('170', '圣卢西亚', 'Saint Lucia');
INSERT INTO `country` VALUES ('171', '塞舌尔', 'Seychelles');
INSERT INTO `country` VALUES ('172', '安提瓜和巴布达', 'Antigua and Barbados Buda');
INSERT INTO `country` VALUES ('173', '文莱', 'Brunei');
INSERT INTO `country` VALUES ('174', '圣文森特和格林纳丁斯', 'Saint Vincent and the Grenadines');
INSERT INTO `country` VALUES ('175', '格林纳达', 'Grenada');
INSERT INTO `country` VALUES ('176', '多米尼克', 'Dominica');
INSERT INTO `country` VALUES ('177', '斐济', 'Fiji');
INSERT INTO `country` VALUES ('178', '老挝', 'Lao PDR');
INSERT INTO `country` VALUES ('179', '马提尼克岛', 'Martinique');
INSERT INTO `country` VALUES ('180', '东帝汶', 'Timor-Leste');
INSERT INTO `country` VALUES ('181', '圣基茨和尼维斯', 'Saint Kitts and Nevis');
INSERT INTO `country` VALUES ('182', '梵蒂冈', 'Vatican City');
INSERT INTO `country` VALUES ('183', '所罗门群岛', 'Solomon Is.');
INSERT INTO `country` VALUES ('184', '马绍尔群岛', 'Marshall Islands');
INSERT INTO `country` VALUES ('185', '瓦努阿图', 'Vanuatu');
INSERT INTO `country` VALUES ('186', '中国', 'China');
INSERT INTO `country` VALUES ('187', '格陵兰岛', 'Greenland');
INSERT INTO `country` VALUES ('188', '朝鲜', 'Dem. Rep. Korea');
INSERT INTO `country` VALUES ('189', '土库曼斯坦', 'Turkmenistan');
INSERT INTO `country` VALUES ('190', '阿拉伯联合酋长国', 'United Arab Emirates');
INSERT INTO `country` VALUES ('191', '南苏丹', 'S. Sudan');
INSERT INTO `country` VALUES ('192', '西撒哈拉', 'W. Sahara');
INSERT INTO `country` VALUES ('193', '新喀里多尼亚', 'New Caledonia');
INSERT INTO `country` VALUES ('194', '福克兰群岛', 'Falkland Is.');
INSERT INTO `country` VALUES ('195', '南乔治亚岛', 'S. Geo. and S. Sandw. Is.');
INSERT INTO `country` VALUES ('196', '波多黎各', 'Puerto Rico');

2.我们将上面国家表的数据作为主表，进行SQL查询，查询对应国家中的节点数量

SELECT c.`name`, c.name_en nameEn, IFNULL(t.nodeNum,0) nodeNum FROM nms_country c
LEFT JOIN (SELECT n.country, COUNT(0) nodeNum FROM nms_node n
GROUP BY n.country) t ON c.`name` = t.country
ORDER BY c.id

3.前端界面我们将世界地图写成组件’GlobalChart.vue’，引入echarts
不过echarts的版本过高的话找不到对应的world.json 文件，所以选用’4.9.0’这个版本的

<template>
  <div id="globalChart" class="chart" />
</template>

<script>
import echarts from 'echarts'
import world from 'echarts/map/json/world.json'
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById('globalChart'))
      this.setOptions(this.chartData)
    },
    setOptions({ globalData } = {}) {
      echarts.registerMap('world', world)
      this.chart.setOption({
        title: {
          text: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          showDelay: 0,
          transitionDuration: 0.2
        },
        visualMap: {
          left: 'right',
          min: 0,
          max: 10,
          inRange: {
            //颜色梯度
            color: [
              '#f9f9fa',
              '#a4daf3',
              '#bbe5f7',
              '#70cef9',
              '#53abd4',
              '#3490d8',
              '#0b72c4',
              '#006897'
            ]
          },
          text: ['High', 'Low'], // 文本，默认为数值文本
          calculable: true
        },
        toolbox: {
          show: true,
          //orient: 'vertical',
          left: 'left',
          top: 'top',
          feature: {
            dataView: { show: false },
            restore: { show: false },
            saveAsImage: {}
          }
        },
        series: [
          {
            name: '节点个数',
            type: 'map',
            roam: true,
            map: 'world',
            emphasis: {
              label: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                label: {
                  show: false
                }
              },
              emphasis: {
                // 地图区域的高亮颜色
                // areaColor: '#ffc107'
              }
            },
            data: globalData
          }
        ]
      })
    }
  }
}
</script>
<style scoped>
.chart {
  height: calc(100vh - 175px);
  width: 100%;
}
</style>

4.在首页使用组件，调用世界地图

<template>
  <div class="app-container home">
    <div style="background-color: #f8f9fa">
      <global-chart :chart-data="chartData" v-loading="isLoading" />
    </div>
  </div>
</template>

<script>

import { selectCountryNodeNum } from '@/api/node/report'
import GlobalChart from '@/views/components/GlobalChart'

export default {
  name: 'index',
  components: { GlobalChart },
  data() {
    return {
      // 节点类别选中的标识
      itemType: '1',
      chartData: {
        globalData: []
      },
      isLoading: false
    }
  },
  created() {
  },
  mounted() {
    this.getWorldChart()
  },
  methods: {
    getWorldChart() {
      this.isLoading = true
      selectCountryNodeNum().then(res => {
        if (res.code === 200) {
          let data = res.data
          data.forEach(item => {
            this.chartData.globalData.push({
              name: item.nameEn,
              value: item.nodeNum
            })
          })
          this.isLoading = false
        }
      })
    }
  }
}
</script>

这样就实现了类似于世界疫情地图的展示了