echarts map 循环展示tooltip

一、最终效果

鼠标未在地图区域时，会循环上海市下所有区，通过tooltip展示区详情（每个区展示两秒）；鼠标位于某区时，tooltip展示该区详情；鼠标移出地图区域时，再开始循环上海市下所有区。

我没有附上CSS代码，所以样式会与图上有所不同

二、数据格式

三、前端代码

<template>
    <chart-map-shanghai ref="chartMap" height="675" :axis="mapAxis"></chart-map-shanghai>
<template>
<script>
import chartMapShanghai from './chart-map-shanghai.vue' //根据自己存放的路径动态更改
export default {
    components: {
        chartMapShanghai
    },
    data () {
        return {
            mapAxis: []
        }
    }
}
</script>复制

<template>
  <div class="chart-box">
    <chart style="height: 100%; width: 100%;" ref="chartShanghai" :options="options" autoresize></chart>
  </div>
</template>
<script>
import Chart from "vue-echarts";
export default {
  components: {
    chart: Chart
  },
  props : {
    axis: {
      type: Array,
      required: true,
      default () {
        return [];
      }
    }
  },
  data() {
    return {
      timer: null,
      index: -1,
      geoCoordMap: {
        '静安区': [121.448224,31.229003],
        '杨浦区': [121.522797, 31.270755],
        '长宁区': [121.4222, 31.218123],
        '虹口区': [121.491832, 31.26097],
        '普陀区': [121.392499, 31.241701],
        '黄浦区': [121.490317,31.222771],
        '徐汇区':[121.43752,31.179973],
        '闵行区': [121.375972, 31.111658],
        '宝山区': [121.489934, 31.398896],
        '嘉定区': [121.250333, 31.383524],
        '浦东新区': [121.567706, 31.245944],
        '金山区': [121.330736, 30.724697],
        '松江区': [121.223543, 31.03047],
        '青浦区': [121.113021, 31.151209],
        '奉贤区': [121.458472, 30.912345],
        '崇明区': [121.397516, 31.626946],
      }
    }
  },
  computed : {
    mapJson() {
      return require(`./310000.json`);
    },
    data () {
      return this.convertData();
    },
    effectScatterData () {
      return this.index===-1?[]:[this.data[this.index]];
    },
    options () {
      return {
        tooltip: {
          backgroundColor: 'rgba(0,0,0,0)',
          trigger: 'item'
        },
        geo: {
          map: 'shanghai',
          aspectScale: 0.85,
          layoutCenter: ["50%", "50%"],
          layoutSize: '100%',
          label: {
              emphasis: {
                  show: false,
              },
          },
          roam: false, //是否允许缩放
          itemStyle: {
            normal: {
                shadowColor: '#1E3A75',
                shadowOffsetX: 0,
                shadowOffsetY: 15,
                opacity: 0.5,
            },
            emphasis: {
                areaColor: '#276fce',
            }
          },
          tooltip: {
              show: true
          }
        },
        series: [
          {
            type: 'map',
            mapType: 'shanghai',
            tooltip: {
              padding: 0,
              enterable: true,
              transitionDuration: 1,
              extraCssText: 'z-index: 2000',
              textStyle: {
                  color: '#000',
                  decoration: 'none',
              },
              className: 'custom-tooltip-box',
              formatter: function(params) {
                let data = Boolean(params.data)?{
                  name: params.data.name,
                  num1: 'num1' in params.data?params.data.num1:'--',
                  num2: 'num2' in params.data?params.data.num2:'--'
                }:{
                  name: params.name,
                  num1: '--',
                  num2: '--'
                };
                return '<div class="custom-tooltip-box">'
                  + '<div class="tooltip_tit">'
                  + '<div class="tit">'+ data.name +'</div>'
                  +  '<div class="line"></div>'
                  + '</div>'
                  + '<div class="tooltip_cont">'
                  +  '<div class="list1">'
                  +    '<div class="text">医保码激活数</div>'
                  +    '<div class="num">'+ data.num1 + '</div>'
                  +  '</div>'
                  +  '<div class="list2">'
                  +    '<div class="text">医保码激活率</div>'
                  +    '<div class="num">'+ data.num2 +'</div>'
                  +  '</div>'
                  + '</div>'
                + '</div>';
              }
            },
            aspectScale: 0.85,
            layoutCenter: ["50%", "50%"], //地图位置
            layoutSize: '100%',
            zoom: 1, //当前视角的缩放比例
            scaleLimit: {
                min: 1,
                max: 2
            },
            itemStyle: {
              normal: {
                  areaColor: '#18418C',
                  borderColor: '#4F9EF0',
                  borderWidth: 1
              },
              emphasis: {
                  areaColor: '#96DAFF',
                  borderColor: '#4F9EF0',
                  borderWidth: 2,
                  label: {
                      color: "#fff"
                  }
              }
            },
            labelLine: {
              show: true
            },
            data: this.data
          },
          {
            type: 'effectScatter',
            left: '10',
            coordinateSystem: 'geo',
            data: this.effectScatterData,
            symbolSize: 15,
            showEffectOn: "render",
            rippleEffect: {
                brushType: "stroke"
            },
            hoverAnimation: true,
            itemStyle: {
                normal: {
                    color: "#FDFF12",
                    shadowBlur: 8,
                    shadowColor: "#9BF9FF"
                }
            },
            tooltip: {
              show: false
            },
            zlevel: 2
          },
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            data: this.data,
            symbolSize: 5,
            emphasis: {
              disabled: true
            },
            lable: {
              normal: {
                show: false
              },
              emphasis: {
                disabled: true,
                show: false
              }
            },
            itemStyle: {
              normal: {
                  color: '#FDFF12',
                  shadowBlur: 8,
                  shadowColor: "#57B7FF"
              }
            },
            tooltip: {
              show: false
            }
          }
        ]
      };
    },
    mapHaveData () {
      return this.data.length>0;
    },
    maxIndex () {
      return this.data.length-1;
    }
  },
  watch: {
    mapHaveData (val, old) { //处理好地图数据后，再init，不然循环展示的tooltip，会一直停留在第一项数据的详情
      val&&!old?this.init():'';
    },
    effectScatterData: {
      handler: function (val) {
        this.$nextTick(() => {
          if(val.length>0) {
            this.$refs.chartShanghai.dispatchAction({
              type: 'downplay',
              seriesIndex: 0
            });
            this.$refs.chartShanghai.chart.setOption(this.options); //一定要在this.$nextTick中setOption，不然地图不会更新，下面高亮区域与展示区域详情也不会生效
            this.$refs.chartShanghai.dispatchAction({ //一定要在setOption后执行才会生效
              type: 'highlight',
              seriesIndex: 0,
              dataIndex: this.index
            });
            this.$refs.chartShanghai.dispatchAction({ //一定要在setOption后执行才会生效
              type: 'showTip',
              seriesIndex: 0,
              dataIndex: this.index
            });
          }
        });
      },
      deep: true
    }
  },
  methods: {
    convertData() {
      let res = [];
      this.axis.forEach(x => {
        this.geoCoordMap[x.name]?res.push({
            name: x.name,
            value: this.geoCoordMap[x.name],
            num1: x.value1,
            num2: x.value2
        }):'';
      })
      return res;
    },
    init() {
      this.mouseEvents()
      this.mapActive()
    },
    mouseEvents() {
      this.$refs.chartShanghai.chart.on("mouseover", params => {
        clearInterval(this.timer)
        this.timer = null
        this.$refs.chartShanghai.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: this.index
        })
      });
      this.$refs.chartShanghai.chart.on("mouseout", params => {
        this.mapActive()
      });
    },
    mapActive() {
      clearInterval(this.timer)
      this.timer = null
      this.timer = setInterval(() => {
        this.index++;
        this.index>this.maxIndex?this.index=0:'';
      }, 2000);
    }
  },
  created() {
    Chart.registerMap('shanghai', this.mapJson);
  },
  destroyed() {
    clearInterval(this.timer);
  }
}
</script>复制

 四、310000.json 资源地址 https://download.csdn.net/download/hrcsdn13/89570096