Skip to content
Vue Chartist.js Component
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.babelrc
.eslintignore
.eslintrc.js
.gitignore
CNAME
LICENSE
README.md
index.html
package.json
webpack.analyze.js
webpack.config.js
yarn.lock

README.md

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 / 示例 -->
<div id="app">
  <vchart
      ratio="ct-major-second"
      :type="type"
      :data="chartData"
      :options="options" >
  </vchart>
</div>

<!-- 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>

Animation / 动画

Demo / 演示: https://jsfiddle.net/willin/esvw0q91/

常用的三种动画:

  • dashoffset 跑马灯
  • bouncing-stroke 弹簧
  • exploding-stroke 爆炸
* {
  transform-origin: 0px 0px 0px;
}
.ct-line {
  stroke-dasharray: 5px;
  /* change animation name */
  animation: dashoffset 1s linear infinite;
}

@keyframes dashoffset  {
  0% {
    stroke-dashoffset: 0px;
  }

  100% {
    stroke-dashoffset: -20px;
  }
}

 @keyframes bouncing-stroke  {
  0% {
    stroke-width: 5px;
  }

  50% {
    stroke-width: 10px;
  }

  100% {
    stroke-width: 5px;
  }
}

@keyframes exploding-stroke  {
  0% {
    stroke-width: 2px;
    opacity: 1;
  }

  100% {
    stroke-width: 20px;
    opacity: 0;
  }
}

License

MIT

通过支付宝捐赠:

qr

You can’t perform that action at this time.