75 lines
1.4 KiB
JavaScript
75 lines
1.4 KiB
JavaScript
import Vue from 'vue'
|
|
import { Bar, Doughnut, Line } from 'vue-chartjs'
|
|
|
|
Vue.component('BarChart', {
|
|
extends: Bar,
|
|
props: {
|
|
data: { type: Object, required: true },
|
|
options: {
|
|
type: Object,
|
|
required: false,
|
|
default: () => ({
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
legend: { display: true },
|
|
}),
|
|
},
|
|
},
|
|
watch: {
|
|
data() {
|
|
this.renderChart(this.data, this.options)
|
|
},
|
|
},
|
|
mounted() {
|
|
this.renderChart(this.data, this.options)
|
|
},
|
|
})
|
|
|
|
Vue.component('LineChart', {
|
|
extends: Line,
|
|
props: {
|
|
data: { type: Object, required: true },
|
|
options: {
|
|
type: Object,
|
|
required: false,
|
|
default: () => ({
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
legend: { display: true },
|
|
}),
|
|
},
|
|
},
|
|
watch: {
|
|
data() {
|
|
this.renderChart(this.data, this.options)
|
|
},
|
|
},
|
|
mounted() {
|
|
this.renderChart(this.data, this.options)
|
|
},
|
|
})
|
|
|
|
Vue.component('DoughnutChart', {
|
|
extends: Doughnut,
|
|
props: {
|
|
data: { type: Object, required: true },
|
|
options: {
|
|
type: Object,
|
|
required: false,
|
|
default: () => ({
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
legend: { display: true },
|
|
}),
|
|
},
|
|
},
|
|
watch: {
|
|
data() {
|
|
this.renderChart(this.data, this.options)
|
|
},
|
|
},
|
|
mounted() {
|
|
this.renderChart(this.data, this.options)
|
|
},
|
|
})
|