vue-schart

    2.0.0 • Public • Published

    vue-schart

    📊 Vue.js wrapper for sChart.js

    Downloads Version License

    Support for use at the mobile. Support vue.js 1.x & 2.x

    Usage

    Install:

    npm install vue-schart -S
    

    Use in component:

    <template>
        <div id="app">
            <schart class="wrapper" canvasId="canvas" :options="options" />
        </div>
    </template>
    <script>
        import Schart from 'vue-schart';
        export default {
            data() {
                return {
                    options: {
                        type: "bar",
                        title: {
                            text: "最近一周各品类销售图"
                        },
                        bgColor: "#fbfbfb",
                        labels: ["周一", "周二", "周三", "周四", "周五"],
                        datasets: [
                            {
                                label: "家电",
                                fillColor: "rgba(241, 49, 74, 0.5)",
                                data: [234, 278, 270, 190, 230]
                            },
                            {
                                label: "百货",
                                data: [164, 178, 190, 135, 160]
                            },
                            {
                                label: "食品",
                                data: [144, 198, 150, 235, 120]
                            }
                        ]
                    }
                }
            },
            components:{
                Schart
            }
        }
    </script> 
     
    <style>
    .wrapper{
        width: 7rem;
        height: 5rem;
    }
    </style> 

    Options

    Refer to the documentation for sChart.js.

    License

    MIT license.

    Install

    npm i vue-schart

    DownloadsWeekly Downloads

    1,381

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    11.7 kB

    Total Files

    13

    Last publish

    Collaborators

    • linxin