图表

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>

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