半圆弧进度条怎么实现

这样的图形怎么写能在前端显示出来，求大神们帮忙解答

http://www.jq22.com/jquery-info3760
http://www.jq22.com/jquery-info17537
http://www.jq22.com/jquery-info9243

上面例子也可以 ，我一般图形展示使用的是Echarts。https://echarts.baidu.com/examples
对于react和vue都有现成的组件

使用佐罗组件库：angular框架----https://ng.ant.design/components/progress/zh
vue框架------https://vue.ant.design/components/progress/
react框架------https://ant.design/components/progress-cn/
你值得一试

                option = {
                        tooltip: {
                            formatter: "{a} <br/>{b} : {c}%"
                        },

                        series: [{
                                name: '业务指标',
                                type: 'gauge',
                                splitNumber: 10,
                                radius: 130,
                                detail: {
                                    formatter: '{value}%',
                                    height: 20,


                                },
                                data: [{
                                    value: 32,
                                    name: '指标'
                                }],
                                axisLine: {
                                    show: false,
                                    lineStyle: {
                                        color: [
                                            [0.32, '#ff9605'],
                                            [0.8, '#e0e0e0'],
                                            [1, '#e0e0e0']
                                        ], //颜色
                                    }
                                },
                                splitLine: {
                                    show: false,
                                    length: 30,
                                    lineStyle: {
                                        width: 130,
                                        type: 'dashed',
                                    }
                                },
                                axisTick: {
                                    show: true,
                                    splitNumber: 6,
                                    length: 30, //长度
                                    lineStyle: {
                                        width: 3,//两格之间的距离
                                    }
                                },
                                axisLabel: {
                                    show: false, //是否显示标签刻度
                                },
                                pointer: {
                                    show: false, //是否显示指针
                                },

                            }

                        ]
                    };

这段代码就是我在echarts3中demo里改得，大家可以借鉴一下，

没做出来颜色渐变大家可以帮忙