vchart
v1.0.0
Published
Vue Chartist.js Component
Downloads
23
Readme
vchart
Vue Chartist.js Component
浏览器版本: 3.78kb, GZip压缩后1.42kb
Usage / 使用说明
Installation / 安装
yarn add vchart
# or
npm i -S vchartProps
ratio -
Stringclass ratio of Chartist. see values on / 参考: Chartist web sitetype -
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 / 响应式参数对象
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
通过支付宝捐赠：
