折扇

描述:当前是关于Echarts图表中的 旭日图 示例。
 
            var data = [{
    value: 50,
    itemStyle: {
        color: '#b37119'
    },
    children: [{
        value: 5,
        itemStyle: {
            color: '#f1c067'
        },
        children: [{
            value: 1,
            itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
            },
            children: [{
                name: '情',
                value: 2.5,
                itemStyle: {
                    borderWidth: 1,
                    color: '#e5e0dc'
                },
                children: [{
                    name: '百',
                    value: 2.5,
                    itemStyle: {
                        borderWidth: 1,
                        color: '#e5e0dc'
                    }
                }, {
                    name: '媚',
                    value: 2.5,
                    itemStyle: {
                        borderWidth: 1,
                        color: '#faf3ed'
                    }
                }]
            }, {
                name: '之',
                value: 2.5,
                itemStyle: {
                    borderWidth: 1,
                    color: '#faf3ed'
                }
            }]
        }, {
            value: 1,
            itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
            }
        }, {
            value: 1,
            itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
            }
        }, {
            value: 1,
            itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
            }
        }, {
            value: 1,
            itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
            }
        }]
    }, {
        value: 5,
        itemStyle: {
            color: '#f1c067'
        },
        children: [{
            value: 1,
            itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
            },
            children: [{
                name: '所',
                value: 2.5,
                itemStyle: {
                    borderWidth: 1,
                    color: '#e5e0dc'
                },
                children: [{
                    name: '千',
                    value: 2.5,
                    itemStyle: {
                        borderWidth: 1,
                        color: '#e5e0dc'
                    }
                }, {
                    name: '红',
                    value: 2.5,
                    itemStyle: {
                        borderWidth: 1,
                        color: '#faf3ed'
                    }
                }]
            }, {
                name: '钟',
                value: 2.5,
                itemStyle: {
                    borderWidth: 1,
                    color: '#faf3ed'
                }
            }]
        }, {
            value: 1,
            itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
            }
        }, {
            value: 1,
            itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
            }
        }, {
            value: 1,
            itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
            }
        }, {
            value: 1,
            itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
            }
        }]
    }, {
        value: 5,
        itemStyle: {
            opacity: 0
        }
    }, {
        value: 5,
        itemStyle: {
            opacity: 0
        }
    }, {
        value: 5,
        itemStyle: {
            opacity: 0
        }
    }, {
        value: 5,
        itemStyle: {
            opacity: 0
        }
    }, {
        value: 5,
        itemStyle: {
            opacity: 0
        }
    }, {
        value: 5,
        itemStyle: {
            opacity: 0
        }
    }, {
        value: 5,
        itemStyle: {
            color: '#f1c067'
        },
        children: [{
            value: 1,
            itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
            },
            children: [{
                name: '唯',
                value: 2.5,
                itemStyle: {
                    borderWidth: 1,
                    color: '#e5e0dc'
                },
                children: [{
                    name: '人',
                    value: 2.5,
                    itemStyle: {
                        borderWidth: 1,
                        color: '#e5e0dc'
                    }
                }, {
                    name: '世',
                    value: 2.5,
                    itemStyle: {
                        borderWidth: 1,
                        color: '#faf3ed'
                    }
                }]
            }, {
                name: '独',
                value: 2.5,
                itemStyle: {
                    borderWidth: 1,
                    color: '#faf3ed'
                }
            }]
        }, {
            value: 1,
            itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
            }
        }, {
            value: 1,
            itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
            }
        }, {
            value: 1,
            itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
            }
        }, {
            value: 1,
            itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
            }
        }]
    }, {
        value: 5,
        itemStyle: {
            color: '#f1c067'
        },
        children: [{
            value: 1,
            itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
            },
            children: [{
                name: '你',
                value: 2.5,
                itemStyle: {
                    borderWidth: 1,
                    color: '#e5e0dc'
                },
                children: [{
                    name: '间',
                    value: 2.5,
                    itemStyle: {
                        borderWidth: 1,
                        color: '#e5e0dc'
                    }
                }, {
                    name: '有',
                    value: 2.5,
                    itemStyle: {
                        borderWidth: 1,
                        color: '#faf3ed'
                    }
                }]
            }, {
                name: '我',
                value: 2.5,
                itemStyle: {
                    borderWidth: 1,
                    color: '#faf3ed'
                }
            }]
        }, {
            value: 1,
            itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
            }
        }, {
            value: 1,
            itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
            }
        }, {
            value: 1,
            itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
            }
        }, {
            value: 1,
            itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
            }
        }]
    }]
}];

option = {
    backgroundColor: '#383431',
    title: {
        show: true,
        text: '百媚千红,情之所钟。',
        textStyle: {
            fontSize:20,
            color: '#fff'
        },
        left: 'center',
        top: 20
    },
    series: {
        silent: true,
        type: 'sunburst',
        data: data,
        radius: [0, '10%'],
        center: ['50%', '70%'],
        sort: null,
        emphasis: {
            focus: 'ancestor'
        },
        label: {
            rotate: 'tangential',
            fontSize: 20,
            color: '#000',
            fontFamily: 'serif',
            fontStyle: 'oblique'
        },
        levels: [{}, {
            r0: 5,
            r: '5%'
        }, {
            r0: '5%',
            r: '20%',
        }, {
            r0: '20%',
            r: '40%',
        }, {
            r0: '40%',
            r: '70%'
        }, {
            r0: '70%',
            r: '100%'
        }]
    }
}