arc-progress.js

Installation

npm install arc-progress -S

直接引入js文件

如果选使用<script>直接引入js文件，可点击下载arc-progress.min.js文件。

Usage

<script>
  const customText = [{text: '%', 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('监听动画进度', e, t);
    },
    animationEnd(e) {
      console.log('动画执行结束', e);
    }
  });

</script>

如果在react或vue中使用，在可以获取真实dom节点的生命周期里进行实例化

import ArcProgress from 'arc-progress';

class App extends React.Component {
  componentDidMount() {
    const customText = [{text: '%', 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('监听动画进度', e, t);
      },
      animationEnd(e) {
        console.log('动画执行结束', e);
      }
    });
  }

  render() {
    return(









    );
  }
}

Options

在实例化时传入如下可选的option

Methods

实例化后可调用的方法

Options 说明

arcStart 和 arcEnd

如图所示标注了弧形的起点和重点，方向为顺时针。如果你想绘制一个圆形进度条，可以设置arcStart为-90，arcEnd为270。如果想绘制一个半圆，可以设置arcStart为180，arcEnd为360。可以根据需要调整绘制起止角度数。

fillColor

fillColor为被填充的进度条颜色，可以传入色值为其定义颜色。如果想设置渐变色，可以传入多个色值 如设置 fillColor: '#fa2323 #234cfa #fac305' 时，则会产生三个颜色的径向渐变色。 如使用图片填充，则需要将参数设置为对象格式{image: url}，传入图片的url地址， 例如 fillColor: {image: 'http://img.com/fillImg'} 时，则会使用图片进行填充。

textStyle

设置传入text参数的文字样式，它需要为对象类型，可选的内容如下

customText

customText 选项可以自定义文字内容，它的格式为数组，可以定义多个文字。其每个用法与textStyle参数一致，只是多了text字段。