feat: 3d饼图修改

src/views/workbench/components/chart/pie3D.vue

@@ -1,22 +1,25 @@
 <template>
-  <div
-    style="display: flex; justify-content: center; width: 100%; height: 278px"
-  >
-    <div style="position: relative; width: 100%; height: 100%">
-      <!-- <img class="pie_img" :src="pieBg" alt="" /> -->
-      <vue-chart
-        :option="chartOption"
-        style="position: absolute; width: 100%; height: 100%"
-      />
-    </div>
+  <div style="width: 100%; height: 100%">
+    <vue-chart :option="chartOption" style="width: 100%; height: 100%" />
   </div>
 </template>
 <script lang="ts" setup>
 import VueChart from "./VueChart.vue";
 // import * as echarts from "echarts";
 import "echarts-gl";
-import { computed } from "vue";
-// import pieBg from "@/assets/screen/pie_bg.png";
+import { Ref, computed, ref, watch } from "vue";
+import { useAppStoreHook } from "@/store/modules/app";
+import { EchartOptions, delay, useDark, useECharts } from "@pureadmin/utils";
+const { isDark } = useDark();
+
+const theme: EchartOptions["theme"] = computed(() => {
+  return isDark.value ? "dark" : "light";
+});
+
+const pieChartRef = ref<HTMLDivElement | null>(null);
+const { resize } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
+  theme
+});
 
 const props = defineProps({
   data: {
@@ -315,6 +318,13 @@ function getPie3D(pieData, internalDiameterRatio) {
 const chartOption = computed(() => {
   return getPie3D(props.data, 0);
 });
+
+watch(
+  () => useAppStoreHook().getSidebarStatus,
+  () => {
+    delay(600).then(() => resize());
+  }
+);
 </script>
 
 <style scoped>