EquipmentMonitoring.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <template>
  2. <div class="screen-common-component">
  3. <ScreenComHeader :module-id="moduleId" title="设备监控" />
  4. <div ref="chartRef" class="charts-container"></div>
  5. </div>
  6. </template>
  7. <script lang="ts" setup>
  8. import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
  9. import * as echarts from "echarts";
  10. import {
  11. allChartColors,
  12. chartLegend,
  13. } from "@/views/screens/configs/chartsConfig";
  14. const props = defineProps({
  15. moduleId: {
  16. type: String,
  17. required: true,
  18. },
  19. });
  20. const chartRef = ref(null);
  21. const options = {
  22. color: allChartColors,
  23. tooltip: {
  24. trigger: "item",
  25. },
  26. legend: chartLegend,
  27. series: [
  28. {
  29. name: "设备监控",
  30. type: "pie",
  31. radius: ["40%", "70%"],
  32. avoidLabelOverlap: false,
  33. label: {
  34. show: true,
  35. position: "center",
  36. color: "#fff",
  37. formatter: function () {
  38. return "设备总数:1000";
  39. },
  40. },
  41. data: [
  42. { value: 1048, name: "运行" },
  43. { value: 735, name: "空闲" },
  44. { value: 580, name: "维护" },
  45. { value: 484, name: "维修" },
  46. ],
  47. },
  48. ],
  49. };
  50. onMounted(() => {
  51. const chart = echarts.init(chartRef.value);
  52. chart.setOption(options);
  53. });
  54. </script>
  55. <style lang="scss" scoped></style>