Echarts世界地图+动态高亮

十分感谢这两位大兄弟，实在是我辈先驱、吾等楷模 juejin.cn/post/684490… blog.csdn.net/mm_hello11/…

1、先引入world.js，我用的是vue，所以在main.js或者index.html里引入均可

2、world.js里的国家对应是英文的，数据库是中文的，用上了中英文对照json(country-name-zh.json)

3、vue文件里是这么个东西↓

<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import nameMap from '@/components/Echarts/MapChartNameMap.json'

export default {
  name: 'Chart5',
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null,
      data: [
        { name: '中国', value: 228 },
        { name: '日本', value: 5 },
        { name: '泰国', value: 3 },
        { name: '菲律宾', value: 2 },
        { name: '马来西亚', value: 2 },
        { name: '印尼', value: 2 },
        { name: '印度', value: 4 },
        { name: '科威特', value: 1 },
        { name: '迪拜', value: 2 },
        { name: '挪威', value: 1 },
        { name: '丹麦', value: 3 },
        { name: '瑞典', value: 1 },
        { name: '芬兰', value: 1 },
        { name: '俄罗斯', value: 2 },
        { name: '波兰', value: 1 },
        { name: '德国', value: 17 },
        { name: '英国', value: 18 },
        { name: '法国', value: 11 },
        { name: '塞浦路斯', value: 3 },
        { name: '荷兰', value: 5 },
        { name: '波兰', value: 1 },
        { name: '爱尔兰', value: 1 },
        { name: '意大利', value: 6 },
        { name: '西班牙', value: 3 },
        { name: '斯洛文尼亚', value: 1 },
        { name: '澳大利亚', value: 6 },
        { name: '新西兰', value: 4 },
        { name: '加拿大', value: 5 },
        { name: '美国', value: 39 }
      ],
      timer: null,
      lightIndex: 0
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
    this.clearTimer()
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        visualMap: { // 有它才有颜色呢
          min: 0,
          max: 250,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          color: ['#3fb4df', '#344368'], // 自定义不同数值的颜色，可多项
          show: false  //需要颜色，又不需要显示这个色值的轴
        },
        grid: {
          left: '0%',
          right: '0%',
          bottom: '0%',
          containLabel: true
        },
        series: [
          {
            name: 'World Population (2010)',
            type: 'map',
            center: [20.97, 29.71],  //地图中心点
            aspectScale: 0.7, //地图长宽比（变形）
            zoom: 1.5, //地图放大缩小，默认是展示全部
            mapType: 'world',
            nameMap: nameMap, // 中英文对照json
            roam: true,
            itemStyle: {
              areaColor: '#242f47'   //没有值的国家的默认底色
            },
            emphasis: {
              itemStyle: { areaColor: '#22bdbd' },  //高亮国家底色
              label: { color: '#fff' }  //高亮国家名颜色
            },
            data: this.data
          }
        ]
      })
      this.$nextTick(res => {
        this.setTimer()
      })
    },
    /* 
    动态高亮（逐渐点亮）
        除了高亮api，里还提供了很多其他的类型，建议到echarts里头看看：https://echarts.apache.org/zh/api.html#action.highlight
    */
    setTimer() {
      this.timer = setInterval(() => {
        if (this.lightIndex == this.data.length) {
          this.data.forEach((item, index) => {
          // 这个是去除高亮
            this.chart.dispatchAction({
              type: 'downplay', // 提示框
              seriesIndex: 0,
              dataIndex: index // 第index项数据去除高亮
            })
          })
          this.lightIndex = 0
        } else {
          // 这个是高亮
          this.chart.dispatchAction({
            type: 'highlight', // 提示框
            seriesIndex: 0,
            dataIndex: this.lightIndex // 第lightIndex数据高亮
          })
          this.lightIndex++
        }
      }, 2000)
    },
    clearTimer() {
      this.timer ? clearInterval(this.timer) : ''
    }
  }
}
</script>

ps：本文只是为了方便自己以后更好复制黏贴，能帮到大家更好咯