修改图表

src/views/Mechanics/components/ringChart.vue

@@ -12,10 +12,10 @@
 </template>
 
 <script setup lang='ts'>
-import { ref, onMounted, onUnmounted, getCurrentInstance,watch,onUpdated } from 'vue'
+import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated } from 'vue'
 const { proxy } = getCurrentInstance() as any;
 import { useI18n } from 'vue-i18n'
-let {t} = useI18n();
+let { t } = useI18n();
 let ringRef = ref();
 let ringChart = null;
 const prop = defineProps({
@@ -32,7 +32,7 @@ const init = () => {
                 color: "#fff",
                 fontSize: 20,
             },
-            left:'center'
+            left: 'center'
         },
         tooltip: {
             trigger: "item",
@@ -50,11 +50,11 @@ const init = () => {
             {
                 name: "",
                 type: "pie",
-                radius: ["20%", "70%"],
+                radius: ["40%", "70%"],
                 center: ["50%", "45%"],
                 avoidLabelOverlap: false,
                 itemStyle: {
-                    borderRadius: 5,
+                    borderRadius: 10,
                     // borderColor: '#fff',
                     borderWidth: 2,
 
@@ -64,12 +64,12 @@ const init = () => {
                     formatter(params) {
                         return `${params.name} \n${(params.value / prop.total * 100).toFixed(2)}%`
                     },
-                    fontSize:20
+                    fontSize: 20
                 },
                 labelLine: {
                     show: true,
                 },
-                top:'20%',
+                top: '20%',
                 data: prop.data,
             },
         ],