饼图echarts 饼配置项内容和展示

业务构成

      var giftImageUrl = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNDBweCIgaGVpZ2h0PSI0N3B4IiB2aWV3Qm94PSIwIDAgNDAgNDciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCAxNCBDb3B5IDM8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgNDcgNDAgNDcgNDAgMCAwIDAiPjwvcG9seWdvbj4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLplKbpsqTnuqIt5a6M56i/IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtOTMuMDAwMDAwLCAtNDM0Mi4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE0LUNvcHktMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTMuMDAwMDAwLCA0MzQyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTMyLDIxLjk0MjQ2OTIgQzMyLDE1LjM0Njg0OTIgMjYuNjI3MzkzMiwxMCAyMC4wMDExNzgyLDEwIEMxMy4zNzI2MDY4LDEwIDgsMTUuMzQ2ODQ5MiA4LDIxLjk0MjQ2OTIgQzgsMjUuODI3MTQyNyA5Ljg3MjE2NDk1LDI5LjI2NzQxODEgMTIuNzU3NTg0NywzMS40NDgzNjk4IEMxMy44MTU2MTEyLDMyLjc1MzQyMzEgMTUuMDIwOTEzMSwzNC43MzM4Njc5IDE1LjAyMDkxMzEsMzYuOTg2MzQ1NCBMMTUuMDIwOTEzMSw0MSBMMjQuOTc5MDg2OSw0MSBMMjQuOTc5MDg2OSwzNi45ODYzNDU0IEMyNC45NzkwODY5LDM0LjczMzg2NzkgMjYuMTg0Mzg4OCwzMi43NTM0MjMxIDI3LjI0MjQxNTMsMzEuNDQ4MzY5OCBDMzAuMTI3ODM1MSwyOS4yNjc0MTgxIDMyLDI1LjgyNzE0MjcgMzIsMjEuOTQyNDY5MiIgaWQ9IkZpbGwtMSIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE2LjA4MDEyMDIsMzkuOTIwNTA3MyBMMjQuOTE5ODc5OCwzOS45MjA1MDczIEwyNC45MTk4Nzk4LDM2LjQ1NjMwNjQgQzI0LjkxOTg3OTgsMzQuMDM1MzQyMyAyNi4yMTEzODQsMzEuOTMyNDk1MiAyNy4yOTUwNzM1LDMwLjU5MzM2MjggTDI3LjM5MDE3NTIsMzAuNTAyMTM4MSBDMzAuMjY2NzA3NCwyOC4zMjc5NDg1IDMxLjkxNjMxMDUsMjUuMDI4NjUzOSAzMS45MTYzMTA1LDIxLjQ1MjE3NjUgQzMxLjkxNjMxMDUsMTUuMTgyMjMwMiAyNi43OTQ5MDkxLDEwLjA4MDY2MjMgMjAuNTAwNTg3LDEwLjA4MDY2MjMgQzE0LjIwNTA5MDksMTAuMDgwNjYyMyA5LjA4MzY4OTQ4LDE1LjE4MjIzMDIgOS4wODM2ODk0OCwyMS40NTIxNzY1IEM5LjA4MzY4OTQ4LDI1LjAyNzQ4NDQgMTAuNzM0NDY2NywyOC4zMjc5NDg1IDEzLjYwOTgyNDgsMzAuNTAyMTM4MSBMMTMuNzAzNzUyNCwzMC41OTMzNjI4IEMxNC43ODg2MTYsMzEuOTMxMzI1NiAxNi4wODAxMjAyLDM0LjAzNDE3MjcgMTYuMDgwMTIwMiwzNi40NTYzMDY0IEwxNi4wODAxMjAyLDM5LjkyMDUwNzMgWiBNMjYuMDAzNTY5Miw0MSBMMTQuOTk2NDMwOCw0MSBMMTQuOTk2NDMwOCwzNi40NTYzMDY0IEMxNC45OTY0MzA4LDM0LjM3OTE4OTQgMTMuODY2OTUxNiwzMi41MjY2MjU1IDEyLjkwMTg0NTcsMzEuMzIxOTkxMiBDOS43ODU3OTgxNSwyOC45Mzk2MjIxIDgsMjUuMzQ2NzcxIDgsMjEuNDUyMTc2NSBDOCwxNC41ODY5MzAzIDEzLjYwNzQ3NjYsOSAyMC41MDA1ODcsOSBDMjcuMzkyNTIzNCw5IDMzLDE0LjU4NjkzMDMgMzMsMjEuNDUyMTc2NSBDMzMsMjUuMzQ2NzcxIDMxLjIxNDIwMTksMjguOTM5NjIyMSAyOC4wOTgxNTQzLDMxLjMyMTk5MTIgQzI3LjEzMzA0ODQsMzIuNTI2NjI1NSAyNi4wMDM1NjkyLDM0LjM4MDM1ODkgMjYuMDAzNTY5MiwzNi40NTYzMDY0IEwyNi4wMDM1NjkyLDQxIFoiIGlkPSJGaWxsLTMiIGZpbGw9IiMzQzNDM0MiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4KICAgICAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgPC9tYXNrPgogICAgICAgICAgICAgICAgPGcgaWQ9IkNsaXAtNiI+PC9nPgogICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IkZpbGwtNSIgZmlsbD0iIzNDM0MzQyIgbWFzaz0idXJsKCNtYXNrLTIpIiBwb2ludHM9IjE1IDQzLjkyMyAyNSA0My45MjMgMjUgNDMgMTUgNDMiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJGaWxsLTciIGZpbGw9IiMzQzNDM0MiIG1hc2s9InVybCgjbWFzay0yKSIgcG9pbnRzPSIxOCA0Ni45MjMgMjIgNDYuOTIzIDIyIDQ2IDE4IDQ2Ij48L3BvbHlnb24+CiAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iRmlsbC04IiBmaWxsPSIjM0MzQzNDIiBtYXNrPSJ1cmwoI21hc2stMikiIHBvaW50cz0iMTUuNjM1MDM4NCAyNiAxMyAyMi4yNzEzMjcgMTMuOTE1MzggMjEuNjQ2OTE5NCAxNS42MzUwMzg0IDI0LjA4MDU2ODcgMTcuODEzNTk0NCAyMSAxOS45OTIxNTA0IDI0LjA4MDU2ODcgMjIuMTcxOTE0MSAyMS4wMDExODQ4IDI0LjM1NjUwODIgMjQuMDgyOTM4NCAyNi4wODQ2MiAyMS42NDY5MTk0IDI3IDIyLjI3MjUxMTggMjQuMzU2NTA4MiAyNS45OTc2MzAzIDIyLjE3MzEyMTcgMjIuOTE3MDYxNiAxOS45OTA5NDI4IDI2IDE3LjgxMzU5NDQgMjIuOTE5NDMxMyI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IkZpbGwtOSIgZmlsbD0iIzNDM0MzQyIgbWFzaz0idXJsKCNtYXNrLTIpIiBwb2ludHM9IjE5IDYgMTkuOTIzIDYgMTkuOTIzIDAgMTkgMCI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IkZpbGwtMTAiIGZpbGw9IiMzQzNDM0MiIG1hc2s9InVybCgjbWFzay0yKSIgcG9pbnRzPSIwIDE4LjkyMyA2IDE4LjkyMyA2IDE4IDAgMTgiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJGaWxsLTExIiBmaWxsPSIjM0MzQzNDIiBtYXNrPSJ1cmwoI21hc2stMikiIHBvaW50cz0iMTAuMTk2OTk5NSA5IDYgNC44MDMwMDA0OSA2LjgwMzAwMDQ5IDQgMTEgOC4xOTY5OTk1MSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IkZpbGwtMTIiIGZpbGw9IiMzQzNDM0MiIG1hc2s9InVybCgjbWFzay0yKSIgcG9pbnRzPSIzNCAxOC45MjMgNDAgMTguOTIzIDQwIDE4IDM0IDE4Ij48L3BvbHlnb24+CiAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iRmlsbC0xMyIgZmlsbD0iIzNDM0MzQyIgbWFzaz0idXJsKCNtYXNrLTIpIiBwb2ludHM9IjMwLjgwMzAwMDUgOSAzMCA4LjE5Njk5OTUxIDM0LjE5Njk5OTUgNCAzNSA0LjgwMzAwMDQ5Ij48L3BvbHlnb24+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="
var chartName= ['五保', '低保', '残疾', '失独', '重点优抚', '突出贡献'];
var chartData= ['10','20','30','15','15','10']
var data=[]
var legendName=[]
for (var i=0;i<chartData.length;i++){
    var c={
        value:chartData[i],
        name:chartName[i]+chartData[i]+'%'
    }
    data[i]=c;
    legendName[i]=chartName[i]+chartData[i]+'%';
}
option = {
    backgroundColor: '#fff',
    tooltip: {
        trigger: 'item',
        formatter: "{b} : {d}% <br/> {c}"
    },
    graphic: {
        elements: [{
            type: 'image',
            style: {
                image: giftImageUrl,
                width: 110,
                height: 120
            },
            left: 'center',
            top: 'center'
        }]
    },
    legend: {
        orient: 'vertical',
        x: '70%',
        y:'center',
        itemWidth: 20,
        itemHeight: 20,
        align: 'left',
        textStyle: {
            fontSize:14,
            color: '#000'
        },
        data: legendName
    },
    series: [{
        type: 'pie',
        radius: ['27%', '45%'],
        center: ['50%', '50%'],
        color: ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'],
        data: data,
        labelLine: {
            normal: {
                show: false,
                length: 20,
                length2: 20,
                lineStyle: {
                    color: '#12EABE',
                    width: 2
                }
            }
        },
        label: {
            normal: {
                show:false,
                formatter: '{c|{c}}\n{hr|}\n{d|{d}%}',
                rich: {
                    b: {
                        fontSize: 20,
                        color: '#12EABE',
                        align: 'left',
                        padding: 4
                    },
                    hr: {
                        borderColor: '#12EABE',
                        width: '100%',
                        borderWidth: 2,
                        height: 0
                    },
                    d: {
                        fontSize: 20,
                        color: '#fff',
                        align: 'left',
                        padding: 4
                    },
                    c: {
                        fontSize: 20,
                        color: '#fff',
                        align: 'left',
                        padding: 4
                    }
                }
            }
        }
    }]
};