124

src/views/backOfficeSystem/systemConfig/useQk/pie.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <div id="circlecz" style="width: 500px; height: 260px"></div>
+  </div>
+</template>
+
+<script setup>
+import * as echarts from "echarts";
+import { ref, onMounted, watch, defineProps } from "vue";
+const props = defineProps({
+  data: { type: Array }
+});
+watch(
+  () => props.data,
+  () => {
+    lineChartFn();
+  },
+  {
+      deep:true
+  }
+);
+function lineChartFn() {
+  var chartDom = document.getElementById("circlecz");
+  var myChart = echarts.init(chartDom, "dark");
+  var option;
+  var scale = 1;
+//   var echartData = props.data.map((item) => {
+//     return {
+//       value: item.value,
+//       name: item.name
+//     };
+//   });
+  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)",
+    // title:{
+    //     show:true,
+    //     text: '使用次数'
+    // },
+    legend: {
+      orient: "vertical",
+      right: 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) {
+              return (
+                "{white|" +
+                params.name +
+                "}\n{yellow|" +
+                params.value +
+                "}\n{blue|" +
+                params.percent +
+                "%}"
+              );
+            },
+            rich: rich
+          }
+        },
+        data: props.data
+      }
+    ]
+  };
+  option && myChart.setOption(option);
+  window.onresize = function () {
+    myChart.resize();
+  };
+  document.getElementById("circlecz").setAttribute("_echarts_instance_", "");
+}
+onMounted(() => {
+  lineChartFn();
+});
+</script>
+
+<style lang="scss" scoped>
+</style>