echarts饼图相关配置及效果展示

const valData= { xAxis: [], series: [{ data: [{ name: item.typeName, value: item.ylFee, feeRatio: item.feeRatio, circleRatio: item.circleRatio }] }] };  //数据格式
getTotalCiclePic = (valData) => {
        const series = valData.series
        let newPieData = [series[0].data[1], series[0].data[2], series[0].data[3], series[0].data[4], series[0].data[5], series[0].data[6]]
        var pieTotal = series[0].data[0].value;
        if (pieTotal >= 0 && pieTotal < 100000) {
            pieTotal = pieTotal + '元'
        } else if (pieTotal >= 100000 && pieTotal < 100000000) {
            pieTotal = (pieTotal / 10000).toFixed(2) + '万元'
        } else if (pieTotal >= 100000000 && pieTotal < 1000000000000) {
            pieTotal = (pieTotal / 100000000).toFixed(2) + '亿元'
        } else if (pieTotal >= 1000000000000) {
            pieTotal = (pieTotal / 1000000000000).toFixed(2) + '万亿元'
        }
        var linkRatioAll = series[0].data[0].circleRatio
        if (linkRatioAll != undefined) {
            if (linkRatioAll >= 0) {
                var linkRatioAll = linkRatioAll.toFixed(2)
                var imgType = '1'
            } else {
                var linkRatioAlls = Math.abs(linkRatioAll)
                var linkRatioAll = linkRatioAlls.toFixed(2)
                var imgType = '2'
            }
        }
        var option = {
            graphic: {       //图形中间文字
                elements: [

                    {
                        type: 'text',
                        left: 'center', // 相对父元素居中
                        top: linkRatioAll != undefined ? '70' : '75',  // 相对父元素上下的位置
                        style: {
                            fill: '#333333',
                            text: '总费用',
                            font: '12px Arial Normal',
                        }
                    },
                    {
                        type: 'text',
                        left: 'center', // 相对父元素居中
                        top: linkRatioAll != undefined ? '85' : '100',  // 相对父元素上下的位置
                        style: {
                            fill: '#000',
                            text: pieTotal,
                            font: '12px Arial Normal',

                        }
                    },

                    {
                        type: 'group',
                        left: 'center', // 相对父元素居中
                        top: '102',  // 相对父元素上下的位置
                        children: linkRatioAll != undefined ? [
                            {
                                type: 'text',
                                left: -15,
                                style: {
                                    fill: '#333',
                                    text: '环比   ',
                                    font: '12px Arial Normal',
                                }
                            },
                            {
                                type: linkRatioAll != undefined ? 'image' : 'text',
                                style: {
                                    image: imgType == '1' ? redArrow : imgType == '2' ? greenArrow : '',
                                    width: 7,
                                    height: 10
                                },
                                left: 11,
                            },
                            {
                                type: 'text',
                                left: 20,
                                style: {
                                    fill: '#333',
                                    text: linkRatioAll + ' %',
                                    font: '12px Arial Normal',
                                }
                            }
                        ] : []

                    }
                ]

            },
            tooltip: {
                trigger: 'item',
                textStyle: {
                    color: 'rgba(0,0,0,0.65)',
                    fontSize: 12,
                    fontWeight: 'normal'
                },
                formatter: function (params) {
                    if (params.name != '') {
                        if (params.data.circleRatio >= 0) {
                            return params.marker + params.name + "<br/>" + '费用金额：' + params.value + '元' + "<br/>" + '费用占比：' + params.percent + "%" + "<br/>" + '环比：' + params.data.circleRatio + "%";
                        } else {
                            return params.marker + params.name + "<br/>" + '费用金额：' + params.value + '元' + "<br/>" + '费用占比：' + params.percent + "%";
                        }
                    }
                },
                position: function (position) {
                    if (position[0] < (130 / 2)) {
                        position[0] = position[0];
                    } else {
                        position[0] = position[0] - 130;
                    }
                    return [position[0], position[1]];
                },
            },
            legend: {
                top: '5%',
                left: 'center',
                data: []
            },
            color: ['#003680', '#1462cc', '#2e7be6', '#599fff', '#80b5ff', '#a6cbff'],
            series: [
                {
                    type: 'pie',
                    top: 30,
                    // right: 10,
                    bottom: 30,
                    // left: 10,
                    avoidLabelOverlap: true,
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    labelLine: {
                        show: true,
                        length: 5,
                        length2: 10
                    },
                    label: {
                        show: true,
                        color: 'rgba(0,0,0,0.65)'
                    },
                    data: newPieData,
                    radius: ["75%", "90%"] // 这个属性修改圆环宽度
                }
            ]
        };
        var totalCiclePic = echarts.init(document.getElementById('totalCiclePic'));
        totalCiclePic.clear()
        totalCiclePic.setOption(option);
        window.addEventListener("resize", function () {
            totalCiclePic.resize();
        });
    }