echarts 画一个半环形图

export default class componentName extends Component {
constructor(props) {
super(props);
this.state = {viewConfig:{

    } };
}
componentDidMount() {
    this.initChart()
}
initChart() {
    let myChart = echarts.init(document.getElementById('myring'));
    let option = {
        title: {
            text: '75',
            textStyle: {
                color: '#01c4a3',
                fontSize: 40
            },
            itemGap: -10, // 主副标题距离
            left: 'center',
            top: 'center'
        },
        angleAxis: {
            max: 100,
            clockwise: true,
            // 隐藏刻度线
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            },
            startAngle: 225
        },
        radiusAxis: {
            type: 'category',
            // 隐藏刻度线
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            }
        },
        polar: {
            center: ['50%', '50%'],
            radius: '150%' //图形大小
        },
        series: [{
            type: 'bar',
            data: [{
                name: '作文得分',
                value: 30,
                itemStyle: {
                    normal: {
                        color: '#aaf14f'
                    },
                    emphasis: {
                        color: '#aaf14f'
                    }
                },
            }],
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 8,
            barGap: '-100%', // 两环重叠
            z: 2,
        }, { // 灰色环
            type: 'bar',
            data: [{
                value: 75,
                itemStyle: {
                    color: '#e2e2e2',
                    shadowColor: 'rgba(0, 0, 0, 0.2)',
                    shadowBlur: 5,
                    shadowOffsetY: 2,
                    emphasis: {
                        color: '#e2e2e2'
                    }
                }
            }],
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: '8',
            barGap: '-100%', // 两环重叠
            z: 1
        },
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
render() {
    return (
        <div className='ArcProgress' id='myring' style={{ width: '8rem', height: '8rem' }}>
        </div>
    )
}

}