echarts实现百分比进度图表展示（两种风格）

类型一：完整圆环型

效果图

代码示例

function PercentPie(option){
        this.backgroundColor = option.backgroundColor||'#ffffff';
        this.color           = option.color||['#4ea2eb','#e1e2e1'];
        this.fontSize        = option.fontSize||12;
        this.domEle          = option.domEle;
        this.value           = option.value;
        this.name            = option.name;
        this.title           = option.title;
    }

    PercentPie.prototype.init = function(){
        var _that = this;
        var option = {
            backgroundColor:_that.backgroundColor,
            color:_that.color,
            title: {
                text: _that.title,
                bottom:'5%',
                left: 'center',
                textStyle:{
                    color: '#777777',
                    fontStyle: 'normal',
                    fontWeight: 'normal',
                    fontSize: 18
                }
            },
            series: [{
                name: null,
                type: 'pie',
                radius: ['45%', '60%'],
                center: ['50%', '45%'],
                avoidLabelOverlap: false,
                hoverAnimation:false,
                label: {
                    normal: {
                        show: false,
                        formatter:'{c}%'
                    }
                },
                data: [{
                    value: _that.value,
                    name: null,
                    label:{
                        normal:{
                            show:true,
                            position: 'center',
                            textStyle: {
                                fontSize: _that.fontSize,
                                fontWeight: 'bold',
                            }
                        }
                    }
                },
                    {
                        value: _that.value>=100?0:100-_that.value,
                        name: null
                    }
                ]
            }]
        };
        echarts.init(_that.domEle).setOption(option);
    };

var option = {
    value:'30%'.replace('%',''),//百分比,必填
    name:'成功率',
    title:'成功率',
    backgroundColor:null,
    color:['#ff4e4a','#f5f5f5'],
    fontSize:20,
    domEle:document.getElementById("domId")//必填
},percentPie = new PercentPie(option);
percentPie.init();

类型二：半圆型

效果图

代码示例

var color = ['rgba(0, 221, 255)','rgba(77, 119, 255)',
        	'rgba(241, 185, 19)','rgba(224, 110, 62)',
        	'rgb(255, 115, 111)','rgb(255, 46, 41)'];
            var option = {
                series: [{
                    type: 'pie',
                    radius: ['120%', '150%'],
                    center: ['50%', '90%'],
                    label: {
                        show: false,
                    },
                    startAngle: 180,
                    hoverOffset: 0, // 鼠标经过不变大
                    data: [{
                            value: '89.82%'.replace('%', '') * 0.01 * 200,
                            itemStyle: { // 颜色渐变
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: color[0]
                                    }, {
                                        offset: 1,
                                        color: color[1]
                                    }]
                                }
                            }
                        }, {
                            value: 200 - ('89.82%'.replace('%', '') * 0.01 * 200),
                            itemStyle: {
                                color: '#12274d'
                            }
                        }, // 颜色#12274d
                        {
                            value: 200,
                            itemStyle: {
                                color: 'transparent'
                            }
                        } // 透明隐藏第三块区域
                    ]
                }]
            };
var myechart = echarts.init($('#domId'));
myechart.setOption(option);