echarts仪表盘式进度条

效果图：

实例代码：

function getHalfPro ( value, color ) {
    return {
        title: {
            text: '完成率',
            left: 'center',
            bottom: '20%',
            textStyle: {
                fontSize: '200%',
                fontWeight: 'bold',
            }
        },
        grid: {
            top: '1%',
            left: '1%',
            right: '1%',
            bottom: '1%',
            containLabel: true
        },
        color: ["rgba(255,255,255,0)", color, "#b6b5b5"],
        series: [
            {
                name: '完成率',
                type: 'pie',
                startAngle: 315,
                radius: ['70%', '95%'],
                legendHoverLink: false,
                hoverAnimation: false,
                avoidLabelOverlap: false,
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {
                        value: 33,
                        name: value + '%',
                        label:{
                            position:'center',
                            color:"#535353",
                            fontSize: '300%'
                        }
                    },
                    {
                        value: value
                    },
                    {
                        value: 100 - value
                    }
                ]
            }
        ]
    }
}
var option = getHalfPro(85, "#5fa4f4");

注释：

该图表是以echarts中饼图为原型，将处于底部的一段圆环背景颜色设置为透明，只需要保持底部隐藏部分数值占整体33/133的比例，就可以使其位置始终保持不变。因此设置底部数值为33，完成和未完成部分数值相加需要等于100即可。
getHalfPro(value, color)接收两个参数，value为完成的百分比数值，color为完成部分展示的颜色，若颜色不变可在函数中写固定的值。