Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vue-schart : vue.js 的图表组件 #17

Open
lin-xin opened this issue Jun 19, 2017 · 1 comment
Open

vue-schart : vue.js 的图表组件 #17

lin-xin opened this issue Jun 19, 2017 · 1 comment
Labels

Comments

@lin-xin
Copy link
Owner

lin-xin commented Jun 19, 2017

介绍

vue-schart 是使用vue.js封装了sChart.js图表库的一个小组件。支持vue.js 1.x & 2.x

sChart.js 作为一个小型简单的图表库,没有过多的图表类型,只包含了柱状图、折线图、饼状图和环形图四种基本的图表。麻雀虽小,五脏俱全。sChart.js 基本可以满足这四种图表的需求。而它的小,体现在它的体积上,代码只有 8kb,如果经过服务器的Gzip压缩,那就更小了,因此不用担心造成项目代码冗余。

该库使用 canvas 实现,兼容 IE9 以上浏览器。

效果

demo

使用指南

安装:

npm install vue-schart -S

在vue组件中使用:

<template>
    <div id="app">
        <schart :canvasId="canvasId"
            :type="type"
            :width="width"
            :height="height"
            :data="data"
            :options="options"
        ></schart>
    </div>
</template>
<script>
import Schart from 'vue-schart';
export default {
    data() {
        return {
            canvasId: 'myCanvas',
            type: 'bar',
            width: 500,
            height: 400,
            data: [
                {name: '2014', value: 1342},
                {name: '2015', value: 2123},
                {name: '2016', value: 1654},
                {name: '2017', value: 1795},
            ],
            options: {
                title: 'Total sales of stores in recent years'
            }
        }
    },
    components:{
        Schart
    }
}
</script>

应用

vue-manage-system 后台框架中应用了 vue-schart 组件,体积小,加载快。
演示地址:http://blog.gdfengshuo.com/example/work/#/basecharts

@lin-xin lin-xin added the vue label Jun 19, 2017
@FindChenLinJie
Copy link

在安卓和ios上坐标轴反了,怎么处理

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants