Taro自定义组件-进度仪表盘

纯css实现进度仪表盘（由于本身项目较大，不知道taro引入echarts后有没有性能影响或适配性问题，其他项目可以直接用echarts的进度仪表盘，隐藏下不必要的部分即可）

progress-circle.js

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import classnames from 'classnames'
import './progress-circle.scss'

const colors = {
    'white': {
        trackBg: 'rgba(255, 255, 255, .5)',
        roundBg: '#fff'
    },
    'black': {
        trackBg: 'rgba(0, 0, 0, .2)',
        roundBg: '#000'
    }
}

export default class ProgressCircle extends Component {
    constructor(props) {
        super(props)
    }

    static defaultProps = {
        bgType: 'white'
    }

    componentWillMount() {
        console.log('props',this.props)
        const { current, total } = this.props
        let percent = current / total
        let rotateDeg = 180 * (percent - 1)
        console.log(percent, rotateDeg)
        this.setState({
            percent,
            rotateDeg
        })
    }

    render() {
        const { bgType } = this.props
        const { rotateDeg, percent } = this.state
        return (
            <View className="outer-wrapper">
                {/* 左侧顶端半圆 */}
                <View className="dot-l" style={{ background: colors[bgType][percent == 0 ? 'trackBg' : 'roundBg'] }}></View>
                {/* 右侧顶端 */}
                <View className="dot-r" style={{ background: colors[bgType][percent == 1 ? 'roundBg' : 'trackBg'] }}></View>
                {/* 由于overflow:hidden，到最后一部分会有被隐藏的，所以额外加个半圆 */}
                {(rotateDeg > -5) && (
                    <View className="dot-active" style={{ background: colors[bgType].roundBg, top: `calc(${Taro.pxTransform('58px')} - ${Taro.pxTransform(-0.8 * rotateDeg + 'px')})` }}></View>
                )}
                <View className="arc-wrapper">
                    {/* 轨道背景 */}
                    <View className="track-arc" style={{ borderColor: colors[bgType].trackBg }}></View>
                    {/* 路径 */}
                    <View className={classnames('round-wrapper', {
                        [`round-wrapper-${bgType}`]: true,
                        'round-wrapper-none': percent == 0
                    })} style={{ transform: `rotate(${rotateDeg}deg)` }}>
                        <View className="round-box">
                            <View className="round" style={{ borderColor: colors[bgType].roundBg }}></View>
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}

progress-circle.scss

$W: 116px;
$H: 58px;
$outerH: 62px;
$trackW: 8px;
$dotH: 4px;
$white: #fff;
$black: #000;

.outer-wrapper {
  position: relative;
  margin: 0 auto;
  width: $W;
  height: $outerH;
  overflow: hidden;
  background: transparent;
}

.dot-l,
.dot-r,
.dot-active {
  position: absolute;
  top: calc(#{$outerH} - #{$trackW} / 2);
  width: $trackW;
  height: calc(#{$trackW} / 2);
  border-radius: 0 0 $dotH $dotH;
}

.dot-l {
  left: 0;
}

.dot-r {
  right: 0;
}

.dot-active {
  right: 0;
}

.arc-wrapper {
  position: relative;
  margin: 0 auto;
  width: $W;
  height: $H;
  overflow: hidden;
  background: transparent;
}

.track-arc {
  position: relative;
  width: $W;
  height: $W;
  box-sizing: border-box;
  border-radius: 50%;
  border-width: $trackW;
  border-style: solid;
}

.round-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  transition: all 1s;
  z-index: 20;

  &::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -$dotH;
    width: $trackW;
    height: 6px;
    border-radius: 0 0 $dotH $dotH;
  }

  &-white::after {
    background: $white;
  }

  &-black::after {
    background: $black;
  }

  &-none::after {
    display: none;
  }
}

.round-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.round {
  width: $W;
  height: $W;
  box-sizing: border-box;
  border-radius: 50%;
  border-width: $trackW;
  border-style: solid;
}

微信小程序版本的gitee地址：https://gitee.com/yu_chu_xu/weapp_demos/tree/master/components/progressCircle