arc-progress.js

A circular progress bar drawn on canvas

If you want to use react, you can useGithub.com/Hzy0913/arc…”The react – arc – progress”) components

Installation

npm install arc-progress -S
Copy the code
Import js files directly

If you choose to import the js file directly with

Usage

<div id='progress-container'></div>

<script>
  const customText = [{text: The '%'.size: '12px'.color: '# 000'.x: 142.y:102}];

  const arcProgress = new ArcProgress({
    el: '#progress-container'.progress: 68..speed: 5.value: '5439.92'.size: 200,
    customText,
    observer(e, t) {
      console.log('Monitor animation progress', e, t);
    },
    animationEnd(e) {
      console.log('Animation execution completed', e); }});</script>
Copy the code

If used with React, you can use the React-Arc-progress component

If used in a VUE, it is instantiated during the life cycle in which the real DOM node can be retrieved

In the Vue:

<template> <div> <div id='progress-container' /> </div> </template> <script> import ArcProgress from 'arc-progress'; export default { data () { return { customText: [{text: '%', size: '12px', color: '#000', x: 142, y:102}] } }, mounted() { arcProgress = new ArcProgress({ el: '#progress-container', progress: .68, speed: 5, value: '5439.92', size: 200, customText: this.customText, observer(e, t) { console.log('observer the animation', e, t); }, animationEnd(e) { console.log('the animation is end', e); }}); } } </script>Copy the code

Options

The following optional options are passed during instantiation
Option type Description
el String or DOM (Mandatory) The class or ID name of the container can also be passed in as a reference to the DOM node
size number The size of the canvas container for generating the progress bar is 200 by default
progress Number (required) Set the progress bar. The value ranges from 0 to 1
text string Set the progress bar text
arcStart number Sets the starting point of the ring, as shown below
arcEnd number Sets the end point of the ring, as shown below
thickness number Set the thickness of the ring progress bar
fillThickness number Set the thickness of the filling content of the ring progress bar. If this parameter is not set, the default value isthicknessconsistent
emptyColor string Sets the color of the empty part of the ring progress bar
fillColor string object
lineCap string Set the type of the end of the ring progress bar. There are three optional values:butt.round.square. The default value isround
speed number Set the animation speed threshold. The range is -100 to 100. The default is 0
animation boolean or number Sets the animation duration, in milliseconds, whenfalse, there is no transition animation
textStyle object Set the text style, see below for details
customText array Set custom text content, see below for details
animationEnd function The callback to the end of the progress bar animation
onError function Catch the wrong callback
observer function Listen for the callback when the progress bar animation changes

Methods

Method that can be invoked after instantiation

Name Description
updateProgress Update the progress bar method by passing the parameter Optios as above (noelParameters)
destroy Method of destroying progress bar

The Options that

ArcStart and arcEnd

The starting point and key points of the arc are marked as shown in the figure, and the direction is clockwise. If you want to draw a circular progress bar, you can set arcStart to -90 and arcEnd to 270. If you want to draw a semicircle, set arcStart to 180 and arcEnd to 360. You can adjust the starting and ending angles as required.

fillColor

FillColor is the color of the progress bar to be filled. You can pass in a color value to define a color for it, such as (#fe4d3c). If you want to use gradient fill, the parameter needs to be set to the object type, for example {gradient: [color 1, color2, color2]}, which will generate three radial gradients of colors. If you fill with an image, you need to set the parameter to the object format {image: URL}, passing in the URL address of the image. For example, if fillColor: {image: ‘http://img.com/fillImg’}, the image is used for filling.

textStyle

Set the text style for the passed text parameter, which needs to be of object type, optionally as follows

Name Type Description
size string Set the text size, as shown in18px
color string Set the text color, as shown in#fa0556
font string Set the text font, as shown inMicrosoft YaHei
x number Sets the X-axis for text alignment
y number Sets the y axis of text alignment
customText

The customText option allows you to customize the text content, which is in the form of an array and allows you to define multiple text. Each usage is the same as the textStyle parameter, with the addition of the text field.

Name Type Description
text string Setting text content
others Other parameters andtextStyleUse consistent