Introduction

the charts includes pie and ring

preview

http://sunsunnydxx.com/pie-chart/

Install

npm install @week-end/pie-chart

yarn add @week-end/pie-chart

Usage

Ring

import { Ring } from '@week-end/pie-chart';
//
const ring = new Ring(document.getElementById('ring'));
ring.draw(options);
// ...

configuration

const options = {
  radius: 60,
  percent: '0.3',
  lineWidth: 10, 
  lineCap(? = 'round'): 'butt | round square',
  color(?): ['#dedede', 'hotpink'],
  text(? = Object | array):
  {
    show: true,
    value: 'hello world',
    font: '18px Airal',
    color: 'hotpink',
  },
};

Pie

import { Pie } from '@week-end/pie-chart';
//
const pie = new Pie(document.getElementById('pie'));
ring.draw(options);
// ...

configuration

const options = {
  data: [10, 12, 123, 12345, 546, ,6345, 1564], // 数据
  label: ['under 0%', 'under 10%', 'under 20%', 'under 30%', 'under 40%', 'under 50%', 'under 60%'], // 是否显示文字 如不显示（text的show设置为false）则不用传
  gradient: true, // 是否开启渐变色，如为true，color,需要传[ red, yellow ]此类，如为false，传[ red ]此类
  color: [
    [ '#f29567', '#ec6a64'],
    [ '#5976b9', '#6aa5d9'],
    [ '#72b3dd', '#86cdda'],
    [ '#87cdc5', '#86c9a1'],
    [ '#b0d366', '#87c45f'],
    [ '#efed70', '#c9dc69'],
    [ '#f6b167', '#f4dc70'],
  ], 
  innerCircle: {
    show: true,
    color: '#222228',
    radius: 30,
  }, // 是否需要内环
  outerCircle: {
    radius: 100,
    stroke: {
      show: false,
      color: '#000',
      width: '3',
    }
  }, // 外环设置
  text: {
    show: true,
    padding: 10, // 文字与圆环的距离
    font: '13px Airal',
    gradient: true, // 是否开启渐变色，如为true，color,需要传[ red, yellow ]此类，如为false，传[ red ]此类
    color: [
      [ '#f29567', '#ec6a64'],
      [ '#5976b9', '#6aa5d9'],
      [ '#72b3dd', '#86cdda'],
      [ '#87cdc5', '#86c9a1'],
      [ '#b0d366', '#87c45f'],
      [ '#efed70', '#c9dc69'],
      [ '#f6b167', '#f4dc70'],
    ],
    shadow: {
      show: false,
      width: 20,
      color: [ '#f29567', '#5976b9', '#72b3dd', '#72b3dd', '#87cdc5', '#b0d366', '#efed70', '#f6b167'],
    }, // 是否添加文字阴影
    line: {
      padding: 20,
      width: '2',
      straightLineLength: 25,
      circleRadius: 4, 
    }, // 显示文字的直线的配置
  }
}