echarts map地图动态下钻,自定义标注,自定义tooltip弹窗【完整demo版本】

在数据可视化中，地图是很重要的一个环节，很多时候需要展现的不仅是国家地图，还需要能从国家进入到省市。这个逐级进入的过程就是我们今天说的地图下钻。

地图下钻看起来很屌、很高大上，但是仔细琢磨一下，技术实现上真的很简单。

文章目录

[1. 本章主要功能介绍](#1. 本章主要功能介绍)
[1. 地图下钻实现思路（本章核心）](#1. 地图下钻实现思路（本章核心）)
[2. 下钻代码实现（本章核心）](#2. 下钻代码实现（本章核心）)
[3. 完整代码](#3. 完整代码)
- [3.1 vue部分](#3.1 vue部分)
- [3.2 mapData.js 部分](#3.2 mapData.js 部分)
[4. 接口数据](#4. 接口数据)

1. 本章主要功能介绍

自定义标注样式&自定义tooltip弹窗样式（上章内容） echarts 自定义标注样式&自定义tooltip弹窗样式
自定义地图贴图样式（上章内容）echarts 实现中国geo地图自定义贴图实例
下拉菜单选择切换地图省份（本章核心）
点击地图切换地图省份（本章核心）
进入全屏/退出全屏（其他）

1. 地图下钻实现思路（本章核心）

mounted 里面首先初始化一个中国地图的数据，provinceCode默认为100000
创建echarts实例，获取中国地图的 geoJSON 数据
拿到geoJSON 数据调用initEcharts函数区创建echarts
geoJSON 数据对echarts进行渲染上图
上图完成后，通过 this.myChart.on("click",()=>{}) 事件活动点击的对象，params.name 可以拿到点击的省份名称，修改 provinceCode 值为点击的省份
监听 provinceCode 改变，重新执行第一递归循环即可

2. 下钻代码实现（本章核心）

3. 完整代码

3.1 vue部分

html 复制代码

<template>
  <div class="map">
    <div class="navProvince">
      <select
        v-model="provinceCode"
        @change="changeProvince($event.target.value)"
      >
        <option
          :value="item.code"
          v-for="(item, index) in provinceData()"
          :key="index"
        >
          {{ item.name }}
        </option>
      </select>
      <img src="@/assets/img/dataView/down.webp" alt="" srcset="" />
    </div>
    <div class="navBase" v-if="baseId">
      <select v-model="baseId" @change="changeBaseId($event.target.value)">
        <option
          :value="item.baseId"
          v-for="(item, index) in baseData"
          :key="index"
        >
          {{ item.name }}
        </option>
      </select>
      <img src="@/assets/img/dataView/down.webp" alt="" srcset="" />
    </div>
    <div
      class="screen"
      @click="toggleFullScreen"
      :title="isFullscreen ? '退出全屏' : '进入全屏'"
    >
      <img src="@/assets/img/dataView/screen.webp" alt="" srcset="" />
      <span>{{ isFullscreen ? "退出全屏" : "进入全屏" }}</span>
    </div>
    <div ref="myEchart" id="personnel"></div>
  </div>
</template>

<script>
import "echarts-gl"; //3D地图插件
import screenfull from "screenfull";
import axios from "axios";
import {
  provinceObj,
  provinceData,
  getCodeByName,
  formatHtml,
} from "./js/mapData";
import { API_listBase } from "@/api/dataView";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      provinceData,
      isFullscreen: false,
      publicUrl: "https://geo.datav.aliyun.com/areas_v3/bound/",
      chinaGeoJson: [],
      myChart: null,
      mapImg: null, //地图底色
      mapActiveImg: null, //地图悬浮移入后的底色
      baseData: [], //基地数据
      provinceCode: 100000,
      baseId: "",
    };
  },
  computed: {
    ...mapGetters({
      getProvinceCode: "dataView/getProvinceCode",
      getBaseId: "dataView/getBaseId",
    }),
  },
  watch: {
    provinceCode(_newData, _oldData) {
      this.provinceCode = _newData;
      this.$store.commit(
        "dataView/SET_PROVINCECODE",
        provinceObj[_newData] == "全国" ? "" : _newData
      );
      this.getList();
    },
  },
  methods: {
    // 请求三方地图数据接口
    async getGeoJson(jsonName, province) {
      let res = await axios.get(`${this.publicUrl}${jsonName}`);
      if (res && res.status === 200) {
        this.initEcharts(res.data, province);
      }
    },
    // 加载地图数据
    initEcharts(geoJson, name) {
      this.$echarts.registerMap(name, geoJson);
      let option = {
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            // 为小图表创建一个容器
            if (params.data) {
              return params.name + " : " + params.data.data.datas;
            }
          },
        },
        geo: {
          map: name == "全国" ? "china" : name,
          zoom: 1,
          roam: false,
          itemStyle: {
            normal: {
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "#09132c", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#274d68", // 100% 处的颜色
                  },
                ],
                globalCoord: true, // 缺省为 false
              },
              shadowColor: "rgb(13, 48, 92,0.8)", //底层颜色
              shadowOffsetX: 10,
              shadowOffsetY: 11,
            },
          },
          regions: [
            {
              show: false,
              name: "南海诸岛",
              itemStyle: {
                areaColor: "rgba(0, 10, 52, 1)",
                borderColor: "rgba(0, 10, 52, 1)",
                normal: {
                  opacity: 0,
                  label: {
                    show: false,
                    color: "#009cc9",
                  },
                },
              },
            },
          ],
        },
        series: [
          {
            type: "map",
            roam: false,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#D5E0EE",
                },
              },
              emphasis: {
                textStyle: {
                  color: "rgb(183,185,14)",
                },
              },
            },
            itemStyle: {
              normal: {
                borderColor: "rgb(81, 184, 220)",
                borderWidth: 1,
                areaColor: {
                  image: this.mapImg,
                  repeat: "repeat",
                },
              },
              emphasis: {
                areaColor: {
                  image: this.mapActiveImg,
                  repeat: "repeat",
                },
                borderColor: "#2ab8ff",
                borderWidth: 1,
                shadowColor: "rgba(0, 255, 255, 0.7)",
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 1,
                label: {
                  show: false,
                },
              },
            },
            zoom: 1,
            map: name == "全国" ? "china" : name, //使用
          },
          {
            type: "scatter",
            coordinateSystem: "geo",
            itemStyle: {
              color: "#f00",
            },
            tooltip: {
              trigger: "item",
              backgroundColor: "transparent",
              formatter: function (params) {
                return formatHtml(params.data);
              },
            },
            symbol: `image://${require("@/assets/img/dataView/point.png")}`,
            symbolSize: [48, 58],
            symbolOffset: [0, 0],
            z: 9999,
            data: this.baseData,
          },
        ],
      };
      this.myChart = this.$echarts.init(this.$refs.myEchart);
      this.myChart.setOption(option, true);
      this.myChart.off("click");
      this.myChart.on("click", (params) => {
        this.$store.commit("dataView/SET_BASEID", params.data?.baseId);
        if (params.data?.provinceCode) {
          this.baseId = params.data?.baseId;
        }
        if (params.data?.provinceCode || getCodeByName(params.name)) {
          this.provinceCode =
            params.data?.provinceCode || getCodeByName(params.name);
        } else {
          return this.$message.warning("暂无继续进行地图下钻");
        }
      });
    },
    // 切换全屏
    toggleFullScreen() {
      if (!screenfull.isEnabled) return false;
      screenfull.toggle();
    },
    changeProvince(_data) {
      this.baseId = "";
      this.$store.commit("dataView/SET_BASEID", "");
    },
    changeBaseId(_data) {
      let params = this.baseData.find((item) => item.baseId == _data);
      if (params) {
        this.provinceCode = params?.provinceCode;
      } else {
        return this.$message.warning("切换失败");
      }
    },
    async getList() {
      let { code, data } = await API_listBase({
        provinceCode: this.getProvinceCode,
        baseId: this.getBaseId,
      });
      if (code === 200) {
        this.baseData = data.map((item, _index) => {
          return {
            ...item,
            value: item.baseLocation.split(","),
            name: item.unitName,
            province: item.province,
            computilityData: item.computilityData
              ? item.computilityData
              : {
                  baseCpuserverNumber: 0,
                  baseCpuScores: 0,
                  baseIdlecpuScores: 0,
                  baseMemoryCapacity: 0,
                  baseIdlememoryCapacity: 0,
                  baseStorageCapacity: 0,
                  baseIdlestorageCapacity: 0,
                  baseUploadBandwidthCapacity: 0,
                  baseIdleuploadBandwidthCapacity: 0,
                  baseDownloadBandwidthCapacity: 0,
                  baseIdledownloadBandwidthCapacity: 0,
                  baseGpuserverNumber: 0,
                  baseGpuScores: 0,
                  baseIdlegpuScores: 0,
                  baseNpuserverNumber: 0,
                  baseNpuScores: 0,
                  baseIdlenpuScores: 0,
                  baseFp16Computility: 0,
                  baseIdlefp16Computility: 0,
                  baseFp32Computility: 0,
                  baseIdlefp32Computility: 0,
                  baseGraphicsMemoryCapacity: 0,
                  baseIdlegraphicsMemoryCapacity: 0,
                },
          };
        });
      }
      // 初始化中国地图
      this.$nextTick(() => {
        this.myChart = this.$echarts.init(this.$refs.myEchart);
        this.getGeoJson(
          `${this.provinceCode}_full.json`,
          provinceObj[this.provinceCode]
        );
      });
    },
  },
  mounted() {
    // 地图底色
    this.mapImg = document.createElement("img");
    this.mapImg.style.height =
      this.mapImg.height =
      this.mapImg.width =
      this.mapImg.style.width =
        "100px";
    this.mapImg.src =
      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAIAAAAmKNuZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMS1jMDAwIDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMy4wIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3Qjk5OUJBRTZGNTMxMUVGODI5Q0EzOUY4MDEwOEUwNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3Qjk5OUJBRjZGNTMxMUVGODI5Q0EzOUY4MDEwOEUwNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjdCOTk5QkFDNkY1MzExRUY4MjlDQTM5RjgwMTA4RTA3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjdCOTk5QkFENkY1MzExRUY4MjlDQTM5RjgwMTA4RTA3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+3sCwvQAAAdRJREFUeNqMVUtOAzEMta1uGKTuQD0K4iLdcy24QDlIz1KVHRJlZ+P87UwyZTat42+e7Rc8fnyezt/gPgFAIAA2on7hROIfzIactJAMjq97hLd3uP42n+eHKBa7wyNcfrLKaZO4wPVmRSqmxSFkrgm9ymmhpTQilSMx9Rt/7gO6j7ATu+pknRAsPrwRW1S7Cz+HJWOc4VvCoWZOpam2VkpJa2pPxiXHLrhdbq2D6nxx6DpRtV+3dgFnLLEV7EtmC6WEcmBwe4esx67q0ZSN4xbwBLVkzJrddQf7chg2P/FDpthxbQVm/4R9DaSjW9uS0MzrgRk+rlskthUWe2ld1rlHzHXcaxRNQPaoiYzu3jVKInY8CeFC4+TczEAUqV8DmkCOo7nJCHZjHOAs/MMRe1usFbO20BcZMYfTEMo5mSnEcE48CgRV6Uu1jyuCcuRWKEAsKeEKTWyc2s+dhL4XMyoWOIJ5+yQRFDbwCajvfXMUs8KTJem1UgkKGrpPi7taWoMazq5QR1+hFbDaiqt9HFJnoj/GTB1f2ZckboX8Y8lHD0OGFLupxc1xhy3q11s7+hOarMGQ8vDOABDuji/70xncI51eA1o/DtJekjbnrY0a6k+AAQAfPMeH5wCecwAAAABJRU5ErkJggg==";

    // 地图悬浮移入后的底色
    this.mapActiveImg = document.createElement("img");
    this.mapActiveImg.style.height =
      this.mapActiveImg.height =
      this.mapActiveImg.width =
      this.mapActiveImg.style.width =
        "100px";
    this.mapActiveImg.src =
      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAIAAAAmKNuZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMS1jMDAwIDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMy4wIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3NjJDOUNEMDZGNTMxMUVGQjI2OUM4RUM4MzQwOTI5RiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3NjJDOUNEMTZGNTMxMUVGQjI2OUM4RUM4MzQwOTI5RiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjc2MkM5Q0NFNkY1MzExRUZCMjY5QzhFQzgzNDA5MjlGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc2MkM5Q0NGNkY1MzExRUZCMjY5QzhFQzgzNDA5MjlGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+LKM4xwAAAfVJREFUeNqEVV1OwzAMjqOqSKMPsN6AnYEdiCtxC47CzjBusJ+HDIkixThx6zpOO/LQxU7iON/32YOP97fwdXDTAHAY6cd5SGZE51CZMX29HzePq+lYmnS71yYcD+fvIW3K/qdNe80mj23Xnm+zaVafu/ZyGzhguuh48BQYxujjzehWh6yOX7XVj190MLlU4rO5OHgPIYDKkzDhYJygoANlXBNIT6B0NnSCAIr5HOPNJs8xmzpcbUb1lobgOIfBjQRm7MOAU2p9157yKggzYZCUe7WZifLmLRELHPVD/h2UmWewJF+NrsSFFfhcyWGCiDUJJcZQQY4V+/ULKJWGstPY12CTVnU6vVrFkjcKxVT8yk3bEl0yL2FQsR5O4aeomVCUkJeszXM0oMqDtbNgQ6iEdaFCCZMmB1Xo9Op7pbRCrkQksMBQQdgJ9iwag70xDVFJukq7DWV4vQ2CVF+i22cqdBlIkXDNUL8S6cxVgXcLoK52AQu1SKmjeLCBjIwXseOvh4KlhF1dK4uTxT3SzYSZoirQ2QZlsGe81toX+RsKa5RNYEOpe0G2LgOz2eqOVa2VabSNS11e/Ck7rXhG1xwDFR0UOXzZvBozs3d6DkBJNyy0vDk7Ynbzst8eP+cSj5XuH1u6Uv6hE1HTn7emkebdbv8nwADKuQThmsBu6AAAAABJRU5ErkJggg==";

    // 初始化中国地图
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.map {
  flex: 1;
  width: 100%;
  color: #fff;
  position: relative;

  .navProvince,
  .navBase {
    position: absolute;
    left: 40px;
    width: 160px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: url("../../../../assets/img/dataView/nav_bg.webp") no-repeat;
    background-size: 160px 32px;
    background-position: center;
    cursor: pointer;
    z-index: 2;

    img {
      height: 16px;
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
    }
  }

  .navBase {
    left: 220px;
  }

  .screen {
    position: absolute;
    right: 40px;
    width: 118px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("../../../../assets/img/dataView/screen_bg.webp") no-repeat;
    background-size: 118px 32px;
    background-position: center;
    cursor: pointer;
    z-index: 2;

    img {
      height: 24px;
      margin-right: 10px;
    }

    span {
      font-weight: normal;
      font-size: 16px;
      color: #4b94ff;
      line-height: 16px;
    }
  }
}

#personnel {
  width: 100%;
  height: 100%;
  z-index: 1;
}
select {
  width: 100%;
  padding: 6px 10px 6px 16px;
  box-sizing: border-box;
  font-size: 16px;
  color: #4b94ff;
  line-height: 16px;
  -webkit-appearance: none;
  /* for Chrome, Safari */
  -moz-appearance: none;
  /* for Firefox */
  -ms-appearance: none;
  /* for IE10+ */

  appearance: none;
  -moz-appearance: none;
  background: transparent;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;

  option {
    background: transparent;
  }
}
</style>

<style scoped lang="less">
/deep/ .tooltip-chart {
  background-color: transparent;
  width: 520px;
  height: 334px;
  background: url("../../../../assets/img/dataView/tooltip_bg.webp") no-repeat;
  background-size: 100% 100%;
  background-position: center;
  padding: 16px 25px 16px 20px;
  grid-gap: 0 40px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  .item {
    font-weight: 500;
    font-size: 13px;
    color: #ffffff;
    line-height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
 
    span {
      &.name{
        // color: #4b94ff;
      }
      &:first-child {
        position: relative;
        padding-left: 14px;

        &::after {
          content: "";
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background: #fff;
        }
      }

      &:last-child {
        text-align: left;
      }
    }
  }
}
</style>

3.2 mapData.js 部分

ts 复制代码

export const provinceObj = {
  100000: "全国",
  110000: "北京",
  120000: "天津",
  130000: "河北",
  140000: "山西",
  150000: "内蒙古",
  210000: "辽宁",
  220000: "吉林",
  230000: "黑龙江",
  310000: "上海",
  320000: "江苏",
  330000: "浙江",
  340000: "安徽",
  350000: "福建",
  360000: "江西",
  370000: "山东",
  410000: "河南",
  420000: "湖北",
  430000: "湖南",
  440000: "广东",
  450000: "广西",
  460000: "海南",
  500000: "重庆",
  510000: "四川",
  520000: "贵州",
  530000: "云南",
  540000: "西藏",
  610000: "陕西",
  620000: "甘肃",
  630000: "青海",
  640000: "宁夏",
  650000: "新疆",
  710000: "台湾",
  810000: "香港",
  820000: "澳门",
};


export let provinceData = () => {
  let arr = [];
  for (const key in provinceObj) {
    arr.push({
      code: key,
      name: provinceObj[key],
    });
  }
  return arr;
};

/**
 * 根据名称查询对应的键
 * @param {*} name
 * @returns
 */
export let getCodeByName = (name) => {
  for (const [key, value] of Object.entries(provinceObj)) {
    if (value === name) {
      return key;
    }
  }
  return null; // 如果没有找到
};

/**
 * 基地展示数据
 * @param {*} param0
 * @returns
 */
export let formatHtml = ({ name, computilityData }) => {
  return `
        <div class="tooltip-chart">
        <div class="item">
            <span>基地名称</span>
            <span class="name">${name}</span>
        </div>
        <div class="item">
             <span>基地CPU服务器数量</span>
            <span>${computilityData?.baseCpuserverNumber || 0}</span>
        </div>
        <div class="item">
            <span>基地CPU总核数</span>
            <span>${computilityData?.baseCpuScores || 0}</span>
        </div>
        <div class="item">
            <span>基地空闲CPU核数</span>
            <span>${computilityData?.baseIdlecpuScores || 0}</span>
        </div>
        <div class="item">
            <span>基地内存空间总容量</span>
            <span>${computilityData?.baseMemoryCapacity || 0}</span>
        </div>
        <div class="item">
            <span>基地空闲内存空间容量</span>
            <span>${computilityData?.baseIdlememoryCapacity || 0}</span>
        </div>
        <div class="item">
            <span>基地存储空间总容量</span>
            <span>${computilityData?.baseStorageCapacity || 0}</span>
        </div>
        <div class="item">
            <span>基地空闲存储空间容量</span>
            <span>${computilityData?.baseIdlestorageCapacity || 0}</span>
        </div>
        <div class="item">
            <span>基地上行网络带宽总量</span>
            <span>${computilityData?.baseUploadBandwidthCapacity || 0}</span>
        </div>
        <div class="item">
            <span>基地空闲上行网络带宽</span>
            <span>${
              computilityData?.baseIdleuploadBandwidthCapacity || 0
            }</span>
        </div>
        <div class="item">
            <span>基地下行网络带宽总量</span>
            <span>${computilityData?.baseDownloadBandwidthCapacity || 0}</span>
        </div>
        <div class="item">
            <span>基地空闲下行网络带宽</span>
            <span>${
              computilityData?.baseIdledownloadBandwidthCapacity || 0
            }</span>
        </div>
        <div class="item">
            <span>基地GPU服务器数量</span>
            <span>${computilityData?.baseGpuserverNumber || 0}</span>
        </div>
        <div class="item">
            <span>基地GPU总核数</span>
            <span>${computilityData?.baseGpuScores || 0}</span>
        </div>
        <div class="item">
            <span>基地空闲GPU核数</span>
            <span>${computilityData?.baseIdlegpuScores || 0}</span>
        </div>
        <div class="item">
            <span>基地NPU服务器数量</span>
            <span>${computilityData?.baseNpuServerNumber || 0}</span>
        </div>
        <div class="item">
            <span>基地NPU总核数</span>
            <span>${computilityData?.baseNpuScores || 0}</span>
        </div>
        <div class="item">
            <span>基地空闲NPU核数</span>
            <span>${computilityData?.baseIdlenpuScores || 0}</span>
        </div>
        <div class="item">
            <span>基地FP16总算力</span>
            <span>${computilityData?.baseFp16Computility || 0}</span>
        </div>
        <div class="item">
            <span>基地空闲FP16算力</span>
            <span>${computilityData?.baseIdlefp16Computility || 0}</span>
        </div>
        <div class="item">
            <span>基地FP32总算力</span>
            <span>${computilityData?.baseFp32Computility || 0}</span>
        </div>
        <div class="item">
            <span>基地空闲FP32算力</span>
            <span>${computilityData?.baseIdlefp32Computility || 0}</span>
        </div>
        <div class="item">
            <span>基地显存总量</span>
            <span>${computilityData?.baseGraphicsMemoryCapacity || 0}</span>
        </div>
        <div class="item">
            <span>基地空闲显存</span>
            <span>${computilityData?.baseIdlegraphicsMemoryCapacity || 0}</span>
        </div>
        </div>
    `;
};

4. 接口数据

把moke的接口数据也贴下，方便各位看代码