https://github.com/willin/vchart
Vue Chartist.js Component
https://github.com/willin/vchart
chartist component vue
Last synced: 19 days ago
JSON representation
Vue Chartist.js Component
- Host: GitHub
- URL: https://github.com/willin/vchart
- Owner: willin
- License: mit
- Created: 2017-08-15T17:01:34.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T20:29:49.000Z (over 2 years ago)
- Last Synced: 2025-04-19T16:39:27.176Z (22 days ago)
- Topics: chartist, component, vue
- Language: Vue
- Size: 212 KB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vchart
Vue [Chartist.js](https://gionkunz.github.io/chartist-js) Component
[](https://github.com/willin) [](https://npmjs.org/package/vchart) [](https://npmjs.org/package/vchart) [](https://npmjs.org/package/vchart)  
> 浏览器版本: 3.78kb, GZip压缩后1.42kb
## Usage / 使用说明
### Installation / 安装
```bash
yarn add vchart
# or
npm i -S vchart
```
### Props
- __ratio__ - `String`
class ratio of Chartist. see values on / 参考: [Chartist web site](https://gionkunz.github.io/chartist-js/getting-started.html#as-simple-as-it-can-get)
- __type__ - `String` (required / 必选)
chart type, possible values: / 支持的类型有:
- `Line`
- `Bar`
- `Pie`
- __data__ - `Object` data object like this:
```js
// 示例:
const data = {
labels: ["A", "B", "C"],
series:[[1, 3, 2], [4, 6, 5]]
}
```
- __options__ - `Object`
options object, see defaultOptions on / 默认配置参考 [API Documentation / API 文档](https://gionkunz.github.io/chartist-js/api-documentation.html)
- __empty__ - `String`
message when no data / 无数据时显示的文字消息
- __event-handlers__ - `Array`
a special array to use `chart.on(event, function)`
```javascript
// 处理 `chart.on(event, function)` 事件
const eventHandlers = [{
event: 'draw',
fn() {
// animation / 动画
}
}, {
// an other event hander / 另一个事件处理器
}]
```
- __responsive-options__ - `Array`
object for responsive options / 响应式参数对象
## Example / 示例
Demo / 在线示例:
### Single File Components / 单文件组件中使用
```vue
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
}
};
}
}
```
### Browser / 浏览器中使用
```html
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
}
}
}
})
```
### Animation / 动画
Demo / 演示: https://jsfiddle.net/willin/esvw0q91/
常用的三种动画:
- `dashoffset` 跑马灯
- `bouncing-stroke` 弹簧
- `exploding-stroke` 爆炸
```css
* {
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
通过支付宝捐赠：
