Vue Chartist.js Component
浏览器版本: 3.78kb, GZip压缩后1.42kb
yarn add vchart
# or
npm i -S vchart-
ratio -
Stringclass ratio of Chartist. see values on / 参考: Chartist web site -
type -
String(required / 必选) chart type, possible values: / 支持的类型有:LineBarPie
-
data -
Objectdata object like this:
// 示例:
const data = {
labels: ["A", "B", "C"],
series:[[1, 3, 2], [4, 6, 5]]
}-
options -
Objectoptions object, see defaultOptions on / 默认配置参考 API Documentation / API 文档 -
empty -
Stringmessage when no data / 无数据时显示的文字消息 -
event-handlers -
Arraya special array to usechart.on(event, function)
// 处理 `chart.on(event, function)` 事件
const eventHandlers = [{
event: 'draw',
fn() {
// animation / 动画
}
}, {
// an other event hander / 另一个事件处理器
}]- responsive-options -
Arrayobject for responsive options / 响应式参数对象
Demo / 在线示例: https://vchart.js.cool/
<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><!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>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;
}
}MIT
通过支付宝捐赠：
