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

Package Sidebar

Install

npm i vchart

Weekly Downloads

4

Version

1.0.0

License

MIT

Last publish

Collaborators

  • willin