From 014d9958680b43fefbf3d52ec03b50de41a67ea5 Mon Sep 17 00:00:00 2001
From: JINGYJ <1458671527@qq.com>
Date: Thu, 11 Jan 2024 16:00:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=203d=E9=A5=BC=E5=9B=BE=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../workbench/components/chart/pie3D.vue | 34 ++++++++++++-------
1 file changed, 22 insertions(+), 12 deletions(-)
diff --git a/src/views/workbench/components/chart/pie3D.vue b/src/views/workbench/components/chart/pie3D.vue
index 8bbc167..962630f 100644
--- a/src/views/workbench/components/chart/pie3D.vue
+++ b/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>