echarts饼状图案例

效果：

 

 关键代码：

$(function() {
    //临时数据
    var tempData = [{
                        value: 5,
                        name: '工伤保险信息10项'
                        
                    },
                    {
                        value: 16,
                        name: '失业保险信息8项'
                    },
                    {
                        value: 15,
                        name: '医疗保险信息9项'
                    },
                    {
                        value: 10,
                        name: '生育保障9项'
                    },
                    {
                        value: 15,
                        name: '养老保险11项'
                    }
                ];
    
    // 最终输出数据
    var result = [];
    
    // 颜色
    var color=['#00F0FF', '#00FFD8', '#00FF78', '#0083FE', '#00BFFF'];
    
    // 间隔数据的样式
    var placeHolderStyle = {
        normal: {
            label: {
                show: false
            },
            labelLine: {
                show: false
            },
            color: 'rgba(0, 0, 0, 0)',
            borderColor: 'rgba(0, 0, 0, 0)',
            borderWidth: 0
        }
    };
    
    // 循环加入间隔数据
    for (var i = 0; i < tempData.length; i++) {
        result.push({
            value: tempData[i].value,
            name: tempData[i].name,
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    shadowBlur: 20,
                    borderColor:color[i],
                    shadowColor: color[i]
                }
            }
        }, {
            value: 2,
            name: '',
            itemStyle: placeHolderStyle // 间隔数据
        });
    }
    
    
    // 设置字体样式
    var rich = {
                    b: { // 名字
                        fontSize: 18,
                        color: '#aae8ff',
                        align: 'left',
                        padding: 2
                    },
                    hr: { // 分割线
                        borderColor: '#00ffff',
                        width: '100%',
                        borderWidth: 1,
                        height: 0
                    },
                    w: { // 数据存量
                        fontSize: 18,
                        color: '#aae8ff',
                        align: 'left',
                        padding: 2
                    },
                    c: { // 数据
                        fontSize: 18,
                        align: 'center',
                        padding: 2,
                        color: '#53C6F2'
                    },
                    a: { // 单位
                        fontSize: 18,
                        align: 'center',
                        padding: 2,
                        color: '#53C6F2'
                    }
                }

    var option = {
        backgroundColor: 'transparent',// 画布背景色
        tooltip: { // 提示框
            trigger: 'item',
            formatter: "{b} : {d}%"
            //formatter: "{b} : {d}% <br/> {c}"
        },
        series: [{
                type: 'pie',
                radius: ['50%', '60%'],//内 外圆半径
                center: ['50%', '50%'],
                color: ['#00F0FF', '#00FFD8', '#00FF78', '#0083FE', '#00BFFF'],// 色块填充颜色
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'outside',
                            color: '#ddd',
                            formatter: function(params) {
                                var percent = 0;
                                var total = 0;
                                for (var i = 0; i < tempData.length; i++) {
                                    total += tempData[i].value;
                                }
                                percent = ((params.value) * 1000).toFixed(0);
                                if(params.name !== '') {
                                   return  '{b|'+params.name+'} \n {hr|} \n {w|数据存量:} {c|'+percent+'} {a|条}'
                                }else {
                                    return '';
                                }
                            },
                            rich: rich
                        },
                        labelLine: {
                            length:20,
                            length2:30,
                            show: true,
                            color:'#00ffff'
                        }
                    }
                },
                data: result
                /*labelLine: {
                    normal: {
                        show: true,
                        length: 20,
                        length2: 30,
                        lineStyle: {
                            color: '#CCCCCC',
                            width: 2
                        }
                    }
                },*/
                /*label: {
                    normal: {
                        //formatter: '{b|{b}} \n {hr|} \n {w|数据存量:} {c|{c}%} {a|条}',
                        formatter: '{b|{b}} \n {hr|} \n {w|数据存量:} {c|{c}} {a|条}',
                        rich: {
                            b: { // 名字
                                fontSize: 18,
                                color: '#94C8DC',
                                align: 'left',
                                padding: 2
                            },
                            hr: { // 分割线
                                borderColor: '#CCCCCC',
                                width: '100%',
                                borderWidth: 2,
                                height: 0
                            },
                            w: { // 数据存量
                                fontSize: 18,
                                color: '#94C8DC',
                                align: 'left',
                                padding: 2
                            },
                            c: { // 数据
                                fontSize: 18,
                                align: 'center',
                                padding: 2,
                                color: '#53C6F2'
                            },
                            a: { // 单位
                                fontSize: 18,
                                align: 'center',
                                padding: 2,
                                color: '#53C6F2'
                            }
                        } //rich end
                    }
                } //lable end*/
            }

        ]// series end
    };// option end
    var myChart = echarts.init(document.getElementById("bottom"));
    myChart.setOption(option);

})

参考：https://gallery.echartsjs.com/editor.html?c=xHkCjtI1Bm

参考：https://gallery.echartsjs.com/editor.html?c=xyYJrElaXF