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

<template>
  <div>
    <div style="color: #d5d3d3" class="middle-map">
      <div align="center" style="color: #3498db;font-size: 23px;margin-bottom: 20px">实施停车饱和度</div>
      <div style="height: 450px">
        <div class="bottom" id="map"></div>
      </div>
    </div>
    <div class="body-wrapper" style="height: 300px">
      <div align="center" style="color: #3498db;font-size: 23px;margin-bottom: 20px">停车建议</div>
      <el-table :data="tableData" style="background: #2a2a2a;border-color: #333;">
        <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
        </el-table-column>
      </el-table>
      <div class="table-pagination">
        <el-pagination :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"
                       :current-page.sync="pageNum" :page-size.sync="pageSize">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import * as geoJson from '@/util/411100.json'
import linechart from "@/components/lineChart";
import api from '@/api/audit'

export default {
  components: {
    linechart,
  },
  data() {
    return {
      columns: [
        {
          label: '区域',
          key: 'regionName'
        },
        {
          label: '建议',
          key: 'detail'
        }
      ],
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 1,
      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,
    };
  },
  methods: {
    handlePageChange() {
      this.getTableData()
    },
    getTableData() {
      const {pageNum, pageSize} = this
      api.nyzstjListByPage({current: pageNum, size: pageSize}).then(res => {
        this.tableData = res.data.records || []
        this.total = res.data.total
      })
    },
    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() {
    this.getTableData()
    api.nyzs().then(res => {
      let arr = []
      let dataSoure = res.data
      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="scss" scoped>
.body-wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #0c0c0c;
  .table-pagination{
    text-align: right;
  }
}
</style>
<style lang="less" scoped>
.middle-map {
  width: 100%;
  height: 100%;
  .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>