Nutritious Polygonal Meatball

    vchart

    1.0.0 • Public • Published

    vchart

    Vue Chartist.js Component

    github npm npm npm size dep

    浏览器版本: 3.78kb, GZip压缩后1.42kb

    Usage / 使用说明

    Installation / 安装

    yarn add vchart
    # or 
    npm i -S vchart

    Props

    • ratio - String class ratio of Chartist. see values on / 参考: Chartist web site

    • type - String (required / 必选) chart type, possible values: / 支持的类型有:

      • Line
      • Bar
      • Pie
    • data - Object data object like this:

    // 示例:
    const data = {
        labels: ["A", "B", "C"],
        series:[[1, 3, 2], [4, 6, 5]]
    }
    • options - Object options object, see defaultOptions on / 默认配置参考 API Documentation / API 文档

    • empty - String message when no data / 无数据时显示的文字消息

    • event-handlers - Array a special array to use chart.on(event, function)

    // 处理 `chart.on(event, function)` 事件
    const eventHandlers = [{
        event: 'draw',
        fn() {
            // animation / 动画
        }
    }, {
        // an other event hander / 另一个事件处理器
    }]
    • responsive-options - Array object for responsive options / 响应式参数对象

    Example / 示例

    Demo / 在线示例: https://vchart.js.cool/

    Single File Components / 单文件组件中使用

    <template>
    <vchart
        ratio="ct-major-second"
        :type="type"
        :data="data"
        :options="options" >
    </vchart>
    </template>
     
    <script>
    import vchart from 'vchart';
     
    exports default {
      components: {
        vchart
      },
      data() {
        return {
           data: {
                labels: ["周一", "周二", "周三", "周四", "周五"],
                series: [[4, 3.8, 3, 5, 4.1]]
            },
            type: 'Line',
            options: {
                fullWidth: true,
                lineSmooth: false
            }
        };
      }
    }
    </script>

    Browser / 浏览器中使用

    <!doctype html>
    <html>
    <head>
      <!-- Import CSS / 引用CSS -->
      <link rel="stylesheet" href="//unpkg.com/chartist/dist/chartist.css">
    </head>
    <body>
     
    <!-- Example / 示例 -->
    <vchart
        ratio="ct-major-second"
        :type="type"
        :data="chartData"
        :options="options" >
    </vchart>
     
    <!-- Import Scripts / 引用JS资源 -->
    <script src="//unpkg.com/vue"></script>
    <script src="//unpkg.com/chartist"></script>
    <script src="//unpkg.com/vchart"></script>
    <script>
      new Vue({
        el: '#app',
        components: {
            vchart
        },
        data() {
            return {
                data: {
                    labels: ["周一", "周二", "周三", "周四", "周五"],
                    series: [[4, 3.8, 3, 5, 4.1]]
                },
                type: 'Line',
                options: {
                    fullWidth: true,
                    lineSmooth: false
                }
            }
        }
    })
    </script> 
    </body>
    </html>

    License

    MIT

    通过支付宝捐赠:

    qr

    Install

    npm i vchart

    DownloadsWeekly Downloads

    10

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • willin