[JavaScript知识库]echarts 半圆形进度条

?图例：

?配置项：

// 进度百分比
var value = 20
option = {
    // backgroundColor: '#36467E',
    title: [{
        text: value + '%',
        left: 'center',
        top: '56%',
        textStyle: {
            color: '#c00',
            fontSize: 20,
            fontWeight: 'bold',
        }
    }, {
        text: '半圆进度条',
        left: 'center',
        top: '70%',
        textStyle: {
            color: '#2892E8',
            fontSize: 14
        }
    }],
    angleAxis: {
        show: false,
        // 后面的180表示圆环的跨越的角度， 如max设置为100*360/270,startAngle设置为-135
        max: 100 * 360 / 180,
        type: 'value',
        startAngle: 180,
        splitLine: {
            show: false
        }
    },
    // 修改环形的宽度
    barMaxWidth: 20,
    radiusAxis: {
        show: false,
        type: 'category'
    },
    polar: {
        // 设置环形的位置
        center: ['50%', '66%'],
        // 设置环形大小
        radius: '120%'
    },
    series:[{
        type: 'bar',
        data: [
            {
                value: value,
                itemStyle: {
                    // 这里是已经达到进度的颜色
                    color: '#32b668'
                }
            }
        ],
        barGap: '-100%',
        coordinateSystem: 'polar',
        z: 3
    }, {
        type: 'bar',
        data: [{
            value: 100,
            itemStyle: {
                // 这里是环形底色
                color: '#15212f',
                borderWidth: 0
            }
        }],
        barGap: '-100%',
        coordinateSystem: 'polar',
        z: 1
    }]
}