barchart.js
58 lines
| 1 | import { Bar } from 'vue-chartjs' |
| 2 | |
| 3 | export default { |
| 4 | |
| 5 | extends: Bar, |
| 6 | |
| 7 | props: ['data', 'options'], |
| 8 | |
| 9 | data () { |
| 10 | return { |
| 11 | defaultOptions: { |
| 12 | responsive: true, |
| 13 | maintainAspectRatio: false, |
| 14 | scales: { |
| 15 | xAxes: [{ |
| 16 | barPercentage: 0.5, |
| 17 | categoryPercentage: 0.8, |
| 18 | ticks: { |
| 19 | stepSize: 1, |
| 20 | min: 0, |
| 21 | autoSkip: false |
| 22 | } |
| 23 | }], |
| 24 | yAxes: [{ |
| 25 | gridLines: { |
| 26 | display: true |
| 27 | }, |
| 28 | ticks: { |
| 29 | beginAtZero: true, |
| 30 | stepSize: 1, |
| 31 | min: 0, |
| 32 | userCallback: function (label) { |
| 33 | if (Math.floor(label) === label) { |
| 34 | return label |
| 35 | } |
| 36 | } |
| 37 | } |
| 38 | }] |
| 39 | } |
| 40 | } |
| 41 | } |
| 42 | }, |
| 43 | |
| 44 | methods: { |
| 45 | update (reRender) { |
| 46 | if (reRender) { |
| 47 | this.renderChart(this.data, this.options) |
| 48 | } |
| 49 | |
| 50 | this.$data._chart.update() |
| 51 | } |
| 52 | }, |
| 53 | |
| 54 | mounted () { |
| 55 | this.renderChart(this.data, this.options) |
| 56 | } |
| 57 | } |
| 58 |