1.0.0 • Published 4 years ago

crude-charts v1.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
4 years ago

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 stringcanvascanvas 容器
cHeight number必须canvas 容器的高度
cWidth number必须canvas 容器的宽度
cPadding number10canvas 容器的内边距
cBackgroundColor string#fffcanvas 容器的背景色
animDuration number1000动画执行时间,单位毫秒
data any必须详见具体组件

饼图

属性名默认值备注
tagX number0标签起始位置 X
tagY number0标签起始位置 Y
tagW number60标签宽度
tagH number20标签高度
tagFont string标签文本样式
pieRadius numbercanvas 容器的高度 1/3饼图半径v
pieX numbercanvas 容器的宽度 1/2饼图圆心 X
pieY numbercanvas 容器的高度 1/2饼图圆心 Y
tipLine number10饼图的边到转折点的距离
tipLineW number1横线的宽度
tipFont string横线文字样式
tipPadding number10横线文字距离转折点的距离
toFix number2百分比的位数
isShowTag booleantrue是否展示 tag

图例

饼图