60 lines
1.5 KiB
JavaScript
60 lines
1.5 KiB
JavaScript
import {
|
|
CategoryScale,
|
|
Chart,
|
|
Filler,
|
|
Legend,
|
|
LinearScale,
|
|
LineController,
|
|
LineElement,
|
|
PointElement,
|
|
Tooltip,
|
|
} from 'chart.js';
|
|
|
|
Chart.register(
|
|
CategoryScale,
|
|
Filler,
|
|
Legend,
|
|
LinearScale,
|
|
LineController,
|
|
LineElement,
|
|
PointElement,
|
|
Tooltip,
|
|
);
|
|
|
|
const palette = ['#3b82f6', '#10b981'];
|
|
|
|
export default function trendChart({ labels = [], series = [] } = {}) {
|
|
return {
|
|
chart: null,
|
|
|
|
init() {
|
|
this.chart = new Chart(this.$refs.canvas, {
|
|
type: 'line',
|
|
data: {
|
|
labels,
|
|
datasets: series.map((one, index) => ({
|
|
label: one.name,
|
|
data: one.values,
|
|
borderColor: palette[index % palette.length],
|
|
backgroundColor: palette[index % palette.length],
|
|
spanGaps: false,
|
|
tension: 0.3,
|
|
})),
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
interaction: { mode: 'index', intersect: false },
|
|
scales: {
|
|
y: { beginAtZero: true, ticks: { precision: 0 } },
|
|
},
|
|
},
|
|
});
|
|
},
|
|
|
|
destroy() {
|
|
this.chart?.destroy();
|
|
this.chart = null;
|
|
},
|
|
};
|
|
}
|