echarts v5. 世界地图，中国地图，设置区块点击后颜色不改变

map-world.vue

<template>
  <div>
    <div v-show="data && data.length !== 0" :id="id" :style="{ height }"></div>
    <div v-if="!data || data.length === 0" class="holder" :style="{ height }">
      <img src="@/assets/ec-view/pitera4.svg" style="width: 55px" />
      <a>{{ $t('暂无数据') }}</a>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { on, off, deepCopy, roundHandle } from '@/lib/tools'
import { mixin } from '@/mixins/chart'
import chinaJsonData from '@/assets/china.json' // 中地图
import worldJsonData from '@/assets/world.json' // 世界地图
import { worldData, worldDataZH } from './assist'
const MAPJSON = {
  北京: { name: '北京', value: 0 },
  上海: { name: '上海', value: 0 },
  天津: { name: '天津', value: 0 },
  重庆: { name: '重庆', value: 0 },
  黑龙江: { name: '黑龙江', value: 0 },
  吉林: { name: '吉林', value: 0 },
  辽宁: { name: '辽宁', value: 0 },
  江苏: { name: '江苏', value: 0 },
  山东: { name: '山东', value: 0 },
  安徽: { name: '安徽', value: 0 },
  河北: { name: '河北', value: 0 },
  河南: { name: '河南', value: 0 },
  湖北: { name: '湖北', value: 0 },
  湖南: { name: '湖南', value: 0 },
  江西: { name: '江西', value: 0 },
  陕西: { name: '陕西', value: 0 },
  山西: { name: '山西', value: 0 },
  四川: { name: '四川', value: 0 },
  青海: { name: '青海', value: 0 },
  海南: { name: '海南', value: 0 },
  广东: { name: '广东', value: 0 },
  贵州: { name: '贵州', value: 0 },
  浙江: { name: '浙江', value: 0 },
  福建: { name: '福建', value: 0 },
  台湾: { name: '台湾', value: 0 },
  甘肃: { name: '甘肃', value: 0 },
  云南: { name: '云南', value: 0 },
  内蒙古: { name: '内蒙古', value: 0 },
  宁夏: { name: '宁夏', value: 0 },
  新疆: { name: '新疆', value: 0 },
  西藏: { name: '西藏', value: 0 },
  广西: { name: '广西', value: 0 },
  香港: { name: '香港', value: 0 },
  澳门: { name: '澳门', value: 0 },
  南海诸岛: { name: '南海诸岛', value: 0 },
}
export default {
  mixins: [mixin],
  props: {
    id: {
      type: String,
    },
    currentTab2: { // 数据类型
      type: String,
      required: '',
    },
    regionType: { // 地图类型
      type: Number,
      required: null,
    },
    name: { // 图表名称
      type: String,
      default: '数据详情',
    },
    data: { // 图表数据
      type: Array,
      default() {
        return []
      },
    },
    height: { // 图表高度
      type: String,
      default: '330px',
    },
    colors: { // 图表颜色
      type: Array,
      default() {
        return ['#FFDBB2', '#C96F03']
      },
    },
  },
  data() {
    return {
      chartMap: null,
      pieOption: {},
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.data && this.data.length > 0) this.init()
    })
  },
  beforeDestroy() {
    off(window, 'resize', this.resize)
  },
  watch: {
    data() {
      this.init()
    },
    regionType(data) {
      this.init()
    },
    height() {
      this.$nextTick(() => {
        this.resize()
      })
    },
  },
  methods: {
    // 数据还原样式还原
    restoreClear() {
      if (!this.chartMap) {
        return
      }
      this.chartMap.clear()
      this.chartMap.setOption(this.pieOption) // 获取echarts数据的方法
    },
    resize() {
      if (this.chartMap) {
        this.chartMap.resize()
      }
    },
    // 整数 四舍五入  数字逗号隔开
    toRoundHandle(params) {
      return roundHandle(params)
    },
    init() {
      echarts.registerMap(
        'world',
        +this.regionType === 1 ? worldJsonData : chinaJsonData
      )
      if (!document.getElementById(this.id)) {
        return
      }
      this.chartMap = echarts.init(document.getElementById(this.id))
      on(window, 'resize', this.resize)
      this.intersectionObserver()
      this.setOption()
    },
    setOption() {
      let data = []
      if (+this.regionType === 1) {
        let arr = this.data
        data = arr
      } else {
        this.data.forEach((item) => {
          if (item.name === '中国') {
            let list = item.child
            let arr = []
            if (this.currentTab2) {
              list.map((i) => {
                if (this.currentTab2 === '1') {
                  let obj = {
                    value: i.goodsCount,
                    name: i.name,
                    child: i.child,
                  }
                  arr.push(obj)
                } else if (this.currentTab2 === '3') {
                  let obj = {
                    value: i.saleCount,
                    name: i.name,
                    child: i.child,
                  }
                  arr.push(obj)
                }
                if (this.currentTab2 === '4') {
                  let obj = {
                    value: i.sales,
                    name: i.name,
                    child: i.child,
                  }
                  arr.push(obj)
                }
              })
              data = arr
            } else {
              data = list
            }
          }
        })
      }
      let mapData = []
      if (+this.regionType === 2) {
        mapData = deepCopy(MAPJSON)
        data.forEach((e) => {
          let obj = e.name.replace('省', '').replace('市', '')
          if (e.name && e.value && mapData[obj]) {
            mapData[obj].value = e.value
          }
        })
        data = Object.values(mapData)
      }
      let min, max
      if (data.length > 0) {
        let arrNum = data.map((item) => {
          return Number(item.value)
        })
        min = Math.min.apply(null, arrNum) || 1
        max = Math.max.apply(null, arrNum) || 1000
      } else {
        min = 1
        max = 1000
      }
      let _this = this
      this.pieOption = {
        visualMap: {
          orient: 'horizontal',
          itemWidth: 9,
          itemHeight: 55,
          text: [_this.$t('高'), _this.$t('低')],
          showLabel: true,
          min: min,
          max: max,
          inRange: {
            color: this.colors,
          },
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 32,
          top: 20,
          containLabel: true,
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(50, 50, 50, 0.7)',
          borderWidth: 0,
          textStyle: {
            color: '#fff',
          },
          formatter: function (prams) {
            if (prams.data) {
              let enName = prams.data.enName
                ? prams.data.enName
                : _this.$t(prams.data.name)
              let showHtm =
                prams.marker +
                enName +
                ':' +
                _this.toRoundHandle(prams.data.value)
              return prams.seriesName + '<br>' + showHtm
            } else {
              let arr = worldDataZH()
              let enName = arr[prams.name]
              if (enName) {
                let showHtm = '<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:rgba(255,219,178,1);\"></span>' + enName + ':' + 0
                return prams.seriesName + '<br>' + showHtm
              }
            }
          },
        },
        geo: {
          roam: true,
          map: 'world',
          label: {
            show: false,
            emphasis: { show: false },
          },
          itemStyle: {
            // 地图样式
            borderColor: '#fff', // 图形的描边颜色
            borderWidth: 0.5, // 描边线宽。为 0 时无描边。
            borderType: 'solid', // 柱条的描边类型，默认
            normal: {
              // 默认地图区域样式
              borderColor: '#fff',
              areaColor: _this.colors[0],
            },
            emphasis: {
              // 鼠标移入时显示的默认样式
              areaColor: _this.colors[_this.colors.length - 1],
            },
          },
          select: {
            // 地图选中区域样式
            label: {
              show: false,
            },
            itemStyle: {
              color: null, // 设置地图点击后的颜色
            },
          },
          nameMap: +this.regionType === 1 ? worldData() : null,
          data: data,
        },
        series: [
          {
            type: 'map',
            name: _this.$t(_this.name),
            map: 'world',
            geoIndex: 0,
            zoom: 1.2,
            roam: false,
            animation: false,
            colorBy: 'data',
            nameMap: +this.regionType === 1 ? worldData() : null,
            data: data,
          },
        ],
      }
      this.chartMap.setOption(_this.pieOption, true)

      // this.chartMap.on('click', (params) => { // 图表点击
      //   if (params.name === '中国') {
      //     this.$emit('regionTypeTransmit', 2)
      //   }
      // })
    },
  },
}
</script>
<style scoped lang="scss">
.holder {
  text-align: center;
  color: #666;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  a {
    margin-top: 5px;
  }
}
</style>

assist.js

let geoCoordMap = {
  北京: [116.405285, 39.904989],
  上海: [121.472644, 31.231706],
  天津: [117.190182, 39.125596],
  重庆: [106.551643, 29.562849],
  黑龙江: [126.642464, 45.756967],
  吉林: [125.3245, 43.886841],
  辽宁: [123.429096, 41.796767],
  江苏: [118.767413, 32.041544],
  山东: [117.000923, 36.675807],
  安徽: [117.283042, 31.86119],
  河北: [114.502461, 38.045474],
  河南: [113.665412, 34.757975],
  湖北: [114.298572, 30.584355],
  湖南: [112.982279, 28.19409],
  江西: [115.892151, 28.676493],
  陕西: [108.948024, 34.263161],
  山西: [112.549248, 37.857014],
  四川: [104.075809, 30.651239],
  青海: [101.778916, 36.623178],
  海南: [110.33119, 20.031971],
  广东: [113.26641, 23.132324],
  贵州: [106.713478, 26.578343],
  浙江: [120.153576, 30.287459],
  福建: [119.295143, 26.100779],
  台湾: [121.509062, 25.044332],
  甘肃: [103.826447, 36.05956],
  云南: [102.712251, 25.040609],
  内蒙: [111.670801, 40.818311],
  宁夏: [106.278179, 38.46637],
  新疆: [87.627704, 43.793026],
  西藏: [91.117525, 29.647535],
  广西: [108.327546, 22.815478],
  香港: [114.173355, 22.320048],
  澳门: [113.54909, 22.198951]
}
export function convertData(data) {
  let res = []
  for (var i = 0; i < data.length; i++) {
    let obj = data[i].name ? data[i].name.trim() : ''
    let text = obj && obj.substring(0, 2)
    var geoCoord = text && geoCoordMap[text]
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value),
        standardValue: geoCoord.concat(data[i].standardValue)
      })
    }
  }
  return res
}

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

export function worldData() {
  return nameMap
}
export function worldDataZH() {
  let obj = nameMap
  let objNew = {}
  for(let i in obj){
    objNew[obj[i]] = i
  }
  return objNew
}