echarts 2d 地图 tooltip提示牌

代码：

<template>
  <div class="bg">
    <div class="zindex">
      <div id="mapLine"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapJson } from "../../../../assets/js/map_js/gansu.js";
export default {
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      this.getMap();
    });
  },
  methods: {
    getMap() {
      var dom = document.getElementById("mapLine");
      var myChart = echarts.init(dom);
      var option;
      var geoJson = mapJson;

      myChart.showLoading();
      myChart.hideLoading();
      echarts.registerMap("gansu", geoJson);
      myChart.setOption(
        (option = {
          //地理坐标系组件。地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
          geo: {
            z: 5,
            name: "甘肃地图",
            show: true,
            map: "gansu",
            layoutCenter: ["50%", "50%"], //地图位置
            layoutSize: "80%", //地图大小
            // zoom: 0.65, //地图缩放比例
            roam: false,
            label: {
              // show: true,
              fontFamily: " Microsoft YaHei",
              fontSize: 12,
              color: "#fff",
            },

            itemStyle: {
              //每一块区域的样式
              normal: {
                areaColor: "#00D3FD",
                borderColor: "#0F5A69",
                borderWidth: 1,
              },
            },
            // 鼠标经过样式--区域颜色、和提示
            emphasis: {
              label: {
                show: true,
                color: "#00D3FD",
                fontSize: "12",
              },
              itemStyle: {
                borderColor: "#0F5A69",
                borderWidth: 2,
                areaColor: "#DEF0F3",
              },
            },
            select: {
              disabled: true, //不能点击地图
            },

            // 对不同的区块进行着色
            regions: [
              {
                name: "兰州市",
                itemStyle: {
                  areaColor: "#00B346",
                },
              },
              {
                name: "陇南市",
                itemStyle: {
                  areaColor: "#00B346",
                },
              },
              {
                name: "白银市",
                itemStyle: {
                  areaColor: "#00B346",
                },
              },
              {
                name: "金昌市",
                itemStyle: {
                  normal: {
                    areaColor: "#00B346",
                    // areaColor: {
                    //   //地图色
                    //   type: "linear",
                    //   x: 0,
                    //   y: 1,
                    //   x2: 0,
                    //   y2: 0,
                    //   colorStops: [
                    //     {
                    //       offset: 0,
                    //       color: "#003ddf", // 0% 处的颜色
                    //     },
                    //     {
                    //       offset: 1,
                    //       color: "#0069e6", // 100% 处的颜色
                    //     },
                    //   ],
                    //   global: false, // 缺省为 false
                    // },
                  },
                },
              },
            ],
            // tooltip 有两个---这是第一个
            tooltip: {
              show: true,
              triggerOn: "click",
              trigger: "item",
              backgroundColor: "rgba(255,255,0,0.4)", // 提示框浮层的背景颜色。
              textStyle: {
                // 提示框浮层的文本样式。
                color: "#41feff",
                fontSize: 14,
              },
              padding: 10, // 提示框浮层内边距，
              formatter: function (params) {
                // console.log(params, "地图。。。。。。。。。。");
                let showname = params;
                return `
                <div style='width:150px;height:150px'>
                    <p  style="width:100%;height:30px; background: linear-gradient(#2caaab, #136692);  text-align: center;line-height: 30px;">${showname.name}</p>
                    <p  style="line-height: 30px; text-indent: 10px;">补助人数: 123423人</p>
                    <p style="line-height: 30px; text-indent: 10px;"> 金 额 : 54564万元</p>
                    <p style="line-height: 30px; text-indent: 10px;" >支出比例: %</p>
                    <p style="line-height: 30px; text-indent: 10px;">补助发生率: 346%</p>
              </div>
              `;
              },
            },
          },
          // 提示牌--- tooltip 有两个---这是第二个----必须写这个，要不然不能出现tooltip提示牌
          tooltip: {
            show: true,
          },

          series: [
            // 地图的样式---主要是为了添加阴影
            {
              type: "map",
              map: "gansu",
              layoutCenter: ["50%", "50%"],
              layoutSize: "80%",
              roam: false,
              itemStyle: {
                normal: {
                  shadowColor: "rgba(5,79,94,0.9)",
                  shadowBlur: 2,
                  shadowOffsetX: -5,
                  shadowOffsetY: 10,
                },
              },
            },
          ],
        })
      );

      if (option && typeof option === "object") {
        myChart.setOption(option);
      }
      // 屏幕适配
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    
    },
  },
};
</script>

<style scoped>
#mapLine {
  width: 900px;
  height: 500px;
  position: absolute;
  left: 50%;
  margin-left: -450px;
  /* transform-origin: center bottom;
  transform: rotateX(55deg) translateZ(80px) ; */
}
.bg {
  width: 100%;
  height: 88vh;
  background: url("../../../../assets/img/bj.png") no-repeat center;
  background-size: 100% 100%;
}
.zindex {
  width: 500px;
  height: 500px;
  background: url("../../../../assets/img/bg.png") no-repeat center;
  background-size: 80% 80%;
  margin: 0 auto;
  position: relative;
  /* transform-style: preserve-3d;
  perspective: 800px; */
}
</style>