合同情况饼图echarts 饼配置项内容和展示

      var iconClass = [
    { color: 'rgba(97, 183, 206, 1)', icon: 'icon-custom-design' },
    { color: 'rgba(115, 97, 208, 1)', icon: 'icon-jiance' },
    { color: 'rgba(69, 224, 166, 1)', icon: 'icon-caigoudingdan' },
    { color: 'rgba(229, 187, 86, 1)', icon: 'icon-shigong' },
    { color: 'rgba(206, 98, 98, 1)', icon: 'icon-hetong' },

    { color: 'rgba(67, 213, 160, 1)', icon: 'icon-custom-design' },
    { color: 'rgba(27, 133, 190, 1)', icon: 'icon-jiance' },
    { color: 'rgba(116, 97, 209, 1)', icon: 'icon-caigoudingdan' },
    { color: 'rgba(255,20,147, 1)', icon: 'icon-shigong' },
    { color: 'rgba(75,0,130, 1)', icon: 'icon-hetong' },

    { color: 'rgba(0,0,255, 1)', icon: 'icon-custom-design' },
    { color: 'rgba(0,191,255, 1)', icon: 'icon-jiance' },
    { color: 'rgba(0,255,255, 1)', icon: 'icon-caigoudingdan' },
    { color: 'rgba(72,209,204, 1)', icon: 'icon-shigong' },
    { color: 'rgba(0,250,154, 1)', icon: 'icon-hetong' },

    { color: 'rgba(0,100,0, 1)', icon: 'icon-custom-design' },
    { color: 'rgba(34,139,34, 1)', icon: 'icon-jiance' },
    { color: 'rgba(151, 223, 172, 1)', icon: 'icon-caigoudingdan' },
    { color: 'rgba(255,99,71, 1)', icon: 'icon-shigong' },
    { color: 'rgba(143,188,143, 1)', icon: 'icon-hetong' },

    { color: 'rgba(24, 173, 223, 1)', icon: 'icon-custom-design' },
    { color: 'rgba(0,0,205, 1)', icon: 'icon-jiance' },
    { color: 'rgba(148,0,211, 1)', icon: 'icon-caigoudingdan' },
    { color: 'rgba(0,250,127, 1)', icon: 'icon-shigong' },
    { color: 'rgba(50,205,50, 1)', icon: 'icon-hetong' },
];
var resData = [
    {
        ZSJT_ProjectId: '6686084c-b136-408b-b2c6-963c14defde5',
        httypename: '施工合同',
        sortcode: '1',
        counthttype: 4,
        amthttype: 3110077557,
        amtljhttype: 0,
        color: 'rgba(97, 183, 206, 1)',
    },
    {
        ZSJT_ProjectId: '6686084c-b136-408b-b2c6-963c14defde5',
        httypename: '监理合同',
        sortcode: '2',
        counthttype: 2,
        amthttype: 28736768,
        amtljhttype: 0,
        color: 'rgba(115, 97, 208, 1)',
    },
    {
        ZSJT_ProjectId: '6686084c-b136-408b-b2c6-963c14defde5',
        httypename: '设计合同',
        sortcode: '3',
        counthttype: 1,
        amthttype: 45280000,
        amtljhttype: 0,
        color: 'rgba(69, 224, 166, 1)',
    },
    {
        ZSJT_ProjectId: '6686084c-b136-408b-b2c6-963c14defde5',
        httypename: '建设管理合同',
        sortcode: '4',
        counthttype: 0,
        amthttype: 0,
        amtljhttype: 0,
        color: 'rgba(229, 187, 86, 1)',
    },
    {
        ZSJT_ProjectId: '6686084c-b136-408b-b2c6-963c14defde5',
        httypename: '检测合同',
        sortcode: '5',
        counthttype: 1,
        amthttype: 9468790,
        amtljhttype: 0,
        color: 'rgba(206, 98, 98, 1)',
    },
    {
        ZSJT_ProjectId: '6686084c-b136-408b-b2c6-963c14defde5',
        httypename: '技术咨询合同',
        sortcode: '6',
        counthttype: 0,
        amthttype: 0,
        amtljhttype: 0,
        color: 'rgba(67, 213, 160, 1)',
    },
    {
        ZSJT_ProjectId: '6686084c-b136-408b-b2c6-963c14defde5',
        httypename: '科研合同',
        sortcode: '7',
        counthttype: 0,
        amthttype: 0,
        amtljhttype: 0,
        color: 'rgba(27, 133, 190, 1)',
    },
    {
        ZSJT_ProjectId: '6686084c-b136-408b-b2c6-963c14defde5',
        httypename: '采购合同',
        sortcode: '8',
        counthttype: 0,
        amthttype: 0,
        amtljhttype: 0,
        color: 'rgba(116, 97, 209, 1)',
    },
    {
        ZSJT_ProjectId: '6686084c-b136-408b-b2c6-963c14defde5',
        httypename: '廉政合同',
        sortcode: '9',
        counthttype: 0,
        amthttype: 0,
        amtljhttype: 0,
        color: 'rgba(255,20,147, 1)',
    },
    {
        ZSJT_ProjectId: '6686084c-b136-408b-b2c6-963c14defde5',
        httypename: '征地拆迁',
        sortcode: '10',
        counthttype: 0,
        amthttype: 0,
        amtljhttype: 0,
        color: 'rgba(75,0,130, 1)',
    },
    {
        ZSJT_ProjectId: '6686084c-b136-408b-b2c6-963c14defde5',
        httypename: '租赁合同',
        sortcode: '11',
        counthttype: 0,
        amthttype: 0,
        amtljhttype: 0,
        color: 'rgba(0,0,255, 1)',
    },
    {
        ZSJT_ProjectId: '6686084c-b136-408b-b2c6-963c14defde5',
        httypename: '专项审计合同',
        sortcode: '12',
        counthttype: 0,
        amthttype: 0,
        amtljhttype: 0,
        color: 'rgba(0,191,255, 1)',
    },
    {
        ZSJT_ProjectId: '6686084c-b136-408b-b2c6-963c14defde5',
        httypename: '安全生产合同',
        sortcode: '13',
        counthttype: 0,
        amthttype: 0,
        amtljhttype: 0,
        color: 'rgba(0,255,255, 1)',
    },
    {
        ZSJT_ProjectId: '6686084c-b136-408b-b2c6-963c14defde5',
        httypename: '咨询',
        sortcode: '14',
        counthttype: 6,
        amthttype: 8528600,
        amtljhttype: 0,
        color: 'rgba(72,209,204, 1)',
    },
    {
        ZSJT_ProjectId: '6686084c-b136-408b-b2c6-963c14defde5',
        httypename: '招标代理',
        sortcode: '15',
        counthttype: 2,
        amthttype: 520000,
        amtljhttype: 0,
        color: 'rgba(0,250,154, 1)',
    },
    {
        ZSJT_ProjectId: '6686084c-b136-408b-b2c6-963c14defde5',
        httypename: '管线迁移',
        sortcode: '16',
        counthttype: 0,
        amthttype: 0,
        amtljhttype: 0,
        color: 'rgba(0,100,0, 1)',
    },
    {
        ZSJT_ProjectId: '6686084c-b136-408b-b2c6-963c14defde5',
        httypename: '代建',
        sortcode: '17',
        counthttype: 0,
        amthttype: 0,
        amtljhttype: 0,
        color: 'rgba(34,139,34, 1)',
    },
    {
        ZSJT_ProjectId: '6686084c-b136-408b-b2c6-963c14defde5',
        httypename: '其他',
        sortcode: '99',
        counthttype: 5,
        amthttype: 3552097,
        amtljhttype: 0,
        color: 'rgba(151, 223, 172, 1)',
    },
];
var optionData = [];
resData.map((item, index) => {
    const params = {
        value: item.counthttype || 0,
        name: item.httypename.replace('合同', ''),
        itemStyle: { color: item.color },
        labelLine: { show: item.counthttype > 0 ? true : false },
    };
    optionData.push(params);
});
option = {
    tooltip: {
        trigger: 'item',
    },
    legend: {
        orient: 'vertical',
        show: false,
        right: '0',
        y: 'center',
        itemWidth: 9,
        itemHeight: 9,
        itemGap: 12,
        textStyle: {
            color: 'rgba(255,255,255,.65)',
            fontSize: 12,
            padding: [0, 0, 0, 5],
        },
    },
    series: [
        {
            // name: '访问来源',
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['40%', '60%'],
            data: optionData,
            label: {
                show: true,
                position: 'outside',
                formatter: function (e) {
                    let data = e.data;
                    if (e.percent > 0) {
                        return '{a|' + e.name + '(' + e.percent + ')' + '}';
                    } else {
                        return '';
                    }
                },
                // formatter: "{a|{b} ({d}%)}",
                rich: {
                    a: {
                        color: 'rgba(255,255,255,.8)',
                        fontSize: 12,
                        padding: [-20, -60, 0, -60],
                    },
                },
            },
            labelLine: {
                normal: {
                    length: 10,
                    length2: 60,
                    lineStyle: {
                        width: 1,
                    },
                },
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
            },
        },
    ],
};