仪表盘echarts 饼配置项内容和展示

      let datas = {
    value: 50,
    name: '完成率',
};
option = {
    backgroundColor: '#04243E',
    title: {
        text: datas.value + '%',
        x: '49%',
        y: '48%',
        textAlign: 'center',
        textStyle: {
            fontWeight: 'bold',
            fontSize: 40,
            color: '#fff',
        },
    },
    // legend: {
    //     bottom: 100,
    //     itemWidth: 0,
    //     itemHeight: 0,
    //     formatter: '{a|{name}}',
    //     textStyle: {
    //         color: '#ffffff',
    //         backgroundColor: {
    //             image: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGkAAAAaCAYAAAC0NHJVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjg2RTUzOEVDRTg5QTExRThBMDFCRTJFMEFBRTVCMDNEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjg2RTUzOEVERTg5QTExRThBMDFCRTJFMEFBRTVCMDNEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODZFNTM4RUFFODlBMTFFOEEwMUJFMkUwQUFFNUIwM0QiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODZFNTM4RUJFODlBMTFFOEEwMUJFMkUwQUFFNUIwM0QiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7kNvmhAAADkklEQVR42uxZz4vNURQ/5/sm8itJQ1OTibKQFDuFUiQSzdJeKUrZUP4CGxulZGHL1k6ysbCxsJGVLITCQgqFMt/j3LpPt+Oce873zZt5b/G99ZmZ93333u+993N+fM4dJCLo23Q37EnqSepbT1JPUt96kvoWJmnhyJn+FKa8zYxhjoYxz9jESG6J+Xd63haf/xmGGE/iOeZx5fiyLyrvKeegSn/tnWjMW/ZtxDNQ5iyf/2B8yOufOElp/O5MkLd4b2MYGN+1jXMuMMjW5t+Y8ZrxZ5IkrWXsy4shwyJrm414lfRAac2oeBEG5oLAeqnyDgh8XsfYwHjJ+D0JkhIxB/NCvE2CcljYIRxZf1tWToEQZpFa6x8hXLbNGc8Z31eTpK2Mo4w1RayubcwiybJ0q1/NWyA4dpQQaBlgzdDKZ8mgTzCeMr6shrrbwTjJGDgH3DXRkyNMQOknDwYVg8FCiETDnOxTihgwvM0Kz6UQSrnpMePdSpK0l3G62HhUCEAgNI1i1VRRfhBM8OMQCeSQXI5bYjxivFoJkg4zThkhTYY8ENYnPUfKait0SULKeawDxMp46Jg/qeIhbdATrT0mop6NKyelyRcZx4pDaosDwUD8L0nTDpUqdZQnNkAYRnmIA7FWrX+jzEfGWlsljIJidJbhle85x5hlPHRCvUtS2uR5xqHKROiosVFDGAWKWHTEhmdA4KjK2vdRhVk7m8VM1L0cBjuTlGqga4wDitWjYqGkWKwVm1slscrvrAq/MUIXKYfUCEsnJZ+ScaNQu+3QjLTmTWD0abMI28a4yfjVhaR0e3CDsUdZpBYeBtkSNA+QuWm40DJ0WqSU72jEoaKS34bzLlWsn8RcYBCHTg7VPI4MgstzIuWMjjPmGNcZ3yLCYTvjFmNnJbFaXiPjuRaStNzk1SFezpRrtCze8hotGkRuO0gpD1DxSHDy3vDZW8YVxqcaSbsYdzJRNTkJgctSCCger9iNFKWR9yynAIagvKYO/Wv9PjMuMd5oJO1n3M1XGMttkY32zW4p5F1kvChJSvL6NmN9B+v0Lj296x/P2r3qPeJR0PGyVuvfwP//bpDzyfotUiuhc530k3GZ8WRI0vssIOT/gNBQJtqVCRmXoXIjlrjAiuT2bqot5anlG0smo6HQZB9rfGsU27LmagOSf/g5CaCrsGXuwQz/mO8jzNS2+/D14ywunL3Q54/pbvhXgAEA1WGvIVWG+pAAAAAASUVORK5CYII=`
    //         },
    //         rich: {
    //             a: {
    //                 align: 'center',
    //                 width: 200,
    //                 height: 32,
    //                 padding: [20, 0, 0, 0],
    //                 fontSize: 32
    //             }
    //         }
    //     }
    // },
    data: [
        {
            name: datas.name,
        },
    ],

    series: [
        {
            // 主圆环
            name: datas.name,
            type: 'pie',
            radius: ['40%', '70%'],
            startAngle: 225,
            color: [
                {
                    type: 'linear',
                    x: 1,
                    y: 0,
                    x2: 0,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(47,172,234,1)', // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: 'rgba(47,172,234,.1)', // 100% 处的颜色
                        },
                    ],
                },
                'transparent',
            ],
            hoverAnimation: true,
            legendHoverLink: false,
            z: 10,
            labelLine: {
                normal: {
                    show: false,
                },
            },
            data: [
                {
                    value: (75 * datas.value) / 100,
                },
                {
                    value: 100 - (75 * datas.value) / 100,
                },
            ],
        },
        {
            // 背景圆环
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            silent: true,
            startAngle: 225,
            labelLine: {
                normal: {
                    show: false,
                },
            },
            z: 5,
            data: [
                {
                    value: 75,
                    itemStyle: {
                        color: '#1A3B4C',
                        borderWidth: 2,
                        borderColor: '#1c516b',
                    },
                },
                {
                    value: 25,
                    itemStyle: {
                        color: 'transparent',
                    },
                },
            ],
        },
        {
            // 底部
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            startAngle: 230,
            labelLine: {
                show: false,
            },
            z: 15,
            silent: true,
            label: {
                show: true,
                rich: {
                    a: {
                        color: '#fff',
                        fontSize: 32,
                        padding: [0, -50, -180, 0],
                    },
                    b: {
                        color: '#fff',
                        fontSize: 32,
                        padding: [0, 0, -180, -50],
                    },
                },
                formatter: function (val) {
                    // 底部0和100
                    if (val.dataIndex === 0) {
                        return '{a|0}';
                    }
                    if (val.dataIndex === 2) {
                        return '{b|100}';
                    }
                },
            },
            data: [
                {
                    // 底部两条线
                    value: 1,
                    itemStyle: {
                        color: '#0096e0',
                    },
                },
                {
                    value: 800,
                    itemStyle: {
                        color: 'transparent',
                    },
                },
                {
                    value: 1,
                    itemStyle: {
                        color: '#0096e0',
                    },
                },
                {
                    value: 230,
                    itemStyle: {
                        color: 'transparent',
                    },
                },
            ],
        },
        {
            // 背景
            name: '',
            type: 'pie',
            cursor: 'default',
            radius: ['0', '80%'],
            hoverAnimation: false,
            legendHoverLink: false,
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(38,64,76,0.8)', // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: 'rgba(38,64,76,0)', // 100% 处的颜色
                        },
                    ],
                },
            },
            labelLine: {
                normal: {
                    show: false,
                },
            },
            data: [
                {
                    value: 1,
                },
            ],
        },
        {
            // 中间圈
            name: '',
            z: 5,
            type: 'pie',
            cursor: 'default',
            radius: ['32%', '32%'],
            hoverAnimation: false,
            legendHoverLink: false,
            labelLine: {
                normal: {
                    show: false,
                },
            },
            data: [
                {
                    value: 1,
                    itemStyle: {
                        normal: {
                            borderWidth: 2,
                            borderColor: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(2,144,214,0.8)', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(2,144,214,0)', // 100% 处的颜色
                                    },
                                ],
                            },
                        },
                    },
                },
            ],
        },
    ],
};