初始提交

2025-09-04 16:27:57 +08:00
commit f2faa2d5fd
1076 changed files with 478489 additions and 0 deletions
--- a/src/views/backOfficeSystem/patrolStatistics/interfaceAlarm/components/pie1.vue
+++ b/src/views/backOfficeSystem/patrolStatistics/interfaceAlarm/components/pie1.vue
@ -0,0 +1,120 @@
+<template>
+  <div class="ech">
+    <div id="circlecz" style="width: 100%; height: 260px"></div>
+  </div>
+</template>
+
+<script setup>
+import * as echarts from "echarts";
+import { ref, onMounted, defineProps, watch } from "vue";
+const props = defineProps({
+  data: { type: Array }
+});
+watch(
+  () => props.data,
+  () => {
+    lineChartFn();
+  }
+);
+function lineChartFn() {
+  var chartDom = document.getElementById("circlecz");
+  var myChart = echarts.init(chartDom, "dark");
+  var option;
+  var scale = 1;
+  var echartData = props.data
+  var rich = {
+    yellow: {
+      color: "#ffc72b",
+      fontSize: 14 * scale,
+      padding: [5, 4],
+      align: "center"
+    },
+    total: {
+      color: "#ffc72b",
+      fontSize: 14 * scale,
+      align: "center"
+    },
+    white: {
+      color: "#fff",
+      align: "center",
+      fontSize: 14 * scale,
+      padding: [0, 0]
+    },
+    blue: {
+      color: "#49dff0",
+      fontSize: 14 * scale,
+      align: "center"
+    }
+  };
+
+  option = {
+    backgroundColor: "rgba(0,0,0,0)",
+    legend: {
+      orient: "vertical",
+      left: 0,
+      top: 5
+    },
+    series: [
+      {
+        name: "今日警情处置分析图",
+        type: "pie",
+        radius: ["32%", "50%"],
+        hoverAnimation: false,
+        color: [
+          "#c487ee",
+          "#deb140",
+          "#49dff0",
+          "#034079",
+          "#6f81da",
+          "#00ffb4"
+        ],
+        label: {
+          normal: {
+            formatter: function (params, ticket, callback) {
+              var total = 0; //考生总数量
+              var percent = 0; //考生占比
+              echartData.forEach(function (value, index, array) {
+                total += value.value;
+              });
+              percent = ((params.value / total) * 100).toFixed(1) != NaN ? ((params.value / total) * 100).toFixed(1):0;
+              return (
+                "{white|" +
+                params.name +
+                "}\n{yellow|" +
+                params.value +
+                "}\n{blue|" +
+                percent +
+                "%}"
+              );
+            },
+            rich: rich
+          }
+        },
+        data: echartData
+      }
+    ]
+  };
+
+  option && myChart.setOption(option);
+  document.getElementById("circlecz").setAttribute("_echarts_instance_", "");
+}
+onMounted(() => {
+  lineChartFn();
+  window.addEventListener("resize", () => {
+    lineChartFn();
+  });
+  window.onresize = function () {
+    lineChartFn();
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+.ech {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+}
+</style>