表单处理

src/views/schedule/components/echarts/RoundChart.vue

@@ -18,7 +18,9 @@ const props = defineProps({
 let chart = null;
 const echart = ref(null)
 
-watch(() => props.ratio, (ratio) => {
+watch(() => [
+    props.ratio
+], ([ratio]) => {
     setOptions(ratio, 100 - ratio)
 })
 
@@ -41,42 +43,44 @@ const resizeEvent = () => {
 
 //设置图表
 const setOptions = (val1,val2) => {
-    chart.setOption({
-        tooltip: {
-            trigger: "item",
-            formatter: "{d}%"
-        },
-        series: [
-            {
-                name: 'Access From',
-                type: 'pie',
-                radius: ['80%', '90%'],
-                center: ["50%", "50%"],
-                label: {
-                    show: false,
-                    position: "center",
-                },
-                labelLine: {
-                    show: false,
-                },
-                data: [
-                    {
-                        value: val1,
-                        name: "完成率",
-                        itemStyle: {
-                            color: "#0081ff",
-                        }
+    nextTick(() => {
+        chart.setOption({
+            tooltip: {
+                trigger: "item",
+                formatter: "{d}%"
+            },
+            series: [
+                {
+                    name: 'Access From',
+                    type: 'pie',
+                    radius: ['80%', '90%'],
+                    center: ["50%", "50%"],
+                    label: {
+                        show: false,
+                        position: "center",
                     },
-                    {
-                        value: val2,
-                        name: "",
-                        itemStyle: {
-                            color: "#F5F5F5",
-                        }
+                    labelLine: {
+                        show: false,
                     },
-                ]
-            }
-        ]
+                    data: [
+                        {
+                            value: val1,
+                            name: "完成率",
+                            itemStyle: {
+                                color: "#0081ff",
+                            }
+                        },
+                        {
+                            value: val2,
+                            name: "",
+                            itemStyle: {
+                                color: "#F5F5F5",
+                            }
+                        },
+                    ]
+                }
+            ]
+        })
     })
 }