luohe_fronted/src/pages/index/components/parking.vue

<template>
  <div class="middle-map">
    <div class="top">
      <div class="title">停车热度时空分布</div>
    </div>
    <div class="bottom" id="map"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import * as geoJson from '../../../util/411100.json'

export default {
  data() {
    return {
      dqIndex: -1,
      timer: null,
      option: {
        visualMap: {
          show: true,
          type: "continuous",
          left: "0%",
          bottom: "0%",
          calculable: true,
          textStyle: {
            color: "white",
          },
          text: ["(辆)"],
          min: 0,
          max: 100,
          inRange: {
            color: ["#4FC9FB","#36ADFC","#1788D1","#0E6BAE","#1871A2","#0D4D7D"],
          },
        },
        geo: {
          map: "luohe",
          // aspectScale: 1,
          roam: false,
          itemStyle: {
            normal: {
              borderColor: "#2ab8ff",
              borderWidth: 2.5,
              areaColor: "#12235c",
            },
            emphasis: {
              areaColor: "#2AB8FF",
              shadowColor: "rgba(42,184,255, 0.7)",
              shadowOffsetY: 5,
              shadowOffsetX: 5,
              shadowBlur: 5,
            },
          },
        },
        tooltip: {
          confine: true,
          formatter: this.mapTooltip,
          position: "inside",
          backgroundColor: "transparent",
        },
        series: [
          {
            type: "map",
            // roam: true,
            label: {
              normal: {
                textStyle: {
                  color: "#fff",
                },
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              normal: {
                borderColor: "#76bef5",
                borderWidth: 1.5,
                areaColor: "#4282de",
              },
              emphasis: {
                areaColor: "#002aff",
                borderWidth: 0,
                color: "green",
              },
            },
            roam: false,
            map: "luohe", //使用
            data: [],
          },
        ],
      },
      curData: {},
      dataSource: null,
      totalAll: '0',
    };
  },
  methods: {
    setIntervalMap(chart) {
      this.timer = setInterval(() => {
        chart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: this.dqIndex + 1,
        });
        this.dqIndex++;
        if (this.dqIndex > 4) {
          this.dqIndex = -1;
        }
      }, 3000);
    },
    mapTooltip(data) {
      return `<div class="map-tooltip">
        <div class="map-tooltip-name">${data.name}:<span class="map-tooltip-value">${data.value}%</span></div>
      </div>`;
    },
  },
  mounted() {
    let arr = []
    let dataSoure = {
      '411102': {quyuName: '源汇区', zb: 40},
      '411103': {quyuName: '郾城区', zb: 60},
      '411104': {quyuName: '召陵区', zb: 40},
      '411121': {quyuName: '舞阳县', zb: 50},
      '411122': {quyuName: '临颍县', zb: 30}}
    for (const key in dataSoure) {
      if (key !== '411100') {
        arr.push({
          name: dataSoure[key].quyuName,
          value: Number(dataSoure[key].zb),
        });
      }
    }
    let mapMax = Math.max(...arr.map(item => item.value))
    let mapMin = Math.min(...arr.map(item => item.value))
    let chart = echarts.init(document.getElementById("map"));
    echarts.registerMap("luohe", geoJson);
    this.option.series[0].data = arr;
    this.option.visualMap.min = mapMin;
    this.option.visualMap.max = mapMax;
    chart.setOption(this.option);
    this.dqIndex = -1;
    this.setIntervalMap(chart);
    //鼠标移入静止播放
    chart.on("mouseover", (e) => {
      clearInterval(this.timer);
      chart.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: e.dataIndex,
      });
    });
    chart.on("mouseout", (e) => {
      clearInterval(this.timer);
      //鼠标移出后先把上次的高亮取消
      chart.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
        dataIndex: e.dataIndex,
      });
      this.setIntervalMap(chart);
    });
  },
};
</script>

<style lang="less" scoped>
.middle-map {
  width: 100%;
  height: 100%;
  .top {
    height: 10%;
    // padding: 50px 50px 0 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC";
    .total-detail {
      display: flex;
      margin-top: 10px;
      align-items: center;
      justify-content: center;
      .total-value {
        font-size: 41px;
      }
      .total-unit {
        margin-left: 20px;
        font-size: 20px;
      }
    }
    .title {
      font-weight: 650;
      font-style: normal;
      color: #ffffff;
      font-size: 18px;
    }
    .dq {
      font-weight: 650;
      color: #ffcc00;
      font-size: 24px;
      text-align: center;
    }
    .num-container {
      height: 180px;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 0 20px;
      .num-item {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        // width: 28%;
        .label-box {
          display: flex;
          align-items: center;
          // justify-content: space-between;
          .label {
            font-weight: 650;
            color: #ffcc00;
            font-size: 28px;
          }
          .rate {
            margin-left: 30px;
            font-weight: 650;
            color: #ffcc00;
            font-size: 18px;
          }
        }
        .num-box {
          display: flex;
          justify-content: space-between;
          justify-content: left;
          font-family: "Arial-BoldMT", "Arial Bold", "Arial";
          font-weight: 700;
          .money {
            color: #fff;
            font-size: 22px;
            .num {
              color: #ffcc00;
            }
          }
          .rate {
            color: #008000;
            font-size: 32px;
          }
        }
      }
    }
  }
  .bottom {
    height: 90%;
    width: 100%;
  }
  /deep/.map-tooltip {
    font-size: 18px;
    padding: 10px 20px;
    background: url("../../../../static/img/u231.png");
    background-size: 100% 100%;
    .map-tooltip-name {
      color: #00e4ff;
    }
    .map-tooltip-value {
      color: white;
      margin-left: 20px;
    }
  }
}
</style>