- npm updates - new SearchMap.vue component
This commit is contained in:
parent
7bc9f90cca
commit
a7142f694f
74 changed files with 3360 additions and 3577 deletions
|
@ -1,62 +1,54 @@
|
|||
<script setup>
|
||||
import { ref, watch, computed, onMounted } from 'vue'
|
||||
import {
|
||||
Chart,
|
||||
LineElement,
|
||||
PointElement,
|
||||
LineController,
|
||||
LinearScale,
|
||||
CategoryScale,
|
||||
Tooltip
|
||||
} from 'chart.js'
|
||||
import { ref, watch, computed, onMounted } from 'vue';
|
||||
import { Chart, LineElement, PointElement, LineController, LinearScale, CategoryScale, Tooltip } from 'chart.js';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const root = ref(null)
|
||||
const root = ref(null);
|
||||
|
||||
let chart
|
||||
let chart;
|
||||
|
||||
Chart.register(LineElement, PointElement, LineController, LinearScale, CategoryScale, Tooltip)
|
||||
Chart.register(LineElement, PointElement, LineController, LinearScale, CategoryScale, Tooltip);
|
||||
|
||||
onMounted(() => {
|
||||
chart = new Chart(root.value, {
|
||||
type: 'line',
|
||||
data: props.data,
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: {
|
||||
display: false
|
||||
chart = new Chart(root.value, {
|
||||
type: 'line',
|
||||
data: props.data,
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: {
|
||||
display: false,
|
||||
},
|
||||
x: {
|
||||
display: true,
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
x: {
|
||||
display: true
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const chartData = computed(() => props.data);
|
||||
|
||||
watch(chartData, (data) => {
|
||||
if (chart) {
|
||||
chart.data = data;
|
||||
chart.update();
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const chartData = computed(() => props.data)
|
||||
|
||||
watch(chartData, data => {
|
||||
if (chart) {
|
||||
chart.data = data
|
||||
chart.update()
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="root" />
|
||||
<canvas ref="root" />
|
||||
</template>
|
||||
|
|
Loading…
Add table
editor.link_modal.header
Reference in a new issue