HomeAccounting

1
<template>
2
    <div class="chart-block">
3
        <div class="bar-chart" v-show="visibility"></div>
4
        <div class="pie-chart" v-show="visibility"></div>
5
    </div>
6
</template>
7

8
<script>
9
    import Chart from 'c3';
10
    export default {
11
        name: "pie-chart-component",
12
        props: {
13
            data: {
14
                default: {},
15
            },
16
            visibility: {
17
                type: Boolean,
18
                default: true,
19
            },
20
        },
21
        data: () => ({
22

23
        }),
24
        methods: {
25
            chartGenerate() {
26

27
                Chart.generate({
28
                    bindto: '.pie-chart',
29
                    data: {
30
                        // iris data from R
31
                        columns: this.data,
32
                        type : 'pie',
33
                        /*onclick: function (d, i) { console.log("onclick", d, i); },
34
                        onmouseover: function (d, i) { console.log("onmouseover", d, i); },
35
                        onmouseout: function (d, i) { console.log("onmouseout", d, i); }*/
36
                    }
37
                });
38

39
                Chart.generate({
40
                    bindto: '.bar-chart',
41
                    data: {
42
                        columns: this.data,
43
                        type: 'bar'
44
                    },
45
                    bar: {
46
                        width: {
47
                            ratio: 1 // this makes bar width 50% of length between ticks
48
                        }
49
                        // or
50
                        //width: 100 // this makes bar width 100px
51
                    }
52
                });
53

54
            }
55
        },
56
        mounted() {
57

58
        },
59
        computed: {
60

61
        },
62
        watch: {
63
            data() {
64
                this.chartGenerate();
65
            }
66
        }
67
    }
68
</script>
69

70
<style scoped>
71

72
</style>
73