vue中如何使用echarts实现地图数据绑定、获取后端接口

上一篇文章介绍了地图中如何更新数据，这篇介绍一下环形图表中数据的更新。

可以去使用定时器驱动数据更新

前端代码实现

<template>
  <div id="centreLeft1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span style="color: #5cd9e8">
          <icon name="chart-bar"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">设备情况</span>
          <dv-decoration-3
              style="
              width: 1.25rem;
              height: 0.25rem;
              position: relative;
              top: -0.0375rem;
            "
          />
        </div>
      </div>
      <div class="d-flex jc-center flex-column" style="align-items: center;">
        <span style="text-align: center;font-size: 15px;color: #00D1B2;margin-top: 10px;">
          在线率
        </span>
        <dv-decoration-9 style="width:150px;height:150px;margin-top: 20px;">
          {{ onlineRate }} <!-- 在线率显示 -->
        </dv-decoration-9>
      </div>
      <div class="bottom-data">
        <div class="item-box" v-for="(item, index) in numberData" :key="index">
          <div class="d-flex">
            <dv-digital-flop
                :config="item.number"
                style="width: 2.5rem; height: 0.625rem"
            />
          </div>
          <p class="text" style="text-align: center">
            {{ item.text }}
            <span class="colorYellow">(件)</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: {
        data: [
          {
            name: "在线设备",
            value: 0, // 初始化为0
          },
          {
            name: "离线设备",
            value: 0, // 初始化为0
          },
        ],
        color: ["#00baff", "#3de7c9"], // 颜色
        lineWidth: 20,
        radius: "55%",
        activeRadius: "60%",
        digitalFlopStyle: {
          fontSize: 15,
        },
        showOriginValue: true,
      },
      onlineRate: '0%', // 在线率
      numberData: [
        {
          number: {
            number: [0], // 在线数
            toFixed: 0,
            content: "{nt}",
          },
          text: "在线数",
        },
        {
          number: {
            number: [0], // 离线数
            toFixed: 0,
            content: "{nt}",
          },
          text: "离线数",
        }
      ],
    };
  },
  mounted() {
    this.changeTiming();
    this.fetchSubjectSum(); // 初始加载时获取设备在线和离线数量
  },
  methods: {
    changeTiming() {
      setInterval(() => {
        this.fetchSubjectSum(); // 定时获取设备在线情况
      }, 300000); // 每5分钟获取一次
    },
    async fetchSubjectSum() {
      try {
        const { data } = await this.$http.get("http://localhost:8081/ktsEcloud/DeviceController/getdata");

        console.log("API响应:", data); // 输出 API 响应以便调试

        if (data.code === 200) {
          const resultData = data.data; // 获取在线和总数量
          const onlineCount = parseInt(resultData.OnlineCount, 10); // 转换为整数
          const totalCount = parseInt(resultData.TotalCount, 10); // 转换为整数
          const offlineCount = parseInt(resultData.OfflineCount, 10); // 转换为整数

          // 更新环形图表的数据
          this.config.data[0].value = onlineCount; // 在线设备
          this.config.data[1].value = offlineCount; // 离线设备

          this.$set(this.config.data, 0, { ...this.config.data[0], value: onlineCount });
          this.$set(this.config.data, 1, { ...this.config.data[1], value: offlineCount });

          // 更新在线率的显示
          this.onlineRate = ((onlineCount / totalCount) * 100).toFixed(2) + '%'; // 设置在线率

          // 更新在线数和离线数
          this.numberData[0].number.number[0] = onlineCount;
          this.numberData[1].number.number[0] = offlineCount;

          // 更新在线数和离线数
          this.$set(this.numberData[0].number.number, 0, onlineCount);
          this.$set(this.numberData[1].number.number, 0, offlineCount);

          console.log("在线设备数:", onlineCount, "离线设备数:", offlineCount); // 输出在线和离线设备数
        } else {
          console.error("请求失败:", data.msg);
        }
      } catch (error) {
        console.error("API请求错误:", error);
      }
    },
  },
};
</script>

<style lang="scss">
#centreLeft1 {
  padding: 0.2rem;
  height: 40vh;
  min-width: 3.75rem;
  border-radius: 0.0625rem;
  .bg-color-black {
    height: 4.8125rem;
    border-radius: 0.125rem;
  }
  .text {
    color: #c3cbde;
  }
  .bottom-data {
    .item-box {
      float: right;
      position: relative;
      width: 50%;
      color: #d3d6dd;
    }
  }
}
</style>

效果图