hycw-ui/src/views/home/components/map/index.vue

<template>
  <div class="h-full" style="position: relative">
    <div class="c-title flex justify-between">
      <span>作业计划</span>
      <el-button
        style="font-size: 16px; position: absolute; right: 45%; top: 5px"
        size="mini"
        v-if="currentMap != '衡阳市'"
        type="text"
        @click="back()"
        >返回</el-button
      >
      <el-date-picker
        size="mini"
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyyMMdd"
        style="width: 240px"
        @change="init"
      >
      </el-date-picker>
    </div>

    <div style="display: flex; justify-content: space-between; height: 100%">
      <div id="hy-map" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
const mapEnum = {
  衡阳市: require("./衡阳市.json"),
  常宁市: require("./常宁市.json"),
  衡东县: require("./衡东县.json"),
  衡南县: require("./衡南县.json"),
  衡山县: require("./衡山县.json"),
  衡阳县: require("./衡阳县.json"),
  耒阳市: require("./耒阳市.json"),
  南岳区: require("./南岳区.json"),
  祁东县: require("./祁东县.json"),
  石鼓区: require("./石鼓区.json"),
  雁峰区: require("./雁峰区.json"),
  蒸湘区: require("./蒸湘区.json"),
  珠晖区: require("./珠晖区.json"),
};
import { getWorkNumStatistics } from "@/api/powerdistribution/home";
import moment from "moment";
export default {
  name: "map",
  data() {
    return {
      dateRange: [
        moment().endOf("day").format("YYYYMMDD"),
        moment().endOf("day").format("YYYYMMDD"),
      ],
      loading: true,
      currentMap: "衡阳市",
      dataMap: {},
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      await this.getData();
    },
    async getData() {
      const params = {
        startDate: this.dateRange[0],
        endDate: this.dateRange[1],
      };
      const data = await getWorkNumStatistics(params);
      Object.keys(mapEnum).forEach((key) => {
        (data || []).map((ite) => {
          if (key.includes(ite.submitOrgNm)) {
            this.dataMap[key] = ite.workNum ?? 0;
          }
        });
      });
      this.currentMap = "衡阳市";
      this.initMap();
    },
    back() {
      this.currentMap = "衡阳市";
      this.initMap();
    },
    async initMap(json = require("./衡阳市.json")) {
      var data = [],
        geoCoordMap = {};
      json.features.forEach((v) => {
        geoCoordMap[v.properties.name] = v.properties.center;
        data.push({
          name: v.properties.name,
          value: this.dataMap[v.properties.name] ?? 0,
        });
      });
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        return res;
      };
      const chartDom = document.querySelector("#hy-map");
      const myChart = echarts.init(chartDom);
      echarts.registerMap("HK", json);
      let option = {
        tooltip: {
          trigger: "item",
          alwaysShowContent: true,
          formatter: (params) => {
            let str = "";
            Object.keys(this.dataMap).forEach((key) => {
              str +=
                key +
                "-作业数量 " +
                `<span class="orange">${this.dataMap[key] || 0}</span> <br/>`;
            });
            const v = Array.isArray(params.value)
              ? params.value[2]
              : params.value;

            return this.currentMap == "衡阳市"
              ? str
              : params.name +
                  "-作业数量 " +
                  `<span class="orange">${v || 0}</span> <br/>`;
          },
        },
        // visualMap: {
        //   show: false,
        //   seriesIndex: [0],
        //   inRange: {
        //     color: ["#02367C", "#3a92fe"],
        //   },
        // },
        // visualMap: {
        //   show: true,
        //   min: 0,
        //   max: 20000,
        //   left: "10%",
        //   bottom: "10%",
        //   calculable: true,
        //   seriesIndex: [0],
        //   inRange: {
        //     color: ["#04387b", "#467bc0"], // 蓝绿
        //   },
        // },
        geo: [
          {
            show: true,
            map: "HK",
            zoom: 1.1,
            roam: false,
            itemStyle: {
              normal: {
                borderColor: "#48B6ED",
                borderWidth: 5,
              },
            },
          },
        ],
        series: [
          {
            type: "map",
            mapType: "HK", //自定义扩展图表类型
            zoom: 1.1,
            roam: false,
            label: {
              normal: {
                show: true,
                formatter: "{b}: {c}",
                textStyle: {
                  color: "#fff",
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              normal: {
                areaColor: "#02367C",
                borderColor: "#004096",
                borderWidth: 1,
              },
              emphasis: {
                areaColor: "#004096",
              },
            },
            select: {
              label: {
                // 选中区域的label(文字)样式
                color: "#fff",
              },
              itemStyle: {
                areaColor: "#02367C", // 选中的区域颜色
              },
            },
            data: data,
          },
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(
              data.sort(function (a, b) {
                return b.value - a.value;
              })
              // .slice(0, 10)
            ),
            symbolSize: function (val) {
              return 6;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            label: {
              show: false,
              normal: {
                formatter: "{b}",
                position: "left",
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: (params) => {
                  const [x, y, v] = params.value;
                  return v ? "#44936c" : "gray";
                }, //标志颜色,
                shadowBlur: 2,
              },
            },
            zlevel: 1,
          },
        ],
      };

      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      myChart.on("click", (params) => {
        this.currentMap = params.name;
        this.initMap(mapEnum[params.name]);
      });
      myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: 3,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.c-title {
  border-left: 4px solid #00a4ff;
  padding-left: 10px;
  color: #00a4ff;
}
.orange {
  color: orange !important;
}
</style>