echarts 饼形图legend左右分布图 预警效果

使用前请先引入百度echarts.js插件。

效果如下：

 

let imgSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAllBMVEUAAAAY258A1JYY258X2p4l2Zkd3qMY258Y3KAY258Y258X3J8V2p0Y2Z8Y26AW3Z0Y258Y2p4X258Y258X258Y258Y258Y3J8Y3J8Y258T2Z0Y258Y3J8Z26AY26AY258Y258X258X3J8Y3KAX3J8X3J8a36UY3J8Y26AX258X258Y258Y258Y258Y26AX3J8Y3J8Y258TXRF7AAAAMXRSTlMA3QSHmQYR62bM1iwiH0oWdxuv9OW1kTs0qA372SfSx1XvbU9BoQm8lVqMf1/3wplypN/JAQAAA+pJREFUaN7t2dl6ojAYBuAPFNxFcANRUXGry7S5/5ub+UNtaIk1iXAwT/ueeNDAR1ZCih/L3yWnGarltBljAaoVMlJxVfqM9JD3G/Ib8jND7E10nt0JGa6vd0L8SfQCda+MsbYnjbdpbbEh0Wkwxt6gasbI3IeOxYgusqBqH+unUAZdA2V1RqjFVFFbkQ2UOQHTqwvVg7xCgzOW1aXTnIxbljVvBbVLT1aPCWCU8jGSt7sGy7OOnY96GGWIFqshMx2zovH0vWwk2sqgLmdwYYvJjbNWsyNRD+2UI8i+FrPM+jBprlYvm3oyZJnhxuYpB8owSjnzG/SW7wnHMDfzt9H1vTK819wBnhFmo3N02UPI7rtmZOnjWVPeMNeabL30dll+F8/pNvhtQsj1eWXaLp7hzekmiXd/qvMCfxw84UC3OHx3C8+iIieY2/COdRUadGveWNTiDf/R8IupW2wYOrJ/Hr9Ra1SsCTP+leaa4k7fMux7esJYZQ6k7J8VTNgj1U8Re05j0Gyuq4+aDdXZNW0tC0pmMR8hBhLGWF2j7KtJl1zp6TRq3YKCXjS3blygq7Pp7dP7iyamddM+zmRPvmSCDWyzXzUdKuzRrxBJywlrACtaUpTnLV21AHpMiG1ZOYEG1UVn0+nQVSHtogXpEx6LIW3lUcJDKExoynuvdjN4b66R1ndAF3BqN+ep8oDR6hMP2jo65xvTwlDUaIEp1Fx4RxoYabyKJqZnRwGfUGqWfN9s4I1mpQMVXZO9hLgyhYoBzT0bJlq0bYOCPXXfDkaaqo2wEQNRm0MPuHzcCl5DVNms69kAj0RUrP/U0Wk8VWnVAMamfMlefF8mpkWuB3M1vvD73y1xa7GXNWQfHuzre/xj74inuNlHzv7bj6TAhqlOKB41gNQ+oT8m/BFSzySjYbnZ7/2BHIkvxsWw7RlkUDN8fP/GHRSlYljsl3Tao50hTlb68Z1Fv02Dlw9wOxBnSloZYkE60c0c+Qv6IiYkpRhkTHLbhGJ7rcQC74z1U5Yig6MJ15cubQkgUrQWfFdkiNCm9MUe4XPKSH2eN0QGx4++pJuAE3Ipeiv+6kojS9iJzJzDbf6I87tGCHV+ukDOq/RDKvl6RBv2XZibFLpU9FRpzrKDDZdWgrTkf2gcNs28Nz7OfZTGtphcgBJtYybT6KFM/QYrandQrtkmSFp5f3YvNv5P6ameV5uifDX21QvKZg8LIa3/MwSnQsgF5Vsd63mnLaqwd/McVGCRsE/iwEXpWuyrHcrmsII5StcuhEQoXWixzxIfFfC7eR6qMR0IC1Rky27oS7QqqXVbtkJUxw7T1WqVLvBT/QXZze13haQUPgAAAABJRU5ErkJggg==';
// 数据初始化
let fontColor = '#18DB9F',
    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);
let legendOption = {
    top: "center",
    orient: 'vertical',
    icon: "circle",
    itemWidth: 12,
    itemGap: 13,
    textStyle: {
        fontSize: 14,
        rich: {
            name: {
                color: "#333333",
                padding: [10, 5, 30, 5],
                // align: 'right'
                // width: 60
            },
            percent: {
                color: fontColor,
                fontSize: 18,
                padding: [0, 5, 0, 5],
                // align: 'right'
            }
        }
    },
    formatter: function(name) {
        let res = echartData.filter(v => v.name === name);
        let percent = ((res[0].value * 100) / total).toFixed(2);
        return (
            "{name| " + name + "}\n{percent|" + percent + "%}"
        );
    }
};

// option
option = {
    backgroundColor: '#FFFFFF',
    color: ['#06FDBC', '#F6FE05', '#07B0FE', '#FDB408', '#00DB1C', '#0188FE'],
    tooltip: {
        trigger: "item",
        formatter: "{b}: {c} ({d}%)"
    },
    graphic: {
        elements: [{
            type: "image",
            z: 3,
            style: {
                image: imgSrc,
                width: 90,
                height: 90
            },
            left: 'center',
            top: "36%",
            position: [100, 100]
        }]
    },
    title: {
        text: '评分总人数',
        top: '58%',
        textAlign: "center",
        left: "50%",
        textStyle: {
            color: fontColor,
            fontSize: 20,
            fontWeight: '400'
        }
    },
    legend: [{
        left: 60,
        data: [ '5分', '4分', '3分'],
        align: 'right',

        ...legendOption
    }, {
        right: 60,
        data: ['1分', '2分'],
        align: 'left',
        ...legendOption
    }],
    toolbox: {
        show: false
    },
    series: [{
        name: "",
        type: "pie",
        radius: [0, 150],
        center: ["50%", "50%"],
        label: {
            show: false
        },
        itemStyle: {
            normal: {
                color: 'rgba(24,219,159,0.1)'
            },
        },
        hoverAnimation: false,
        data: [100]
    }, {
        name: "",
        type: "pie",
        radius: [120, 135],
        center: ["50%", "50%"],
        label: {
            normal: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                shadowBlur: 10,
                shadowColor: 'rgba(24,219,159,0.6)',
            }
        },
        hoverAnimation: false,
        hoverOffset: 5,
        data: echartData
    }, {
        name: "",
        type: "pie",
        radius: [0, 105],
        center: ["50%", "50%"],
        label: {
            show: false
        },
        itemStyle: {
            normal: {
                color: new echarts.graphic.RadialGradient(.5, .5, .7, [{
                        offset: 0.5,
                        color: '#ffffff'
                    },
                    {
                        offset: 1,
                        color: '#18DB9F'
                    }
                ], false)
            },
        },
        hoverAnimation: false,
        data: [100]
    }]
};