File size: 1,285 Bytes
b86d7f0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<template>
<div class="bg-white p-6 rounded-2xl shadow-md">
<h2 class="text-xl font-semibold mb-4">{{ title }}</h2>
<div class="h-72">
<div class="w-full h-64 relative">
<canvas ref="canvas" class="absolute inset-0 w-full h-full"></canvas>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref, watch, onUnmounted, defineProps } from 'vue'
import { Chart } from 'chart.js/auto'
const props = defineProps({
chartData: Object,
title: String
})
const canvas = ref(null)
let chartInstance = null
const createChart = () => {
if (chartInstance) {
chartInstance.destroy()
}
chartInstance = new Chart(canvas.value, {
type: 'line',
data: props.chartData,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom'
}
},
scales: {
x: { ticks: { color: '#6b7280' } },
y: { ticks: { color: '#6b7280' } }
},
elements: {
line: {
tension: 0.4 // smooth curves
}
}
}
})
}
onMounted(() => {
createChart()
})
watch(() => props.chartData, () => {
createChart()
})
onUnmounted(() => {
if (chartInstance) {
chartInstance.destroy()
}
})
</script>
|