From f713211ee471c7c3232bff560c43a2adb79147b4 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Wed, 5 Jun 2024 14:31:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/prose/Chart.global.vue | 23 +++++++++++++++++------
 pages/mdc.vue                     |  2 +-
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/components/prose/Chart.global.vue b/components/prose/Chart.global.vue
index 9372995..2b815eb 100644
--- a/components/prose/Chart.global.vue
+++ b/components/prose/Chart.global.vue
@@ -5,6 +5,8 @@
 </template>
 <script setup>
 import { Chart } from 'chart.js/auto';
+const colorMode = useColorMode()
+
 const props = defineProps({
     type: {
         type: String,
@@ -23,18 +25,27 @@ const props = defineProps({
         default: () => []
     }
 })
+let chart
 onMounted(() => {
-    new Chart(document.getElementById('chart'), {
+    chart = new Chart(document.getElementById('chart'), {
         type: props.type,
         data: {
             labels: props.labels,
-            datasets: [
-                {
-                    label: props.title,
-                    data: props.data
+            datasets: props.data
+        },
+        options: {
+            plugins: {
+                title: {
+                    display: true,
+                    text: props.title,
                 }
-            ]
+            }
         }
     })
 })
+watch(()=> colorMode.value, (value) => {
+    let color = '#e5e7eb'
+    if (value === 'dark') color = '#1f2937'
+    Chart.defaults.borderColor = color
+}, { immediate: true, deep: true })
 </script>
diff --git a/pages/mdc.vue b/pages/mdc.vue
index c3fc476..4c6bbba 100644
--- a/pages/mdc.vue
+++ b/pages/mdc.vue
@@ -5,6 +5,6 @@
 </template>
 <script setup>
 const mdStr = `
-::ProseChart{title='langchain-ai/langchain [2023-06-05,2024-06-04] Star Data' :labels='["2023-06-05","2023-06-12"]' :data='[43071,44946]'}
+::ProseChart{type='line' title='langchain-ai/langchain [2023-06-05,2024-06-04] Star Data' :labels='["2023-06-05","2023-06-12"]' :data='[{"label": "star数量", "data": [43071,44946]}]' }
 `
 </script>
\ No newline at end of file
-- 
GitLab