echares地图单独省份实现，以及tooltip自定义提示框，散点标注，散点发光实现详解

echares地图单独省份实现，以及tooltip自定义提示框，散点标注，散点发光实现详解

需求，实现一个省地图，提示框自定义样式，鼠标经过高亮显示，离开，自动轮播各个区域的信息。在每个区域标注散点，带有发光动画效果。

各种依赖安装，配置略过，当你项目能正常跑起一个简单的demo，那请继续看

1. 获取对应省份的json数据，前面有一篇文章提到过；
2. 有简易的UI设计图，看上去会更高端大气

先看看效果图吧，没效果看代码过于单调。

echares大屏

看到这里，也许你需要的效果就是这个，不防反手点个赞，这就是持续更新的动力

代码实现

<template>
  <div class="home">
       <div id="myChart8" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import yunnan from "@/assets/json/yunnan.json";
export default {
  data() {
    return {
    //假数据，真实项目可以根据接口获取
      mapdata: [
        {
          name: "昆明",
          num: "23617",
          money: "2121",
          zc: "24",
          bz: "95",
          value: 9,
        },
        {
          name: "曲靖",
          num: "75675",
          money: "345",
          zc: "77",
          bz: "41",
          value: 9,
        },
        {
          name: "玉溪",
          num: "78978",
          money: "89",
          zc: "75",
          bz: "25",
          value: 9,
        },
        {
          name: "保山",
          num: "78978",
          money: "789",
          zc: "75",
          bz: "35",
          value: 9,
        },
        {
          name: "昭通",
          num: "2323",
          money: "345",
          zc: "75",
          bz: "42",
          value: 9,
        },
        {
          name: "丽江",
          num: "346565",
          money: "435",
          zc: "75",
          bz: "75",
          value: 9,
        },
        {
          name: "普洱",
          num: "23545",
          money: "8768",
          zc: "75",
          bz: "75",
          value: 9,
        },
        {
          name: "临沧",
          num: "6774",
          money: "566",
          zc: "42",
          bz: "45",
          value: 9,
        },
        {
          name: "楚雄",
          num: "56565",
          money: "234",
          zc: "63",
          bz: "42",
          value: 9,
        },
        {
          name: "红河",
          num: "454",
          money: "5656",
          zc: "53",
          bz: "75",
          value: 9,
        },
        {
          name: "文山",
          num: "23423",
          money: "234",
          zc: "42",
          bz: "25",
          value: 9,
        },
        {
          name: "西双版纳",
          num: "55234",
          money: "2121",
          zc: "42",
          bz: "95",
          value: 9,
        },
        {
          name: "大理",
          num: "234234",
          money: "345",
          zc: "35",
          bz: "95",
          value: 9,
        },
        {
          name: "德宏",
          num: "3242",
          money: "234",
          zc: "75",
          bz: "75",
          value: 9,
        },
        {
          name: "怒江",
          num: "2131",
          money: "234",
          zc: "75",
          bz: "84",
          value: 9,
        },
        { name: "迪庆", num: "434", money: "56", zc: "75", bz: "77", value: 9 },
      ],
      fhourTime8: {},
    };
  },
  mounted() {
    this.paintingMap();
  },
  methods: {
    convertData(data) {
      var geoCoordMap = {
        昆明: [102.923533, 25.652885],
        曲靖: [103.763917, 26.164766],
        玉溪: [102.105698, 24.233083],
        保山: [98.876533, 24.817807],
        昭通: [103.710287, 27.757374],
        丽江: [100.801628, 26.932054],
        普洱: [101.036958, 23.317995],
        临沧: [99.63896, 23.56149],
        楚雄: [101.5657, 25.578994],
        红河: [103.044652, 23.094498],
        文山: [104.2029, 23.690647],
        西双版纳: [100.799993, 22.325008],
        大理: [100.064164, 25.911234],
        德宏: [98.18834, 24.327689],
        怒江: [98.905835, 26.249883],
        迪庆: [99.834288, 28.107734],
      };
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            //创建对象数组，
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
            num: data[i].num,
            money: data[i].money,
            zc: data[i].zc,
            bz: data[i].bz,
          });
        }
      }
      return res;
    },

    paintingMap() {
      let symbolImg = "image://" + require("@/assets/marks.png");
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart8"));
      var that = this;
      window.addEventListener("resize", function () {
        that.myChart.resize();
      });
      echarts.registerMap("yunnan", yunnan);
      //防止重复点击
      myChart.off("click");
      // 绘制图表
      myChart.setOption({
        layoutCenter: ["50%", "50%"], //位置
        layoutSize: "96%", //大小
        title: {
          //这里是标题
          top: "1%",
          left: "center", //标题居中显示
          textStyle: {
            //标题的样式
            fontSize: 20,
            fontWeight: 600,
            color: "#222",
          },
        },

        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,0.4)", // 提示框浮层的背景颜色。
          axisPointer: {
            // 坐标轴指示器配置项。
            type: "shadow", // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
            axis: "auto", // 指示器的坐标轴。
            snap: true, // 坐标轴指示器是否自动吸附到点上
          },
          textStyle: {
            // 提示框浮层的文本样式。
            color: "#41feff",
            fontStyle: "normal",
            fontWeight: "normal",
            fontFamily: "sans-serif",
            fontSize: 14,
          },
          padding: 0, // 提示框浮层内边距，
          formatter: function (params) {
            let showname = params;
            return `
                <div style='width:150px;height:180px ;'>
                      <p  style="width:100%;height:30px; background: linear-gradient(#2eaaab, #146797); text-indent: 10px;line-height: 30px;">${showname.data.name}</p>
                      <p  style="line-height:40px; text-indent: 10px;">补助人数:${showname.data.num}人</p>
                      <p style="line-height: 30px; text-indent: 10px;">补助金额:${showname.data.money}万元</p>
                      <p style="line-height: 30px; text-indent: 10px;" >支出比例:${showname.data.zc}%</p>
                      <p style="line-height: 40px; text-indent: 10px;">补助发生率:${showname.data.bz}%</p> 
                  
              </div>
              `;
          },
          position: ["75%", "20%"],
        },

        geo: {
          show: true,
          roam: true, //地图缩放、平移
          map: "yunnan",
          label: {
            normal: {
              show: true, //显示省份标签
              textStyle: { color: "#fff" }, //省份标签字体颜色
            },
            emphasis: {
              //对应的鼠标悬浮效果
              show: true,
              textStyle: { color: "#70ccef" },
            },
          },
          itemStyle: {
            normal: {
              borderWidth: 2.5, //区域边框宽度
              borderColor: "#2595cf", //区域边框颜色
              areaColor: "#085891", //区域颜色
              label: { show: true },
              shadowColor: "rgba(63, 218, 255, 0.5)",
              shadowBlur: 10,
            },

            emphasis: {
              borderWidth: 2, //鼠标滑过区域，区域边框宽度
              borderColor: "#2595cf", //鼠标滑过区域，区域边框颜色
              areaColor: "#053d65", //鼠标滑过区域背景色
              label: { show: true },
            },
          },
        },

        series: [
          {
            show: true,
            type: "map",
            map: "yunnan",
            roam: true, //是否开启鼠标缩放和平移漫游
            geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
            aspectScale: 0.95, // 长宽比
            data: that.convertData(that.mapdata),
          },
          {
            type: "effectScatter", //呼吸灯type 必须是effectScatter 不然不会有呼吸效果就是一个静态图片（研究了好久）
            coordinateSystem: "geo",
            data: that.convertData(that.mapdata),
            symbolSize: 15,
            symbol: symbolImg,
            label: {
              normal: {
                formatter: "",
                position: "right",
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: "",
              },
            },
          },
        ],
      });

      //默认显示第一个
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0,
      });
      //显示第一提示框
      myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: 0,
      });
      var hourIndex = 0;
      this.fhourTime8 = setInterval(() => {
        //取消默认高亮
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
        });
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: hourIndex,
        });
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: hourIndex,
        });
        hourIndex++;
        if (hourIndex > this.mapdata.length) {
          hourIndex = 0;
        }
      }, 5000);

      //鼠标移入停止轮播
      myChart.on("mousemove", (e) => {
        clearInterval(this.fhourTime8);
        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", () => {
        this.fhourTime8 = setInterval(() => {
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
          });
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: hourIndex,
          });
          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: hourIndex,
          });
          hourIndex++;
          if (hourIndex > this.mapdata.length) {
            hourIndex = 0;
          }
        }, 3000);
      });
    },

    destroyed() {
      clearInterval(this.fhourTime8);
    },
  },
};
</script>

注意json文件的引入路径，前面几篇文章有有写出来过，自己去粘贴一下

let symbolImg = "image://" + require("@/assets/marks.png");

小图标，自己根据需要自己添加想要的图标，本地引入的写法

如果有更新动力的小点赞，下篇文章继续跟新，3D地图，以及大屏各种尺寸自适应技巧，先上张3D地图看看效果