SynthesisManagement/src/views/screens/screen-components/EquipmentMonitoring.vue

<template>
  <div class="screen-common-component">
    <ScreenComHeader :module-id="moduleId" title="设备监控" />
    <div ref="chartRef" class="charts-container"></div>
  </div>
</template>

<script lang="ts" setup>
import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
import * as echarts from "echarts";
import {
  allChartColors,
  chartLegend,
} from "@/views/screens/configs/chartsConfig";

const props = defineProps({
  moduleId: {
    type: String,
    required: true,
  },
});

const chartRef = ref(null);

const options = {
  color: allChartColors,
  tooltip: {
    trigger: "item",
  },
  legend: chartLegend,
  series: [
    {
      name: "设备监控",
      type: "pie",
      radius: ["40%", "70%"],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: "center",
        color: "#fff",
        formatter: function () {
          return "设备总数：1000";
        },
      },
      data: [
        { value: 1048, name: "运行" },
        { value: 735, name: "空闲" },
        { value: 580, name: "维护" },
        { value: 484, name: "维修" },
      ],
    },
  ],
};

onMounted(() => {
  const chart = echarts.init(chartRef.value);
  chart.setOption(options);
});
</script>

<style lang="scss" scoped></style>