2018-08-23 20:37:19 +00:00
|
|
|
import Vue from 'vue';
|
|
|
|
import { Line } from 'vue-chartjs';
|
2018-08-23 22:02:52 +00:00
|
|
|
import * as mergeOptions from 'merge-options';
|
2018-08-23 20:37:19 +00:00
|
|
|
|
|
|
|
export default Vue.extend({
|
|
|
|
extends: Line,
|
|
|
|
props: {
|
|
|
|
data: {
|
|
|
|
required: true
|
|
|
|
},
|
|
|
|
opts: {
|
|
|
|
required: false
|
|
|
|
}
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
data() {
|
|
|
|
this.render();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.render();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
render() {
|
2018-08-23 22:02:52 +00:00
|
|
|
this.renderChart(this.data, mergeOptions({
|
2018-08-23 22:17:17 +00:00
|
|
|
responsive: true,
|
|
|
|
maintainAspectRatio: false,
|
2018-08-23 20:37:19 +00:00
|
|
|
scales: {
|
|
|
|
xAxes: [{
|
|
|
|
type: 'time',
|
|
|
|
distribution: 'series'
|
|
|
|
}]
|
2018-08-23 23:56:57 +00:00
|
|
|
},
|
|
|
|
tooltips: {
|
2018-08-24 00:39:16 +00:00
|
|
|
intersect: false,
|
|
|
|
mode: 'x',
|
|
|
|
position: 'nearest'
|
2018-08-23 20:37:19 +00:00
|
|
|
}
|
|
|
|
}, this.opts || {}));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|