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

<template>
  <div>
    <div style="color: #d5d3d3" class="middle-map">
      <div align="center" style="color: #3498db;font-size: 23px;margin-bottom: 20px">停车难易指数</div>
      <el-select clearable v-model="value" filterable remote reserve-keyword placeholder="请选择时段">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <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>
      <linechart
        :autoStop="false"
        :top="30"
        :bottom="30"
        :left="40"
        :legendTop="0"
        :dataset="linedata"
        :tooltipFormat="lineTooltipFormat"
        :encode="[
              { x: 'mouth', y: 'lastAmount', seriesName: '难易指数',bool:'true' },
            ]"
        id="sxcyfzqk"
      />
    </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 {
      linedata: [],
      options: [{
        value: '日间时段',
        label: '日间时段'
      }, {
        value: '夜间时段',
        label: '夜间时段'
      }],
      value: '',
      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: [],
          },
        ],
      },
    };
  },

  mounted() {
    this.zxt()
    api.dtnyzs().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);
      });
    })
  },
  methods: {
    zxt() {
      api.zxt().then(res => {
        this.linedata = res.data || []
      })
    },
    lineTooltipFormat(params) {
      const data = params[0].data;
      return `<div class="line-tooltip">
        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
        params[0].data.lastAmount || "--"
      }</div>
      </div>`;
    },
    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>`;
    },
  },
};
</script>
<style  lang="scss" scoped>
.form-wrapper {
  margin-bottom: 20px;
}
/deep/ .el-input__inner {
  background: #2d3744;
  border: none;
  border-radius: 0;
}
/deep/ .el-select {
  height: 40px;
  .el-input__inner {
    height: 40px;
  }
  .el-input__prefix, .el-input__suffix {
    height: 40px;
  }

  /* 下面设置右侧按钮居中 */
  .el-input__suffix {
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
  }
  /* 输入框加上上下边是 32px + 2px =34px */
  .el-input__icon {
    line-height: 0px;
  }
}
/deep/ .form-wrapper .el-button {
  background: linear-gradient(90deg,#0158d9,#3c97e4);
  width: 100px;
  height: 40px;
}
.body-wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #0c0c0c;
}
</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>