2021-10-10 08:29:12 +00:00
|
|
|
<script>
|
|
|
|
|
import { Line, mixins } from 'vue-chartjs'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
extends: Line,
|
|
|
|
|
mixins: [mixins.reactiveProp],
|
|
|
|
|
props: {
|
|
|
|
|
// options: {
|
|
|
|
|
// type: Object,
|
|
|
|
|
// default: null,
|
|
|
|
|
// },
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
options: {
|
2021-10-10 09:36:16 +00:00
|
|
|
maintainAspectRatio: false,
|
2021-10-10 08:29:12 +00:00
|
|
|
scales: {
|
|
|
|
|
xAxes: [{
|
|
|
|
|
type: 'time',
|
|
|
|
|
time: {
|
|
|
|
|
unit: 'day',
|
|
|
|
|
},
|
|
|
|
|
ticks: {
|
|
|
|
|
autoskipping: true,
|
|
|
|
|
display: true,
|
|
|
|
|
maxTicksLimit: 15,
|
|
|
|
|
// callback(a, b) {
|
|
|
|
|
// console.log(a, b)
|
|
|
|
|
// },
|
|
|
|
|
},
|
|
|
|
|
}],
|
|
|
|
|
yAxes: [{
|
|
|
|
|
ticks: {
|
|
|
|
|
autoskipping: true,
|
|
|
|
|
display: true,
|
|
|
|
|
maxTicksLimit: 8,
|
|
|
|
|
// callback(a, b) {
|
|
|
|
|
// console.log(a, b)
|
|
|
|
|
// },
|
|
|
|
|
},
|
|
|
|
|
}],
|
|
|
|
|
},
|
|
|
|
|
plugins: {
|
|
|
|
|
legend: {
|
|
|
|
|
display: false,
|
|
|
|
|
labels: {
|
|
|
|
|
color: 'rgb(255, 99, 132)',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.renderChart(this.chartData, this.options)
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
</script>
|
