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

最新推荐文章于 2024-05-15 14:35:11 发布

原创最新推荐文章于 2024-05-15 14:35:11 发布 · 4.8k 阅读

1 ·

CC 4.0 BY-SA版权

echart 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用Ajax调用API获取人员类型数据，并利用ECharts库动态生成饼状图的JavaScript函数。该函数首先请求服务器上的数据，然后解析返回的数据，自定义颜色方案，最后将数据和配置选项传递给ECharts初始化的图表实例。

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();