多类型切割占比环形图echarts 饼配置项内容和展示

      ;(function(Number) {
    // 乘法
    Number.prototype.mul = function(arg, acc) {
        var m = 0
        var s1 = this.toString()
        var s2 = arg.toString()
        try {
            m += s1.split('.')[1].length
        } catch (e) {
            // console.log('catch mul', e);
        }
        try {
            m += s2.split('.')[1].length // m是累加结果
        } catch (e) {
            // console.log(e)
        }
        var result = (Number(s1.replace('.', '')) * Number(s2.replace('.', ''))) / Math.pow(10, m)
        // 小数位数处理
        if (acc) {
            return Number(Number(result).toFixed(parseInt(acc)))
        } else {
            return result
        }
    }
})(Number)
let titleData = [];
let seriesData = [];
let total = 0;
let percent_total = [0];
let render_data = [
    { bq_bm: '105', value: 19, percent: 0.06, key: '儿童' },
    { bq_bm: '100', value: 76, percent: 0.27, key: '青少年' },
    { bq_bm: '103', value: 57, percent: 0.20, key: '中年' },
    { bq_bm: '102', value: 29, percent: 0.10, key: '老年' },
     { bq_bm: '', value: 12, percent: 0.04, key: '成年' },
    { bq_bm: '', value: 91, percent: 0.33, key: '其他' },
];
for (const item of render_data) {
      total += item.value ? item.value : 0
  }
render_data.forEach((item,index)=>{
    percent_total.push(percent_total[index] + item.value)
    titleData.push({
            text: '(' + item.percent.mul(100) + '%)' + '\n\n\n\n\n',
            left: index * 10 +9.8 + '%',
            top: '41%',
            textAlign: 'center',
            textStyle: {
                fontSize: '10',
                color: '#fff',
                fontWeight: '200',
            },
            subtext: `${item.value}`,
            subtextStyle: {
                fontSize: '12',
                color: 'F0FFFF',
                fontWeight: '200',
                verticalAlign: 'top',
                ellipsis: '...',
            },
        });
        titleData.push({
                        text: '__',
                        left: index * 10 + 9.9 + '%',
                        bottom: '50%',
                        textAlign: 'center',
                        textStyle: {
                            color: '#8DFFD5',
                            fontWeight: 'blod',
                        },
                    })
            seriesData.push(
                {
                    type: 'pie',
                    clockWise: false, // 逆时针
                    radius: ['40', '70'],
                    startAngle: (percent_total[index] / total) * 360 + 90,

                    center: [index * 10 + 10 + '%', '40%'],
                    hoverAnimation: false,
                    label: {
                        normal: {
                            position: 'center',
                        },
                    },
                    data: [
                        {
                            value: item.value,
                            name: '-',
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                        {
                                            offset: 0,
                                            color: '#81DB93',
                                        },
                                        {
                                            offset: 1,
                                            color: '#3AC1F3',
                                        },
                                    ]),
                                },
                            },
                            label: {
                                normal: {
                                    show: false,
                                },
                            },
                        },
                        {
                            value: total - item.value,
                            name: item.key,
                            tooltip: {
                                show: true,
                            },
                            itemStyle: {
                                normal: {
                                    color: '#244f82',
                                },
                            },
                            label: {
                                normal: {
                                    formatter: item.value,
                                    textStyle: {
                                        fontSize: 12,
                                        color: '#fff',
                                    },
                                },
                            },
                        },
                    ],
                },
                /* 中间的小圆环--虚点 */
                {
                    name: '',
                    z: 5,
                    type: 'pie',
                    cursor: 'default',
                    radius: ['37.5', '37.5'],
                    center: [index * 10 + 10 + '%', '40%'],
                    hoverAnimation: false,
                    legendHoverLink: false,
                    labelLine: {
                        normal: {
                            show: false,
                        },
                    },
                    data: [
                        {
                            value: 100,
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: {
                                    type: 'linear',
                                    x: 1,
                                    y: 1,
                                    x2: 0,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#81DB93', // 0% 处的颜色
                                        },
                                        {
                                            offset: 0.3,
                                            color: '#164AA5', // 33% 处的颜色
                                        },
                                        {
                                            offset: 0.6,
                                            color: '#81db93', // 66% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: '#164AA5', // 100% 处的颜色
                                        },
                                    ],
                                },
                                borderType: 'dashed',
                            },
                        },
                    ],
                },
            )
})

option = {
    backgroundColor: '#182932',
    title: titleData,
    series: seriesData,
};