热力图

src/pages/index/components/hot_map.vue

@@ -0,0 +1,274 @@
+<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: false,
+          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: "#ff4800",
+                borderWidth: 0,
+                color: "green",
+              },
+            },
+            roam: false,
+            map: "luohe", //使用
+            data: [],
+          },
+        ],
+      },
+      curData: {},
+      dataSource: null,
+      totalAll: '0',
+    };
+  },
+  watch: {
+    dqIndex: function (newV) {
+      this.queryDq(newV);
+    },
+  },
+  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 chart = echarts.init(document.getElementById("map"));
+    echarts.registerMap("luohe", geoJson);
+    this.option.series[0].data = arr;
+    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>

src/pages/index/layouts/indexLayout.vue

@@ -38,6 +38,8 @@ export default {
       menu: [
         {name: 'demo1', url: '/demo1'},
         {name: 'demo2', url: '/demo2'},
+        {name: 'bmap', url: '/bmap'},
+        {name: 'hot_map', url: '/hot_map'},
         {name: '静态资源', url: '/static_resource'},
         {name: '记录查询', url: '/record_query'},
         {name: '停车运行监管', url: '/park_monitor'},

src/router/index.js

@@ -25,6 +25,11 @@ export default new Router({
           path: "/demo2",
           component: () => import("../pages/index/components/demo2.vue")
         },
+        {
+          name: "hot_map",
+          path: "/hot_map",
+          component: () => import("../pages/index/components/hot_map.vue")
+        },
         {
           name: "static_resource",
           path: "/static_resource",