年龄图表echarts 饼配置项内容和展示

      let ageOption = [{
        value: 335,
        name: '28周以下',
        itemStyle: {
            normal: {
                color: '#0873CC'
            }
        }
    },
    {
        value: 310,
        name: '28-31周',
        itemStyle: {
            normal: {
                color: '#00ADB8'
            }
        }
    },
    {
        value: 234,
        name: '31-34周',
        itemStyle: {
            normal: {
                color: '#009BEC'
            }
        }
    },
    {
        value: 135,
        name: '34-37周',
        itemStyle: {
            normal: {
                color: '#6D8BFF'
            }
        }
    },
    {
        value: 148,
        name: '37-40周',
        itemStyle: {
            normal: {
                color: '#BE85E2'
            }
        }
    },
    {
        value: 158,
        name: '40-43周',
        itemStyle: {
            normal: {
                color: '#40CDA8'
            }
        }
    },
    {
        value: 548,
        name: '43-46周',
        itemStyle: {
            normal: {
                color: '#499DF2'
            }
        }
    },
    {
        value: 154,
        name: '46周以上',
        itemStyle: {
            normal: {
                color: '#6CAA7F'
            }
        }
    }
];


option = {
    backgroundColor: '#ffffff',
    legend: [{
            icon: 'square',
            orient: 'vertical',
            left: 'left',
            top: 'center',
            itemGap: 28,
            padding: 15,
            data: ['28周以下', '28-31周', '31-34周', '34-37周'],
            formatter: (name) => {
                let oa = ageOption;
                let num = 0
                for (let i = 0; i < oa.length; i++) {
                    num += oa[i].value
                }
                for (let i = 0; i < oa.length / 2; i++) {
                    if (name == oa[i].name) {
                        return '{namea|' + name + '}{value|' + (oa[i].value / num * 100).toFixed(2) + '%}';
                    }
                }
            },
            textStyle: {
                padding: [0, 0, 0, -5],
                rich: {
                    namea: {
                        color: '#91989E',
                        width: 56
                    },
                    value: {
                        color: '#36383C',
                    }
                }
            }
        },
        {
            icon: 'square',
            orient: 'vertical',
            left: 'right',
            top: 'center',
            itemGap: 28,
            padding: 15,
            data: ['37-40周', '40-43周', '43-46周', '46周以上'],

            formatter: (name) => {
                let oa = ageOption;
                let num = 0
                for (let i = 0; i < oa.length; i++) {
                    num += oa[i].value
                }
                for (let i = oa.length / 2; i < oa.length; i++) {
                    if (name == oa[i].name) {
                        return '{namea|' + name + '}{value|' + (oa[i].value / num * 100).toFixed(2) + '%}';
                    }
                }
            },
            textStyle: {
                padding: [0, -126, 0, -110],
                rich: {
                    namea: {
                        color: '#91989E',
                    },
                    value: {
                        color: '#36383C',
                        width: 50
                    }
                }
            }
        }
    ],
    grid: {
        right: 100
    },
    series: [{
        type: 'pie',
        radius: ['30%', '40%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        label: {
            normal: {
                show: false,
                position: 'center'
            },
            emphasis: {
                show: true,
                formatter(params, ticket, callback) {
                    return '{number|' + params.percent + '}' + '{unit|%}\n{name|' + params.name + '}'
                },
                rich: {
                    number: {
                        color: '#36383C',
                        fontSize: '36',
                        padding: [8, 0]
                    },
                    unit: {
                        color: '#181A00',
                        fontSize: '14',
                        verticalAlign: 'bottom',
                        padding: [12, 0]
                    },
                    name: {
                        color: '#91989E',
                        fontSize: '14',
                        padding: [8, 0]
                    }
                }
            }
        },
        labelLine: {
            normal: {
                show: false,
                length2: 10
            }
        },
        data: ageOption,
        itemStyle: {
            normal: {
                borderWidth: 3,
                borderColor: '#ffffff',
            },
            emphasis: {
                shadowBlur: 0,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0)'
            }
        }
    }]
};