react+echarts圆环进度条

效果图

1.基于react项目内，安装依赖

npm install 

2.本地运行

npm start

3.安装echarts

全部代码:

import React from 'react';
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

export default class ProjectList extends React.Component {
	componentDidMount() {
        // 圆环进度条
        var a=80;
        var Chart = echarts.init(document.getElementById('main'));
        var option;
        option = {
        //颜色
            color: ['#6C92F4', '#d7dbde'],
            title:{
                show:true,
                text:a+'%',
                x:'center',
                y:'center',
                textStyle: {
                    fontSize: '15',
                    color:'black',
                    fontWeight: 'normal'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{d}%",
                show:false
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                show:false
            },
            series:
                {
                    name:'',
                    type:'pie',
                    //圆环的大小
                    radius: ['65%', '85%'],
                    // 是否启用防止标签重叠策略
                    avoidLabelOverlap: true,
                    //点击进度条时放大效果
                    hoverAnimation:false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:a, name:''},
                        {value:100-a, name:''}
                    ]
                }

        };
        Chart.setOption(option);
    }
}
render() {
        return (
        	<div className="main" id="main" style={{width:'70%',height:'70%',margin:'auto',marginTop:'10%'}}></div>
        )
 }