<template>
  <div class="mapBox">
    <div class="select">搜索框</div>
    <div style="width: 100%; height: 100%" ref="MapContainer" id="map-container" class="map-container"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import china from "./ChinaMap.json";
onMounted(() => {
  let option: any;
  let mapDom = document.getElementById("map-container");
  let mapChart = echarts.init(mapDom);
  //初始化元素
  echarts.registerMap("china", china as any);
  mapChart.setOption(
    (option = {
      tooltip: {
        trigger: "item",
        formatter: "{b}<br/>{c} 111(p / km2)"
      },
      series: [
        {
          name: "中国",
          type: "map",
          map: "china",
          label: {
            // 省份的名称是否显示
            // show: true,
            // 未选字体颜色
            color: "#fff",
            // 字体大小
            fontSize: 10
          },
          data: [],
          itemStyle: {
            normal: {
              borderColor: "rgba(255, 255, 255, 1)",
              areaColor: "rgba(18,77,178,0.5)",
              borderWidth: 1,
              // 虚化程度
              shadowBlur: 0,
              shadowColor: "rgba(189,243,249)"
            },
            emphasis: {
              show: false,
              // 每个区域的颜色
              // 鼠标滑过颜色
              areaColor: "#97EFF4",
              // 鼠标滑过边框颜色
              shadowColor: "#05EFF7",
              // XY轴的偏移量
              shadowOffsetX: 5,
              shadowOffsetY: 5
            }
          }
        }
      ],
      // geo: {
      //     map: 'china'
      //     ,
      //     roam: 'scale',
      //     zoom: 1.4,
      //     scaleLimit: {
      //         //滚轮缩放的极限控制
      //         min: 1.4,
      //         max: 1.4,
      //     },
      // },
      layoutCenter: ["50%", "55%"],
      layoutSize: 550
    })
  );
  window.addEventListener("resize", () => {
    mapChart.resize();
  });
});
</script>

<style scoped>
.mapBox {
  width: 100%;
  height: 100%;
  position: relative;
  /* background: green; */
}

.mapBox .select {
  position: absolute;
  top: 10px;
  left: 10px;
}
</style>
