Echarts——sunburt 旭日图

将非结构化数据转换为结构化数据：

sunburst是echartsv4.0新增的功能。

<div id="demo" style="width: 100%;height: 800px;"></div>

var myChart = echarts.init(document.getElementById('demo'));
    var data = [{
        name: 'BasicDataMaintenance',
        //value:1,
        itemStyle: {
            color: '#da0d68'
        },
        children:[{
            name: 'GetSchoolInfo',
           // value:1,
            itemStyle: {
                color: '#975e6d'
            },
            children:[{
                name: 'GetEduBureauInfoOrSchoolInfo',
                value:6,
                itemStyle: {
                    color: '#e0719c'
                },
            }]
        }]
    },{
        name: 'BasicDataMaintenanceTeacherDAL',
        //value:1,
        itemStyle: {
            color: '#7ac141'
        },
        children:[{
            name: 'SaveTeacherInfo',
            value:8,
            itemStyle: {
                color: '#a7c160'
            }
        }]
    },{
        name: 'BasicShowInfo',
        itemStyle: {
            color: '#ebb40f'
        },
        children:[{
            name: 'SchoolHouseShowInfo',
            itemStyle: {
                color: '#ebdc7c'
            },
            children:[{
                name: 'GetAffiliatedCampusInfo',
                value:15,
                itemStyle: {
                    color: '#e1eb21'
                },
                children:[{
                    name: 'GetShoolHouseInfoList',
                    value:1,
                    itemStyle: {
                        color: '#c3eb75'
                    }
                }]
            },{
                name: 'GetSchoolExpandInfoList',
                value:1,
                itemStyle: {
                    color: '#c9eb18'
                }
            },{
                name: 'GetShoolHouseInfoList',
                value:3,
                itemStyle: {
                    color: '#b5eb7d'
                },
                children:[{
                    name: 'GetAffiliatedCampusInfo',
                    value:1,
                    itemStyle: {
                        color: '#ebeb6a'
                    }
                }]
            }]
        }]
    },{
        name: 'TaskProgress',
        itemStyle: {
            color: '#0aa3b5'
        },
        children:[{
            name: 'getTaskProgressList',
            value:11,
            itemStyle: {
                color: '#8db5a5'
            },
            children:[{
                name: 'InsertTaskProgress',
                value:4,
                itemStyle: {
                    color: '#4596b5'
                },
                children:[{
                    name: 'getTaskProgressList',
                    value:1,
                    itemStyle: {
                        color: '#95b59f'
                    },
                    children:[{
                        name: 'updateSchoolOrOrgTaskProgress',
                        value:1,
                        itemStyle: {
                            color: '#118bb5'
                        },
                        children:[{
                            name: 'InsertTaskProgress',
                            value:1,
                            itemStyle: {
                                color: '#45b589'
                            },
                            children:[{
                                name: 'getTaskProgressList',
                                value:1,
                                itemStyle: {
                                    color: '#98b560'
                                }
                            }]
                        }]
                    }]
                },{
                    name: 'updateSchoolOrOrgTaskProgress',
                    value:1,
                    itemStyle: {
                        color: '#8db5a5'
                    },
                    children:[{
                        name: 'getTaskProgressList',
                        value:1,
                        itemStyle: {
                            color: '#2db51f'
                        },
                        children:[{
                            name: 'updateSchoolOrOrgTaskProgress',
                            value:1,
                            itemStyle: {
                                color: '#74b570'
                            },
                            children:[{
                                name: 'getTaskProgressList',
                                value:1,
                                itemStyle: {
                                    color: '#70b55d'
                                },
                                children:[{
                                    name: 'updateSchoolOrOrgTaskProgress',
                                    value:1,
                                    itemStyle: {
                                        color: '#47b52e'
                                    },
                                    children:[{
                                        name: 'getTaskProgressList',
                                        value:1,
                                        itemStyle: {
                                            color: '#6683b5'
                                        }
                                    }]
                                }]
                            }]
                        }]
                    }]
                }]
            },{
                name: 'updateSchoolOrOrgTaskProgress',
                value:6,
                itemStyle: {
                    color: '#9d90b5'
                },
                children:[{
                    name: 'getTaskProgressList',
                    value:2,
                    itemStyle: {
                        color: '#b59c7f'
                    },
                    children:[{
                        name: 'updateSchoolOrOrgTaskProgress',
                        value:1,
                        itemStyle: {
                            color: '#b564b0'
                        },
                        children:[{
                            name: 'getTaskProgressList',
                            value:1,
                            itemStyle: {
                                color: '#a599b5'
                            },
                            children:[{
                                name: 'updateSchoolOrOrgTaskProgress',
                                value:1,
                                itemStyle: {
                                    color: '#b5a645'
                                },
                                children:[{
                                    name: 'InsertTaskProgress',
                                    value:1,
                                    itemStyle: {
                                        color: '#8db5a5'
                                    },
                                    children:[{
                                        name: 'updateSchoolOrOrgTaskProgress',
                                        value:1,
                                        itemStyle: {
                                            color: '#b5626d'
                                        },
                                        children:[{
                                            name: 'getTaskProgressList',
                                            value:1,
                                            itemStyle: {
                                                color: '#a9b55e'
                                            },
                                            children:[{
                                                name: 'InsertTaskProgress',
                                                value:1,
                                                itemStyle: {
                                                    color: '#b59ba6'
                                                },
                                                children:[{
                                                    name: 'updateSchoolOrOrgTaskProgress',
                                                    value:1,
                                                    itemStyle: {
                                                        color: '#906db5'
                                                    },
                                                    children:[{
                                                        name: 'getTaskProgressList',
                                                        value:1,
                                                        itemStyle: {
                                                            color: '#80b55c'
                                                        }
                                                    }]
                                                }]
                                            }]
                                        }]
                                    }]
                                }]
                            }]
                        }]
                    }]
                },{
                    name: 'InsertTaskProgress',
                    value:2,
                    itemStyle: {
                        color: '#7898b5'
                    },
                    children:[{
                        name: 'getTaskProgressList',
                        value:1,
                        itemStyle: {
                            color: '#8db5a5'
                        },
                        children:[{
                            name: 'InsertTaskProgress',
                            value:1,
                            itemStyle: {
                                color: '#acb558'
                            }
                        }]
                    }]
                }]
            }]
        },{
            name: 'InsertTaskProgress',
            value:22,
            itemStyle: {
                color: '#6b87b5'
            },
            children:[{
                name: 'getTaskProgressList',
                value:1,
                itemStyle: {
                    color: '#8ce443'
                }
            },{
                name: 'updateSchoolOrOrgTaskProgress',
                value:3,
                itemStyle: {
                    color: '#a197b5'
                },
                children:[{
                    name: 'InsertTaskProgress',
                    value:1,
                    itemStyle: {
                        color: '#468ab5'
                    },
                    children:[{
                        name: 'updateSchoolOrOrgTaskProgress',
                        itemStyle: {
                            color: '#6b87b5'
                        },
                        children:[{
                            name: 'getTaskProgressList',
                            itemStyle: {
                                color: '#2249b5'
                            },
                            children:[{
                                name: 'updateSchoolOrOrgTaskProgress',
                                itemStyle: {
                                    color: '#57a5b5'
                                },
                                children:[{
                                    name: 'InsertTaskProgress',
                                    itemStyle: {
                                        color: '#6b6cb5'
                                    }
                                }]
                            }]
                        }]
                    }]
                }]
            }]
        },{
            name: 'updateSchoolOrOrgTaskProgress',
            value:11,
            itemStyle: {
                color: '#b58b3e'
            },
            children:[{
                name: 'getTaskProgressList',
                value:9,
                itemStyle: {
                    color: '#54b595'
                },
                children:[{
                    name: 'InsertTaskProgress',
                    value:1,
                    itemStyle: {
                        color: '#b59d7b'
                    }
                },{
                    name: 'updateSchoolOrOrgTaskProgress',
                    value:4,
                    itemStyle: {
                        color: '#8db57f'
                    },
                    children:[{
                        name: 'getTaskProgressList',
                        value:1,
                        itemStyle: {
                            color: '#b5939d'
                        },
                        children:[{
                            name: 'updateSchoolOrOrgTaskProgress',
                            value:1,
                            itemStyle: {
                                color: '#9b9db5'
                            }
                        }]
                    },{
                        name: 'InsertTaskProgress',
                        value:2,
                        itemStyle: {
                            color: '#83b587'
                        },
                        children:[{
                            name: 'getTaskProgressList',
                            value:2,
                            itemStyle: {
                                color: '#9190b5'
                            },
                            children:[{
                                name: 'updateSchoolOrOrgTaskProgress',
                                value:2,
                                itemStyle: {
                                    color: '#b54cb4'
                                },
                                children:[{
                                    name: 'getTaskProgressList',
                                    value:1,
                                    itemStyle: {
                                        color: '#8b56b5'
                                    },
                                    children:[{
                                        name: 'InsertTaskProgress',
                                        value:1,
                                        itemStyle: {
                                            color: '#b595aa'
                                        },
                                        children:[{
                                            name: 'getTaskProgressList',
                                            value:1,
                                            itemStyle: {
                                                color: '#b5767d'
                                            }
                                        }]
                                    }]
                                }]
                            }]
                        }]
                    }]
                }]
            },{
                name: 'InsertTaskProgress',
                value:2,
                itemStyle: {
                    color: '#54b595'
                },
                children:[{
                    name: 'updateSchoolOrOrgTaskProgress',
                    value:1,
                    itemStyle: {
                        color: '#54b595'
                    },
                    children:[{
                        name: 'InsertTaskProgress',
                        value:1,
                        itemStyle: {
                            color: '#54b595'
                        }
                    }]
                }]
            }]
        }]
    },{
        name: '年级信息',
        itemStyle: {
            color: '#187a2f'
        },
        children:[{
            name: 'EditSchoolGradeInfo',
            value:1,
            itemStyle: {
                color: '#7fd21e'
            }
        },{
            name: 'GradeUpgradeByOneButton',
            value:1,
            itemStyle: {
                color: '#b9f7aa'
            }
        }]
    },{
        name: '学生信息',
        itemStyle: {
            color: '#da1d23'
        },
        children:[{
            name: 'AddStudentInfo',
            value:3,
            itemStyle: {
                color: '#da510e'
            }
        },{
            name: 'BatchAddStudentInfo',
            value:1,
            itemStyle: {
                color: '#da2774'
            }
        },{
            name: 'ReduceStudentInfo',
            value:1,
            itemStyle: {
                color: '#da758f'
            }
        },{
            name: 'StudentGraduate',
            value:4,
            itemStyle: {
                color: '#da9db3'
            }
        }]
    }];

    var option = {
        title: {
            text: '用户行为轨迹',
            textStyle: {
                fontSize: 15,
                align: 'center'
            },
            /*subtextStyle: {
                align: 'center'
            },*/
        },
        series: {
            type: 'sunburst',
            center:['50%','40%'],
            //highlightPolicy: 'ancestor',
            data: data,
            radius: [0, '95%'],  //旭日图的半径
            // sort: null,
            levels: [{
                //留给数据下钻点的空白配置
            }, {              //靠内测的第一层
                r0: '5%',
                r: '15%',
                itemStyle: {
                    borderWidth: 2
                }
            },{               //第二层
                r0: '15%',
                r: '25%',
                label: {
                    align: 'left'
                }
            },{                  //第三层
                r0: '25%',
                r: '35%',
                label: {
                    align: 'left'
                }
            },{                  //第四层
                r0: '35%',
                r: '45%',
                label: {
                    align: 'left'
                }
            },{                  //第五层
                r0: '45%',
                r: '55%',
                label: {
                    align: 'left'
                }
            },{                  //第六层
                r0: '55%',
                r: '65%',
                label: {
                    align: 'left'
                }
            },{                  //第七层
                r0: '65%',
                r: '75%',
                label: {
                    align: 'left'
                }
            },{
                r0: '75%',
                r: '85%',
                label: {              //最后一层
                    position: 'outside',
                    padding: 3,
                    silent: false
                },
                itemStyle: {
                    borderWidth: 3
                }
            }]
        }
    };

    myChart.setOption(option);

效果图：