https://github.com/spritejs/cat-charts-vue
A visulization library based on spritejs , qcharts and Vue
https://github.com/spritejs/cat-charts-vue
Last synced: 8 months ago
JSON representation
A visulization library based on spritejs , qcharts and Vue
- Host: GitHub
- URL: https://github.com/spritejs/cat-charts-vue
- Owner: spritejs
- Created: 2019-03-18T07:08:47.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T16:12:26.000Z (over 3 years ago)
- Last Synced: 2025-04-23T00:42:52.104Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://www.spritejs.com/cat-charts-vue/
- Size: 3.72 MB
- Stars: 16
- Watchers: 4
- Forks: 1
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 快速开始
### 特点
CatChartsVue 是一个基于 spritejs , QCharts 封装的 Vue 图表库，可以让用户以组件的形式组合出各种图表。 → 详细文档
### 如何使用
1.通过 npm 获取 CatChartsVue，我们提供了 CatChartsVue npm 包，通过下面的命令即可完成安装，Demo：Quickstart
```shell
npm install cat-charts-vue --save
```
```javascript
// 通过模块引入的方式使用CatCharts
import * as CatChartsVue from 'cat-charts-vue'
Vue.use(CatChartsVue)
```
2.通过 cdn 获取 CatCharts，通过下面的标签引入 CatCharts，因为 CatCharts 依赖 Vue 与 spritejs，所以需要先引入这两个，Demo：Quickstart
```html
```
```javascript
// 通过cdn的方式使用CatCharts
Vue.use(CatChartsVue)
```
### 开始绘制图表
完成一个 CatChartsVue 的组件或者页面
```html
export default {
data: function() {
return {
attrs: {
pos: ['10%', '10%'],
size: ['80%', '80%']
},
lineData: [
{ date: '05-01', catgory: '图例一', sales: 15.2 },
{ date: '05-02', catgory: '图例一', sales: 39.2 },
{ date: '05-03', catgory: '图例一', sales: 31.2 },
{ date: '05-04', catgory: '图例一', sales: 65.2 },
{ date: '05-05', catgory: '图例一', sales: 55.2 },
{ date: '05-06', catgory: '图例一', sales: 75.2 },
{ date: '05-07', catgory: '图例一', sales: 95.2 },
{ date: '05-08', catgory: '图例一', sales: 65.2 }
],
tooltipAttrs: {
formatter: data => `${data.date}-${data.catgory}-${data.sales}`
},
dataFields: {
row: 'catgory',
value: 'sales',
text: 'date'
}
}
}
}
.chart {
height: 600px;
}
```
一张折线图就绘制成功
