maps.vue

<template>
  <div class="map-box">
    <span id="back" v-if="parentInfo.length !== 1" @click="handleBack()"
      >返回</span
    >
    <div id="mapDiv"></div>
  </div>
</template>

<script>
import axios from "axios";
import echarts from "echarts";
export default {
  name: "maps",
  data() {
    return {
      dataList: [],
      show: "province",
      parentInfo: [
        {
          cityName: "全国",
          code: 100000,
        },
      ],
    };
  },
  mounted() {
    this.initData(100000);
  },
  methods: {
    getList(type, areaCode) {
      let _this = this;
      return new Promise((resolve, reject) => {
        let httpUrl = "";
        let dataList = [];
        if (type === "china") {
          httpUrl = "tBoardStatistic/getBoardProvincePlayTotalList";
        }
        if (type === "map") {
          httpUrl = `tBoardStatistic/getBoardCityPlayTotalList?areaCode=${areaCode}`;
        }
        _this
          .$https({
            method: "post",
            url: httpUrl,
          })
          .then((res) => {
            if (res.status == 200) {
              if (res.data.resultCode == 200) {
                dataList = res.data.data;
              } else {
                dataList = [];
              }
            } else {
              dataList = [];
            }
            resolve(dataList);
          })
          .catch((err) => {
            this.$message.error(err.message);
            resolve([]);
          });
      });
    },
    initData(adcode) {
      Promise.all([
        this.getGeoJson(adcode),
        this.getList(this.parentInfo.length === 1 ? "china" : "map", adcode),
      ]).then((res) => {
        let features = res[0].features;
        let json = res[1];
        let flen = features.length;
        let jlen = json.length;
        for (let i = 0; i < flen; i++) {
          for (let j = 0; j < jlen; j++) {
            let jName = json[j].name.substring(0, 2);
            if (features[i].properties.name.indexOf(jName) != -1) {
              features[i].properties.value = json[j].value;
              break;
            }
          }
        }
        this.getMapData({ features: features });
      });
    },
    init(mapData) {
      let option = {
        tooltip: {
          triggerOn: "click",
          formatter: function (e, t, n) {
            return 0.5 == e.value
              ? e.name + "：播放量"
              : e.seriesName + "<br />" + e.name + "：" + e.value;
          },
        },
        visualMap: [
          {
            dimension: 0,
            right: 20,
            bottom: 20,
            itemWidth: 16,
            itemHeight: "200px",
            orient: "horizontal",
            text: ["由高到低", "播放量"],
            backgroundColor: "rgba(0,28,66,0.6)",
            padding: [15, 10],
            textStyle: {
              color: "rgba(255,255,255,1)",
            },
            inRange: {
              color: ["#9B1E23", "#E72128", "#FB8D1F", "#FFCF4E"],
            },
          },
        ],
        geo: {
          map: this.parentInfo.length === 1 ? "china" : "map",
          roam: !1,
          roam: true, //是否开启平游或缩放
          scaleLimit: {
            //滚轮缩放的极限控制
            min: 1
          },

          zoom: 1.1,
          top: 100,
          left: "20%",
          label: {
            normal: {
              show: !0,
              fontSize: "12",
              color: "#fff",
              formatter: (p) => {
                switch (p.name) {
                  case "内蒙古自治区":
                    p.name = "内蒙古";
                    break;
                  case "西藏自治区":
                    p.name = "西藏";
                    break;
                  case "新疆维吾尔自治区":
                    p.name = "新疆";
                    break;
                  case "宁夏回族自治区":
                    p.name = "宁夏";
                    break;
                  case "广西壮族自治区":
                    p.name = "广西";
                    break;
                  case "香港特别行政区":
                    p.name = "香港";
                    break;
                  case "澳门特别行政区":
                    p.name = "澳门";
                    break;
                }
                return p.name;
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              areaColor: "#f2d5ad",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0,
            },
          },
          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0, // 为 0 时不绘制该图形
                },
              },
              label: {
                show: false, // 隐藏文字
              },
            },
          ],
        },
        series: [
          {
            name: "播放量",
            type: "map",
            geoIndex: 0,
            data: mapData,
          },
        ],
      };
      let echartsDiv = this.$echarts.init(document.getElementById("mapDiv"));
      echartsDiv.setOption(option);
      echartsDiv.on("click", this.echartsMapClick);
    },
    handleBack() {
      if (this.parentInfo.length === 1) {
        return;
      }
      this.parentInfo.pop();
      this.initData(this.parentInfo[this.parentInfo.length - 1].code);
    },
    echartsMapClick(params) {
      if (!params.data) {
        return;
      }
      if (params.data.level === "district") {
        return false;
      }
      let cityCode = params.data.cityCode;
      this.parentInfo.push({
        cityName: params.data.name,
        code: params.data.cityCode,
      });
      this.initData(cityCode);
    },
    getGeoJson(adcode) {
      return new Promise((resolve, reject) => {
        axios({
          method: "get",
          url: `static/feature/${adcode}_full.json`,
        }).then((res) => {
          let mapJson = {
            features: res.data.features,
          };
          resolve(mapJson);
        });
      });
    },
    getMapData(geoJson) {
      // 获取后台接口数据
      let Json = geoJson.features;
      let mapData = Json.map((item) => {
        return {
          name: item.properties.name,
          value: item.properties.value,
          level: item.properties.level,
          cityCode: item.properties.adcode,
        };
      });
      let mapJson = {};
      //geoJson必须这种格式
      mapJson.features = Json;
      //去渲染echarts
      this.initEcharts(mapData, mapJson);
    },
    initEcharts(mapData, mapJson) {
      echarts.registerMap(
        this.parentInfo.length === 1 ? "china" : "map",
        mapJson
      );
      this.init(mapData);
    },
  },
};
</script>

<style lang="less">
.map-box {
  width: 100%;
  height: 100%;
  #back {
    position: absolute;
    font-size: 16px;
    color: #775858;
    left: 60px;
    top: 140px;
    cursor: pointer;
    z-index: 99;
    &:hover {
      color:#9B1E23;
    }
  }
  #mapDiv {
    width: 100%;
    height: 100%;
  }
}
</style>