1.0.0 • Published 4 years ago
crude-charts v1.0.0
crude-charts
一个简陋(单)的图表组件,提供了基础的数据展示,动画,和基础的配置项。
学习自:
项目:https://github.com/sutianbinde/charts
博客:https://www.cnblogs.com/chengduxiaoc/category/1094155.html
支持以下组件
- 柱状图
- 饼图
- 折线图
快速上手
// 以饼图为例
import {Pie} from 'curde-charts';
const charts = new Pie({
cHeight: 200,
cWidth: 500,
data: [
{
color: '#60b794',
value: 10,
text: '苹果'
},
{
color: '#616afb',
value: 30,
text: '梨子'
},
{
color: 'black',
value: 250,
text: '西瓜'
}
]
});
文档
通用属性 (Common properties)
长,宽,高等属性,单位均为 px
属性名 | 默认值 | 备注 |
---|---|---|
canvasId string | canvas | canvas 容器 |
cHeight number | 必须 | canvas 容器的高度 |
cWidth number | 必须 | canvas 容器的宽度 |
cPadding number | 10 | canvas 容器的内边距 |
cBackgroundColor string | #fff | canvas 容器的背景色 |
animDuration number | 1000 | 动画执行时间,单位毫秒 |
data any | 必须 | 详见具体组件 |
饼图
属性名 | 默认值 | 备注 |
---|---|---|
tagX number | 0 | 标签起始位置 X |
tagY number | 0 | 标签起始位置 Y |
tagW number | 60 | 标签宽度 |
tagH number | 20 | 标签高度 |
tagFont string | 标签文本样式 | |
pieRadius number | canvas 容器的高度 1/3 | 饼图半径v |
pieX number | canvas 容器的宽度 1/2 | 饼图圆心 X |
pieY number | canvas 容器的高度 1/2 | 饼图圆心 Y |
tipLine number | 10 | 饼图的边到转折点的距离 |
tipLineW number | 1 | 横线的宽度 |
tipFont string | 横线文字样式 | |
tipPadding number | 10 | 横线文字距离转折点的距离 |
toFix number | 2 | 百分比的位数 |
isShowTag boolean | true | 是否展示 tag |
图例
饼图 |
---|
1.0.0
4 years ago