e'charts 地图 + 背景旋转

 

 

<template>
  <div class="container">
    <div class="earth-container">
      <div class="earth-item-box">
        <div class="earth-item"></div>
      </div>
      <div class="earth-line earth-line-center"></div>
      <div class="earth-line earth-line-left"></div>
      <div class="earth-line earth-line-right"></div>
    </div>
    <div id="chart"></div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import axios from "axios";
import * as echarts from "echarts";
// import { useRouter } from "vue-router";

let chart;

// const router = useRouter();

onMounted(() => {
  axios.get("/wenzhou.json").then((res) => {
    chart = echarts.init(document.getElementById("chart"));
    echarts.registerMap("wenzhou", res.data);
    const option = {
      series: [
        {
          type: "map",
          map: "wenzhou",
          top: 20,
          left: 20,
          right: 20,
          bottom: 20,
          label: {
            show: true,
            color: "#fff",
          },
          itemStyle: {
            areaColor: "rgb(0,91,157)",
            borderColor: "#fff",
          },
          emphasis: {
            itemStyle: {
              areaColor: "rgb(0,165,211)",
            },
            label: {
              color: "#fff",
            },
          },
          select: {
            itemStyle: {
              areaColor: "rgb(0,165,211)",
            },
            label: {
              color: "#fff",
            },
          },
          markPoint: {
            symbol: "circle",
            symbolSize: 10,
            data: res.data.features.map((item) => {
              const { name, centroid } = item.properties;
              let lng = centroid[0],
                lat = centroid[1];
              switch (name) {
                case "永嘉县":
                  lat += 0.03;
                  break;
                case "乐清市":
                  lat += 0.05;
                  break;
                case "鹿城区":
                  lng -= 0.05;
                  break;
                case "瓯海区":
                  lat -= 0.03;
                  break;
                case "龙湾区":
                  lat += 0.03;
                  break;
                case "瑞安市":
                  lng += 0.15;
                  lat -= 0.03;
                  break;
                case "泰顺县":
                  lng -= 0.02;
                  lat += 0.03;
                  break;
                case "苍南县":
                  lat -= 0.05;
                  break;
                case "平阳县":
                  lng += 0.22;
                  break;
                case "龙港市":
                  lng -= 0.08;
                  break;
              }
              return {
                name: name,
                coord: [lng, lat],
                itemStyle: {
                  color: name === "鹿城区" ? "#f00" : "#132CAB",
                },
              };
            }),
          },
        },
      ],
    };
    chart.setOption(option);
    chart.on("click", (params) => {
      console.log(params);
      // router.push("/detail");
    });
  });
});
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  background: url("../assets/image/bg.png") no-repeat center center;
  background-size: 100% 100%;
  position: relative;

  .earth-container {
    width: 1567px;
    height: 878px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%) translateY(-50%);
    background: url("../assets/image/earth-bg.png") 50% no-repeat;
    background-size: 100% 100%;
    background-position-y: -5px;
    display: flex;
    justify-content: center;
    align-items: center;

    .earth-item-box {
      width: 747px;
      height: 747px;
      background: url("../assets/image/earth-bg-border.png") no-repeat;
      background-size: 100% 100%;
      background-position-y: -11px;
      animation: clockwiseRotate 150s linear 0s infinite;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      top: -30px;
      left: 1px;
      z-index: 2;

      .earth-item {
        width: 661px;
        height: 655px;
        background: url("../assets/image/earth-item.png") no-repeat;
        background-size: 100% 100%;
        animation: anticlockwiseRotate 75s linear 0s infinite;
      }
    }

    .earth-line {
      width: 797px;
      height: 797px;
      background: url("../assets/image/circle-border.png") no-repeat;
      background-size: 100% 100%;
      transform-style: preserve-3d;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1;
    }
    .earth-line-center {
      animation: donghua1 15s linear 0s infinite;
    }
    .earth-line-left {
      animation: donghua2 15s linear 0s infinite;
    }
    .earth-line-right {
      animation: donghua3 15s linear 0s infinite;
    }
  }

  #chart {
    position: relative;
    width: 560px;
    height: 560px;
    z-index: 9;
    left: 50%;
    top: 140px;
    transform: translateX(-50%);
  }
}

@keyframes clockwiseRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes anticlockwiseRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes donghua1 {
  0% {
    transform: translateX(-50%) translateY(-54%) translateZ(0) rotateX(85deg)
      rotate(0deg);
  }
  50% {
    transform: translateX(-50%) translateY(-54%) translateZ(0) rotateX(85deg)
      rotate(180deg);
  }
  100% {
    transform: translateX(-50%) translateY(-54%) translateZ(0) rotateX(85deg)
      rotate(1turn);
  }
}
@keyframes donghua2 {
  0% {
    transform: translateX(-48%) translateY(-55%) translateZ(0) rotateX(75deg)
      rotateY(45deg) rotate(0deg);
  }
  50% {
    transform: translateX(-48%) translateY(-55%) translateZ(0) rotateX(75deg)
      rotateY(45deg) rotate(180deg);
  }
  100% {
    transform: translateX(-48%) translateY(-55%) translateZ(0) rotateX(75deg)
      rotateY(45deg) rotate(1turn);
  }
}
@keyframes donghua3 {
  0% {
    transform: translateX(-50%) translateY(-54%) translateZ(0) rotateX(255deg)
      rotateY(45deg) rotate(0deg);
  }
  50% {
    transform: translateX(-50%) translateY(-54%) translateZ(0) rotateX(255deg)
      rotateY(45deg) rotate(180deg);
  }
  100% {
    transform: translateX(-50%) translateY(-54%) translateZ(0) rotateX(255deg)
      rotateY(45deg) rotate(1turn);
  }
}
</style>