带有内部百分比圆环的圆头饼图echarts 饼配置项内容和展示

      let sum = 100
let width = 200
var data = [{
    value: 70,
    name: '70%',
    label: {
        color: '#fff'
    },
    itemStyle: {

    },
    emphasis: {
        itemStyle: {

        }
    }
}, {
    value: 30,
    name: '30%',
    label: {
        color: '#fff'
    },
    itemStyle: {

    },
    emphasis: {
        itemStyle: {

        }
    }
}, ]


let preAngle = 0
 //每个元素的角度
let everyAngle = 360 / sum

// 计算圆环角度
function angleText(i, value) {
    //文字现在所在的角度
    var currentAngle =preAngle +( everyAngle*value / 2);

    preAngle += everyAngle*value

    if (currentAngle <= 90) {
        return -currentAngle;
    } else if (currentAngle <= 180 && currentAngle > 90) {
        return 180 - currentAngle;
    } else if (currentAngle < 270 && currentAngle > 180) {
        return 180 - currentAngle;
    } else if (currentAngle < 360 && currentAngle >= 270) {
        return 360 - currentAngle;
    }
}

data1 = JSON.parse(JSON.stringify(data));
var data2 = [];
var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
for (var i = 0; i < data1.length; i++) {
    data1[i].name = (100 * (data1[i].value / sum)).toFixed(0) + '%'
    // data1[i].value = 1
    data1[i]['label']['rotate'] = angleText(i,  data1[i].value);
    //   data1[i]['label'].normal.position ='inside';
    //  data1[i].itemStyle.color = color[i]
    
    data2.push({
        value: data[i].value,
        name: data[i].name,
        itemStyle: {
            normal: {
                borderWidth: width * 0.04,
                //   borderWidth: 10,
                shadowBlur: 4,
                borderColor: color[i],
                shadowColor: color[i]
            }
        }
    }, {
        value: 2,
        name: '',
        itemStyle: {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
            }
        }
    });

}





option = {
    title: {
        text: 'Awesome Chart'
    },

    series: [{
            type: 'pie',
            radius: [width * 0.36,  width * 0.46],
            hoverAnimation: false,
            // itemStyle: {
            //     color: 'red'
            // },
            // labelLine: {
            //     normal: {
            //         show: false,
            //         length: 30,
            //         length2: 55
            //     },
            // },
            label: {
                normal: {
                    position: 'inside',
                    // align: 'center',
                    fontWeight:'bold',
                    textStyle: {
                        color: '#fff',
                        fontSize: width * 0.06,
                    }
                    
                }
            },
            name: "",
            data: data1
        },
            {
            name: '',
            type: 'pie',
            clockWise: true,
            radius: [ width * 0.5, width * 0.54],
            hoverAnimation: false,
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                    },
                    labelLine: {
                      show: false,
                    }
                }
            },
            data: data2
        }
    ]
};