饼图环形1echarts 配置项内容和展示

      let imgSrc = 'data:image/png;base64,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';
// 数据初始化
let scale = 1,
    bgColor = "rgba(19,22,24,1)",
    valueColor = '#fff',
    echartData = [{
            name: "1分",
            value: 100
        },
        {
            name: "2分",
            value: 200
        },
        {
            name: "3分",
            value: 200
        },
        {
            name: "4分",
            value: 100
        },
        {
            name: "5分",
            value: 100
        }
    ];
// 数据整理
let total = echartData.reduce((a, b) => {
    return a + b.value
}, 0);
option = {
    backgroundColor: bgColor,
    color: ['#06FDBC', '#F6FE05', '#07B0FE', '#FDB408', '#00DB1C', '#0188FE'],
    tooltip: {
        trigger: "item",
        formatter: "{b}: {c} ({d}%)"
    },
    graphic: {
        elements: [{
            type: "image",
            style: {
                image: imgSrc,
                width: 240,
                height: 240
            },
            left: 'center',
            top: "center",
            position: [100, 100]
        }]
    },
    title: {
        text: '{a|' + total + '}\n{b|评分总人数}',
        top: 'center',
        textAlign: "center",
        left: "50%",
        textStyle: {
            color: "#fff",
            rich: {
                a: {
                    fontSize: 36 * scale,
                    lineHeight: 48 * scale,
                    fontWeight: 'bold'
                },
                b: {
                    fontSize: 20 * scale
                }
            }
        }
    },
    legend: {
        top: "center",
        orient: 'vertical',
        left: "75%",
        icon: "rect",
        itemWidth: 2,
        itemHeight: 12,
        itemGap: 13,
        textStyle: {
            rich: {
                name: {
                    color: "#fff",
                    fontSize: 12 * scale,
                    width: 60
                },
                percent: {
                    color: '#18DB9F',
                    fontSize: 18 * scale
                },
                unit: {
                    color: "#5A717A",
                    fontSize: 12 * scale
                }
            }
        },
        formatter: function(name) {
            let res = echartData.filter(v => v.name === name);
            let percent = ((res[0].value * 100) / total).toFixed(2);
            return (
                "{name| " + name + "}{percent| " + percent + "}" + "{unit| %}"
            );
        }
    },
    toolbox: {
        show: false
    },
    series: [{
        name: "",
        type: "pie",
        radius: [120, 135],
        center: ["50%", "50%"],
        label: {
            normal: {
                show: false
            }
        },
        // hoverAnimation: false,
        hoverOffset: 5,
        itemStyle: {
            normal: {
                borderColor: bgColor,
                borderWidth: 1
            }
        },
        data: echartData
    }]
};