使用echart地图+散点轮播 （vue实现）

• 获取json格式的地图数据

http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

<template>
  <!-- 设置一个地图  + scatter轮播 -->
  <div class="box flex-center">
    <div class="content" ref="chart"></div>
  </div>
</template>

<script>
import mapJson from "@/assets/json/hubei.json";
import { debounce } from "lodash"; //js工具类,按需加载
export default {
  data() {
    return {
      timeTicket: null,
      count: 0,
      len: 0, // 轮播数组的长度， 通过 count % len 可以得到[0, len-1] 数组下标
    };
  },
  beforeDestroy() {
    clearTimeout(this.timeTicket);
    window.removeEventListener("resize", this.resize);
  },

  mounted() {
    this.initChart(); // 初始化
    this.updateChart(); // 更新数据，散点轮播显示
    this.mouseMove(); // 鼠标移入移出效果
    window.addEventListener("resize", debounce(this.resize, 2000)); // 使用事件捕获，由外层向内
  },
  methods: {
    initChart() {
      this.$echarts.registerMap("HUMAP", mapJson); // 注册map
      this.myChart = this.$echarts.init(this.$refs.chart); // echarts容器实例化

      let initOption = {
        // 提示框
        tooltip: {
          formatter: "{a}<br/>{b}<br/>{c}",
          position: "top",
        },
        visualMap: {
          type: "continuous",
          showLabel: true,
          left: "10",
          min: 0,
          inRange: {
            color: ["#0B3B79", "#146fd7"],
          },
        },
        // 设置geo坐标系
        geo: {
          map: "HUMAP",
          itemStyle: {
            borderColor: "#2FB5FA",
            borderWidth: 2,
            shadowColor: "#01273F",
            shadowOffsetX: 0,
            shadowOffsetY: 10,
          },
          emphasis: {
            areaColor: "#2C7FD6",
          },
          label: {
            show: false,
            fontSize: 0,
          },
        },
        series: [
          // series[0] 为地图坐标系
          {
            type: "map",
            map: "HUMAP",
            roam: false,
            // geoIndex: 0,  geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。
            data: null,
            label: {
              show: false,
              fontSize: 0,
            },
          },
          // series[1] 为散点图， 需要轮播高亮显示
          {
            name: "light",
            type: "effectScatter",
            coordinateSystem: "geo", // 注意坐标系的设置
            data: null,
            symbolSize: [8, 4],
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
              color: "#0efacc",
              period: 9,
              scale: 5,
            },
            label: {
              show: true,
              color: "#FFF",
              formatter: "{b}",
              offset: [0, -12],
            },
            emphasis: {
              // 设置高亮显示的状态
              scale: 8,
              itemStyle: {
                color: "pink",
              },
            },
          },
        ],
      };

      this.myChart.setOption(initOption);
    },
    updateChart() {
      // 地图数据
      let mapData = mapJson.features.map((item) => {
        return {
          name: item.properties.name,
          value: Math.round(Math.random() * 100),
          centroid: item.properties.centroid,
          adcode: item.properties.adcode,
        };
      });

      // 散点数据
      let scatterData = mapData.map((item) => {
        return {
          name: item.name,
          value: item.centroid
            ? item.centroid.concat(item.value)
            : item.centroid, // [经, 纬度, 值]
          itemStyle: {
            color: "red",
          },
          // adcode: item.adcode,
        };
      });

      let updateOption = {
        series: [
          {
            data: mapData, // type: 'map'
          },
          {
            data: scatterData, // type: 'effectScatter'
          },
        ],
      };

      this.len = updateOption.series[1].data.length; //此处设置的是需要轮播的次数
      this.myChart.setOption(updateOption);
      this.autohover();
    },
    mouseMove() {
      // 当鼠标移入，终止轮播，高亮显示当前区域
      this.myChart.on("mouseover", (params) => {
        clearInterval(this.timeTicket);
        this.myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 1,
        });
        this.myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 1,
          dataIndex: params.dataIndex,
        });
        this.myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 1,
          dataIndex: params.dataIndex,
        });
      });
      // 当鼠标移出，轮播继续开始
      this.myChart.on("mouseout", this.autohover);
    },
    autohover() {
      clearInterval(this.timeTicket);
      this.timeTicket = setInterval(() => {
        // 1. 取消上次的高亮
        this.myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 1,
        });
        // 2. 显示当前高亮
        this.myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 1,
          dataIndex: this.count % this.len,
        });
        // 3. 显示提示框中的信息
        this.myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 1,
          dataIndex: this.count % this.len,
        });
        this.count++;
      }, 2000);
    },
    resize() {
      this.myChart.resize();
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  height: 100vh;
  .content {
    width: 800px;
    height: 600px;
    border: 1px solid red;
  }
}
</style>