echart 環形圖 ---- 配置 legend，label，顏色，間距

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