echart 环形图 ---- 配置 legend，label，颜色，间距

关注

原创最新推荐文章于 2026-02-07 02:10:44 发布 4.8k 阅读 AI 写同款· GEO 优化 ›

echarts绘制嵌套环形图(南丁格尔玫瑰图) 根据专业总人数和学院总人数绘制嵌套环形图首先，echarts的基本步骤引入js，准备容器，初始化实例， <script src="lib/echarts.min.js"></script> <style> .box{ width: 900px; height: 500px; background-color:#BBFFFF; } </style> < 阅读详情

function loadPersonTypeChart() {
    $.ajax({
        url: API.AREAOVERVIEW.AREAPERSONTYPE.url(),
        success: function (res) {
            var data = res.data,
                legendData = [];
            $.each(data, function (index, val) {
                legendData.push(val.name);
            });
            var option = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} {b} : {c} ({d}%)"
                },
                legend: {
                    icon: "circle", //设置形状
                    itemWidth: 10,  // 设置大小
                    itemHeight: 10,
                    itemGap: 15, // 设置间距
                    orient: 'vertical',
                    left: 'right',
                    data: legendData
                },
                series : [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['40%', '65%'],
                        center: ['44%', '54%'],
                        data: data,
                        //标示线
                        label : {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: "#42436A"
                                },
                            },
                        },
                        //指示文字
                        labelLine : {
                            normal: {
                                lineStyle: {
                                    color: '#e4e4e4'
                                },
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderWidth: 2, //设置border的宽度有多大
                                borderColor:'#fff',
                                // 设置饼图的颜色
                                color: function(params) {
                                    //自定义颜色
                                    var colorList = ["#81cec3","#f26e69" ,"#41a7f6","#5e72e5","#ffe8a0","#f4b5d9"];
                                    return colorList[params.dataIndex]
                                }
                            },
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            var personTypeChart = echarts.init(document.getElementById('person-type-chart'));
            personTypeChart.setOption(option);
        }
    });
}
loadPersonTypeChart();