echarts地图设置文字背景框和icon，市级地图块轮播高亮并显示弹窗，鼠标移入停止轮播，鼠标移出继续轮播高亮

 这里用的echarts版本是5.3.2，以福建省的的地图为例，页面进入时地图块开始轮播高亮，鼠标移入地图块停止轮播，鼠标移出地图块继续轮播高亮

实现效果：

实现代码如下：

<template>
  <div id="map-chart" ref="mapInfo"></div>
</template>复制

<script>
import mapJson from "../data/fujian.json";
import * as echarts from "echarts";
 
export default {
  data() {
    return {
      icon: require("@/assets/img/analyzeData/icon.png"),
      mapname_bg: require("@/assets/img/analyzeData/mapname_bg.png"),
      mapDate: [
        {
          name: "福州市",
          value: [119.4, 26],
          year: "2022年",
          residentPopulation: 123,
          residencePopulation: 15,
        },
        {
          // name: "平潭综合试验区",
          name: "平潭县",
          value: [119.84, 25.67],
          year: "2022年",
          residentPopulation: 123,
          residencePopulation: 15,
        },
        {
          name: "厦门市",
          value: [118.18, 24.45],
          year: "2022年",
          residentPopulation: 123,
          residencePopulation: 15,
        },
        {
          name: "莆田市",
          value: [119, 25.34],
          year: "2022年",
          residentPopulation: 123,
          residencePopulation: 15,
        },
        {
          name: "三明市",
          value: [117.61, 26.23],
          year: "2022年",
          residentPopulation: 123,
          residencePopulation: 15,
        },
        {
          name: "泉州市",
          value: [118.2, 25.13],
          year: "2022年",
          residentPopulation: 123,
          residencePopulation: 15,
        },
        {
          name: "漳州市",
          value: [117.58, 24.22],
          year: "2022年",
          residentPopulation: 123,
          residencePopulation: 15,
        },
        {
          name: "南平市",
          value: [118.16, 27.4],
          year: "2022年",
          residentPopulation: 123,
          residencePopulation: 15,
        },
        {
          name: "龙岩市",
          value: [116.51, 25.12],
          year: "2022年",
          residentPopulation: 123,
          residencePopulation: 15,
        },
        {
          name: "宁德市",
          value: [119.72, 26.95],
          year: "2022年",
          residentPopulation: 123,
          residencePopulation: 15,
        },
      ],
      cartoonIndex: 0,
      curHoverIndex: null,
      curSelectName: "",
      hoverTimer: null,
    };
  },
  watch: {
    // 这里是记录轮播到的index,可以传给父元素去进行别的操作，不需要的可以忽略
    curHoverIndex() {
      if (this.curHoverIndex !== -1) {
        let info = {
          name: this.mapDate[this.curHoverIndex].name,
        };
        this.$emit("hoverIndexChange", info);
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    init() {
      let _this = this;
      echarts.registerMap("fujian", mapJson);
      let dom = document.getElementById("map-chart");
      let myChart = echarts.init(dom);
      let option = {
        title: {
          top: 20,
          text: "",
          subtext: "",
          x: "center",
          textStyle: {
            color: "#ccc",
          },
        },
        tooltip: {
          backgroundColor: "rgba(0,0,0,.8)",
          top: "-500px",
          trigger: "item",
          textStyle: {
            fontSize: 16,
            color: "#fff",
            fontWeight: 500,
          },
          formatter: function (params) {
            let data = _this.mapDate[params.dataIndex];
            return `<span style="margin-bottom: 10px">${params.marker} ${params.name}</span><br/>
            <span style="margin-bottom: 5px">统计范围： ${data.year}</span><br/>
            <span style="margin-bottom: 5px">年末常驻总人口（万人）： ${data.residentPopulation}</span><br/>
            <span>年末户籍总人口： ${data.residencePopulation}</span>`;
          },
          z: 9999,
        },
        visualMap: {
          show: false,
          min: 0,
          max: 1000000,
          right: 100,
          seriesIndex: 1,
          type: "piecewise",
          bottom: 100,
          textStyle: {
            color: "#FFFF",
          },
        },
        geo: [
          // 地图最外城边框
          {
            map: "fujian",
            aspectScale: 0.75,
            zoom: 0.81,
            layoutCenter: ["50%", "50%"],
            layoutSize: "120%",
            show: true,
            roam: false,
            label: {
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                borderColor: "rgba(192,245,249,.8)",
                borderWidth: 1,
                shadowColor: "#6FFDFF",
                shadowOffsetY: 0,
                shadowBlur: 10,
                areaColor: "rgba(29,85,139,.6)",
              },
            },
            emphasis: {
              areaColor: "rgba(29,85,139,.6)",
            },
          },
          // 地图最外层光晕
          {
            map: "fujian",
            aspectScale: 0.75,
            zoom: 0.81,
            layoutCenter: ["50%", "50%"],
            layoutSize: "120%",
            show: true,
            roam: false,
            label: {
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                borderColor: "rgba(192,245,249,.8)",
                borderWidth: 3,
                shadowColor: "#2C99F6",
                shadowOffsetY: 0,
                shadowBlur: 100,
                areaColor: "rgba(29,85,139,.6)",
              },
            },
            emphasis: {
              areaColor: "rgba(29,85,139,.6)",
            },
          },
        ],
        series: [
          {
            type: "map",
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
                // rotate: "50",
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
            },
        //地图块渐变颜色设置
            itemStyle: {
              normal: {
                areaColor: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#00b1fe", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      // color: "#084284", // 100% 处的颜色
                      color: "#0344cf", // 100% 处的颜色
                    },
                  ],
                },
                borderColor: "#06b2ef",
                borderWidth: 1,
              },
              emphasis: {
                areaColor: "#01aefb",
                borderColor: "#fff",
                borderWidth: 1,
                shadowColor: "rgba(0, 255, 255, 0.7)",
                shadowBlur: 10,
                label: {
                  show: false,
                },
              },
            },
              // 设置鼠标点击后地图块被选中的样式,因为项目原因不需要这个所以在下面的代码我把选中效果去掉了，这里只是为了覆盖原有的选中样式
            select: {
              // 点击后鼠标离开样式
              label: {
                show: false,
                color: "rgba(255, 246, 0, 1)", // 子区域字体颜色
              },
              itemStyle: {
                areaColor: "#01aefb",
                borderColor: "#fff",
              },
            },
            zoom: 1.2,
            roam: false,
            map: "fujian", //使用
          },
          {
            type: "scatter",
            coordinateSystem: "geo",
            itemStyle: {
              color: "#f00",
            },
            symbol: function () {
              let iconImg = "image:/" + _this.icon;
              return iconImg;
            },
            // symbolRotate: 50,
            symbolSize: [35, 30],
            // symbolOffset: [0, -20],
            z: 9999,
            data: this.mapDate,
          },
          {
            type: "scatter",
            coordinateSystem: "geo",
            //地图文字设置
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  var name = params.name;
                  // var value = params.data.datas;
                  // var text = `{fline|${value}}\n{tline|${name}}`;
                  var text = `{fline|${name}}`;
                  return text;
                },
                color: "#fff",
                // rotate: 50,
                rich: {
                  fline: {
                    padding: [8, 0, 0, 0],
                    color: "#fff",
                    textShadowColor: "#030615",
                    // textShadowBlur: "100",
                    textShadowOffsetX: 1,
                    textShadowOffsetY: 1,
                    fontSize: 16,
                    fontWeight: 550,
                  },
                },
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              color: "#00FFF6",
            },
            // 地图文字背景框设置
            symbol: "image:/" + this.mapname_bg,
            // symbolRotate: 50,
            symbolSize: [80, 30],
            symbolOffset: [0, -28],
            z: 999,
            data: this.mapDate,
          },
        ],
      };
      myChart.setOption(option);
      this.cartoonIndex = -1;
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      this.mapSet(myChart, true);
      this.initTimer(myChart);
 
      myChart.on("mousemove", function (e) {
        clearInterval(_this.hoverTimer);
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
        });
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: e.dataIndex,
        });
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: e.dataIndex,
        });
      }); //鼠标移入静止播放
      myChart.on("mouseout", function (e) {
        clearInterval(_this.hoverTimer);
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: e.dataIndex,
        }); //鼠标移出后先把上次的高亮取消
        // 把点击过的选中样式去掉
        if (this.curSelectName) {
          myChart.clear();
          myChart.setOption(option);
        }
        _this.initTimer(myChart);
      });
      myChart.on("click", function (e) {
        this.curSelectName = e.name;
        let index = _this.mapDate.findIndex((item) => item.name === e.name);
        _this.curHoverIndex = index;
      });
    },
    // 地图定时轮播动画
    initTimer(myChart) {
      this.hoverTimer = setInterval(() => {
        this.mapSet(myChart);
        this.cartoonIndex++;
        if (this.cartoonIndex >= this.mapDate.length) {
          this.cartoonIndex = -1;
        }
        this.curHoverIndex = this.cartoonIndex;
      }, 5000);
    },
    mapSet(myChart, isfirst) {
      // 隐藏提示框
      myChart.dispatchAction({
        type: "hideTip",
        seriesIndex: 0,
        dataIndex: this.cartoonIndex,
      });
      // 显示提示框
      myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: this.cartoonIndex + 1,
      });
      // 取消高亮指定的数据图形
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
        dataIndex: this.cartoonIndex,
      });
      // 高亮指定的数据图形
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: this.cartoonIndex + 1,
      });
      if (isfirst) {
        this.cartoonIndex++;
        this.curHoverIndex = this.cartoonIndex;
      }
    },
  },
};
</script>复制

<style>
#map-chart {
  width: 550px;
  height: 500px;
}
</style>复制