vue-schart

📊 Vue.js wrapper for sChart.js

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.