基础进度条

描述:当前是关于Echarts图表中的 示例。
 
            const value = 66
const rate = value + '%'
option = {
    backgroundColor: '#313131',
    title: {
        text: rate,
        left: 'center',
        top: '45%',
        itemGap: 10,
        textStyle: {
            color: '#fff',
            fontSize: '20',
            fontWeight: 600
        },
        subtext: '达标率',
        subtextStyle: {
           color: '#fff',
            fontSize: '20',
            fontWeight: 600,
        }
    },
    angleAxis: {
        max: 100,
        // 隐藏刻度线
        show: false,
        startAngle: 90
    },
    radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false
        },
    },
    polar: {
        radius: '100%' //图形大小
    },
    series: [{
        type: 'bar',
        data: [value],
        showBackground: true,
        roundCap: true,
        backgroundStyle: {
            color: '#404C4C',
        },
        coordinateSystem: 'polar',
        barWidth: 20,
        itemStyle: {
            normal: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#43CBFF'
                    }, {
                        offset: 1, color: '#9708CC'
                    }],
                    global: false
                }
            }
        },
    }]
}