67 lines
1.5 KiB
JavaScript
67 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,
|
||
|
|
);
|
||
|
|
|
||
|
|
export default function trendChart({ labels = [], series = [] } = {}) {
|
||
|
|
return {
|
||
|
|
chart: null,
|
||
|
|
|
||
|
|
init() {
|
||
|
|
this.chart = new Chart(this.$refs.canvas, {
|
||
|
|
type: 'line',
|
||
|
|
data: this.data(labels, series),
|
||
|
|
options: {
|
||
|
|
responsive: true,
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
interaction: { mode: 'index', intersect: false },
|
||
|
|
scales: {
|
||
|
|
y: { beginAtZero: true, ticks: { precision: 0 } },
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
data(labels, series) {
|
||
|
|
return {
|
||
|
|
labels,
|
||
|
|
datasets: series.map((one, index) => ({
|
||
|
|
label: one.name,
|
||
|
|
data: one.values,
|
||
|
|
borderColor: this.palette(index),
|
||
|
|
backgroundColor: this.palette(index),
|
||
|
|
spanGaps: false,
|
||
|
|
tension: 0.3,
|
||
|
|
})),
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
palette(index) {
|
||
|
|
return ['#3b82f6', '#10b981'][index % 2];
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy() {
|
||
|
|
this.chart?.destroy();
|
||
|
|
this.chart = null;
|
||
|
|
},
|
||
|
|
};
|
||
|
|
}
|