From 706d7d6dc1d6c34192d6520d21d020d5e7914a8e Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 11 May 2024 13:46:16 +0800
Subject: [PATCH] fix apexchats datalabels

---
 src/App.vue                               | 30 +++++++++++++++++++++++
 src/components/render/DashboardRender.vue |  2 --
 src/main.ts                               |  1 +
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 65e5c7c8..db1233ee 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,6 +11,36 @@ async function setTheme() {
   globalTheme.name.value = themeValue === 'auto' ? autoTheme : themeValue
 }
 
+// ApexCharts 全局配置
+declare global {
+  interface Window {
+    Apex: any
+  }
+}
+
+if (window.Apex) {
+  // 数据标签
+  window.Apex.dataLabels = {
+    formatter: function (_: number, { seriesIndex, w }: { seriesIndex: number; w: any }) {
+      // 如果有小数点，保留两位小数，否则保留整数
+      const data = w.config.series[seriesIndex]
+      return data.toFixed(data % 1 === 0 ? 0 : 1)
+    },
+  }
+  // 图例
+  window.Apex.legend = {
+    labels: {
+      useSeriesColors: true,
+    },
+  }
+  // 标题
+  window.Apex.title = {
+    style: {
+      color: 'rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))',
+    },
+  }
+}
+
 // 页面加载时，加载当前用户数据
 onBeforeMount(async () => {
   setTheme()
diff --git a/src/components/render/DashboardRender.vue b/src/components/render/DashboardRender.vue
index b0a6c8a5..0179fe33 100644
--- a/src/components/render/DashboardRender.vue
+++ b/src/components/render/DashboardRender.vue
@@ -15,8 +15,6 @@ interface RenderProps {
 const elementProps = defineProps({
   config: Object as PropType<RenderProps>,
 })
-
-console.log(elementProps.config)
 </script>
 
 <template>
diff --git a/src/main.ts b/src/main.ts
index 14b05e6d..3895429c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -64,5 +64,6 @@ app
     },
   })
   .use(PerfectScrollbarPlugin)
+  .use(VueApexCharts)
   .mount('#app')
   .$nextTick(() => removeEl('#loading-bg'))