HomeAccounting

1
<template>
2
    <div>
3
        <div id="accumulateChart"></div>
4
        <v-btn icon color="primary" @click="getData()">
5
            <v-icon>refresh</v-icon>
6
        </v-btn>
7
    </div>
8

9
</template>
10

11
<script>
12
    import Chart from 'c3';
13

14
    export default {
15
        name: "dynamic-accumulate-chart-component",
16
        data: () => ({
17
            months: {},
18
            sum: {},
19
        }),
20
        methods: {
21
            getData() {
22
                this.$store.commit('setPreloader', true);
23

24
                axios.get('/analitycs/dynamic-accumulate')
25
                    .then(response=> {
26
                        this.months = response.data[0];
27
                        this.sum = response.data[1];
28

29
                        this.$store.commit('setPreloader', false);
30

31
                    })
32
                    .catch(error => {
33
                        this.$store.commit('AlertError', error.message);
34
                        this.$store.commit('setPreloader', false);
35
                    });
36
            },
37
            chartGenerate() {
38
                Chart.generate({
39
                    bindto: '#accumulateChart',
40
                    data: {
41
                        columns: [
42
                            this.sum
43
                        ]
44
                    },
45
                    axis: {
46
                        x: {
47
                            label: "Месяцы",
48
                            type: 'category',
49
                            categories: this.months,
50
                        },
51
                        y: {
52
                            label: 'Сумма',
53
                        }
54
                    }
55
                });
56
            }
57
        },
58
        mounted() {
59
            this.getData();
60
        },
61
        computed: {
62

63
        },
64
        watch: {
65
            months() {
66
                this.chartGenerate();
67
            }
68
        }
69
    }
70
</script>
71

72
<style scoped>
73

74
</style>