大屏

src/views/overviewLargeScreen/components/center/chart/draw.tsx

@@ -1,92 +0,0 @@
-import { defineComponent, watch, shallowReactive } from 'vue'
-
-// 声明类型
-const PropsType = {
-  tips: {
-    type: Number,
-    default: 50,
-    require: true
-  },
-  colorObj: {
-    type: Object,
-    default: () => ({
-      textStyle: "#3fc0fb",
-      series: {
-        color: ["#00bcd44a", "transparent"],
-        dataColor: {
-          normal: "#03a9f4",
-          shadowColor: "#97e2f5"
-        }
-      }
-    })
-  }
-} as const
-
-// 定义主体
-export default defineComponent({
-  props: PropsType,
-  setup(props) {
-    // 配置项
-    let options = shallowReactive({title:null,series:null})
-
-    watch(
-      () => props.tips,
-      (val: any) => {
-        options = {
-          title: {
-            text: val * 1 + "%",
-            x: "center",
-            y: "center",
-            textStyle: {
-              color: props.colorObj.textStyle,
-              fontSize: 16
-            }
-          },
-          series: [
-            {
-              type: "pie",
-              radius: ["75%", "80%"],
-              center: ["50%", "50%"],
-              hoverAnimation: false,
-              color: props.colorObj.series.color,
-              label: {
-                normal: {
-                  show: false
-                }
-              },
-              data: [
-                {
-                  value: val,
-                  itemStyle: {
-                    normal: {
-                      color: props.colorObj.series.dataColor.normal,
-                      shadowBlur: 10,
-                      shadowColor: props.colorObj.series.dataColor.shadowColor
-                    }
-                  }
-                },
-                {
-                  value: 100 - val
-                }
-              ]
-            }
-          ]
-        }
-      },
-      {
-        immediate: true,
-        deep: true
-      }
-    )
-
-    return () => {
-      const height = "100px"
-      const width = "120px"
-
-      return <div>
-        <echart options={options} height={height} width={width} />
-      </div>
-    }
-  }
-})
-

src/views/overviewLargeScreen/components/center/chart/draw.vue

@@ -0,0 +1,103 @@
+<template>
+  <div :style="{height,width}" ref="chartRef"></div>
+</template>
+<script setup lang="ts">
+  import { ref, shallowReactive, watch } from "vue";
+  import * as echarts from "echarts";
+  interface ColorObjProps {
+    textStyle: string;
+    series: {
+      color: string[];
+      dataColor: {
+        normal: string;
+        shadowColor: string;
+      };
+    };
+  }
+  const props = withDefaults(defineProps<{
+    tips: number;
+    colorObj: ColorObjProps;
+  }>(), {
+    tips: 50,
+    colorObj: () => ({
+      textStyle: "#3fc0fb",
+      series: {
+        color: ["#00bcd44a", "transparent"],
+        dataColor: {
+          normal: "#03a9f4",
+          shadowColor: "#97e2f5"
+        }
+      }
+    })
+  });
+  const height = "100px";
+  const width = "120px";
+  // 定义 ref
+  const chartRef = ref();
+  // 配置项
+  let options = shallowReactive({ title: null, series: null });
+  // echarts 实例
+  let chartInstance: echarts.ECharts | null = null;
+  watch(
+    () => props.tips,
+    (val: any) => {
+      options = {
+        title: {
+          text: val * 1 + "%",
+          x: "center",
+          y: "center",
+          textStyle: {
+            color: props.colorObj.textStyle,
+            fontSize: 16
+          }
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["75%", "80%"],
+            center: ["50%", "50%"],
+            hoverAnimation: false,
+            color: props.colorObj.series.color,
+            label: {
+              normal: {
+                show: false
+              }
+            },
+            data: [
+              {
+                value: val,
+                itemStyle: {
+                  normal: {
+                    color: props.colorObj.series.dataColor.normal,
+                    shadowBlur: 10,
+                    shadowColor: props.colorObj.series.dataColor.shadowColor
+                  }
+                }
+              },
+              {
+                value: 100 - val
+              }
+            ]
+          }
+        ]
+      };
+      // 手动触发更新
+      if (chartRef.value) {
+        if (!chartInstance) {
+          chartInstance = echarts.init(chartRef.value);
+        }
+        chartInstance.setOption(options);
+      }
+
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+</script>
+
+
+<style scoped lang="scss">
+
+</style>

src/views/overviewLargeScreen/components/center/index.vue

@@ -20,7 +20,7 @@
         <span>
           <i class="iconfont icon-tongji2"></i>
         </span>
-        <span class="fs-xl text mx-2 mb-1">年度负责人组件达标榜</span>
+        <span class="fs-xl text mx-2 mb-1" style="font-size: 12px">年度负责人组件达标榜</span>
         <dv-scroll-ranking-board
           class="dv-scr-rank-board"
           :config="ranking"
@@ -54,7 +54,7 @@
 
 <script setup lang="ts">
   import { reactive, onMounted } from "vue";
-  import Chart from "../center/chart/draw";
+  import Chart from "./chart/draw.vue";
 
   // 下层数据
   const titleDate = [

src/views/overviewLargeScreen/index.vue

@@ -74,7 +74,7 @@
               </div>
               <!-- 中间 -->
               <div>
-                <!-- <Center /> -->
+                 <Center />
               </div>
               <!-- 中间 -->
               <div>
@@ -115,9 +115,10 @@
   import CenterRight2 from "./components/centerRight2/index.vue";
   import CenterLeft1 from './components/centerLeft1/index.vue'
   import CenterRight1 from "./components/centerRight1/index.vue";
+  import Center from "./components/center/index.vue";
   // 未修改的组件
   // import CenterLeft2 from "./components/centerLeft2/index.vue";
-  // import Center from "./components/center/index.vue";
+
 
 
   // * 颜色