vchart
Vue Chartist.js Component
浏览器版本: 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 usechart.on(event, function)
// 处理 `chart.on(event, function)` 事件const eventHandlers = event: 'draw' { // 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 / 浏览器中使用
<!-- Import CSS / 引用CSS --> <!-- Example / 示例 --> <!-- Import Scripts / 引用JS资源 -->
License
MIT
通过支付宝捐赠: