vue3的js和ts代码上传

smart-admin-web/javascript-ant-design-vue3/src/views/system/home/components/echarts/pie.vue

@@ -0,0 +1,78 @@
+<template>
+  <default-home-card icon="PieChartTwoTone" title="【1024创新实验室】上班摸鱼次数">
+    <div class="echarts-box">
+      <div class="pie-main" id="pie-main"></div>
+    </div>
+  </default-home-card>
+</template>
+<script setup>
+import DefaultHomeCard from "/@/views/system/home/components/default-home-card.vue";
+import * as echarts from 'echarts';
+import {onMounted} from "vue";
+
+onMounted(() => {
+  init();
+});
+
+function init(){
+  let option = {
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      top: '5%',
+      left: 'center'
+    },
+    series: [
+      {
+        name: '摸鱼次数',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        label: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: '40',
+            fontWeight: 'bold'
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: [
+          { value: 10, name: '初晓' },
+          { value: 8, name: '善逸' },
+          { value: 3, name: '胡克' },
+          { value: 1, name: '罗伊' },
+        ]
+      }
+    ]
+  };
+  let chartDom = document.getElementById("pie-main");
+  if (chartDom) {
+    let myChart = echarts.init(chartDom);
+    option && myChart.setOption(option);
+  }
+}
+</script>
+<style lang='less' scoped>
+.echarts-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .pie-main {
+    width: 260px;
+    height: 260px;
+    background: #fff;
+  }
+}
+</style>