材料报验echarts 饼配置项内容和展示

      var pieOption = {
        title: '材料报验',
        data: {
            total: 10,
            completed: 2,
        },
        color: '#43D5A0',
    },
    option = {
        title: {
            text: pieOption.title,
            right: '32%',
            top: '0',
            textStyle: {
                color: pieOption.color,
                fontWeight: '500',
                fontSize: 14,
            },
        },
        tooltip: {
            show: true,
            trigger: 'item',
            confine: true,
        },
        legend: {
            data: [
                {
                    name: '已完成验收总数',
                    itemStyle: {
                        color: pieOption.color,
                    },
                },
                {
                    name: '总数',
                    itemStyle: {
                        color: 'rgba(255,255,255,.65)',
                    },
                },
            ],
            top: 'center',
            right: '2%',
            itemGap: 10,
            orient: 'lineHeight',
            itemWidth: 8,
            itemHeight: 8,
            formatter: function (name) {
                var arr = [
                    '{a|' + name + '}  |  ',
                    name === '总数' ? '{b|' + pieOption.data.total + '个}' : '{b|' + pieOption.data.completed + '个}',
                ];
                return arr.join('');
            },
            textStyle: {
                color: '#eee',
                fontStyle: 'normal',
                fontWeight: 'normal',
                fontFamily: 'sans-serif',
                fontSize: 12,
                rich: {
                    a: {
                        fontSize: 14,
                        color: 'rgba(255,255,255,.8)',
                    },
                    b: {
                        fontSize: 14,
                        color: '#fff',
                    },
                },
            },
        },
        series: [
            {
                type: 'pie',
                radius: ['45%', '70%'],
                center: ['50%', '50%'],
                labelLine: {
                    normal: {
                        show: false,
                    },
                },
                emphasis: {
                    label: {
                        show: false,
                        fontSize: 14,
                    },
                },
                data: [
                    {
                        name: '总数',
                        value: pieOption.data.total - pieOption.data.completed,
                        showValue: pieOption.data.total,
                        itemStyle: {
                            normal: {
                                color: '#4c6370',
                            },
                        },
                        label: {
                            show: false,
                        },
                    },
                    {
                        name: '已完成验收总数',
                        showValue: pieOption.data.completed,
                        value: pieOption.data.completed > 0 ? pieOption.data.completed : '',
                        itemStyle: {
                            normal: {
                                color: pieOption.color,
                            },
                        },
                        label: {
                            show: true,
                            position: 'center',
                            color: pieOption.color,
                            fontSize: 12,
                            formatter: function (data) {
                                if (!pieOption.data.completed || !pieOption.data.total) {
                                    return '0%';
                                }
                                var proportion = (pieOption.data.completed / pieOption.data.total) * 100;
                                if (
                                    proportion.toString().indexOf('.') > 0 &&
                                    proportion.toString().indexOf('.') + 2 < proportion.toString().length
                                ) {
                                    return proportion.toFixed(2) + '%';
                                } else {
                                    return proportion + '%';
                                }
                            },
                        },
                    },
                ],
                tooltip: {
                    formatter: function (params) {
                        return params.name + ': ' + params.data.showValue;
                    },
                },
            },
        ],
    };