模块预览

描述:当前是关于Echarts图表中的 旭日图 示例。
 
            var data = [
    {
        name: '电子教材',
        itemStyle: {
            color: '#fbd479',
        },
        children: [
            {
                name: '初级教材',
                value: 1,
                itemStyle: {
                    color: '#ffc561',
                },
                children: [
                    {
                        name: '初级实训教材',
                        value: 1,
                        itemStyle: {
                            color: '#fcebba',
                        },
                    },
                    {
                        name: '初级理论教材',
                        value: 1,
                        itemStyle: {
                            color: '#fcebba',
                        },
                    },
                ],
            },
            {
                name: '中级教材',
                itemStyle: {
                    color: '#fdc13c',
                },
                children: [
                    {
                        name: '中级实训教材',
                        value: 1,
                        itemStyle: {
                            color: '#fcebba',
                        },
                    },
                    {
                        name: '中级理论教材',
                        value: 1,
                        itemStyle: {
                            color: '#fcebba',
                        },
                    },
                ],
            },
            {
                name: '高级教材',
                itemStyle: {
                    color: '#fdc13c',
                },
                children: [
                    {
                        name: '高级实训教材',
                        value: 1,
                        itemStyle: {
                            color: '#fcebba',
                        },
                    },
                    {
                        name: '高级理论教材',
                        value: 1,
                        itemStyle: {
                            color: '#fcebba',
                        },
                    },
                ],
            },
        ],
    },
    {
        name: '初级单项实训',
        itemStyle: {
            color: '#a7d692',
        },
        children: [
            {
                name: '全渠道数据采集',
                itemStyle: {
                    color: '#cddeba',
                },
                children: [
                    {
                        name: '工作任务一:门店全渠道数据采集',
                        value: 1,
                        itemStyle: {
                            color: '#edf3e7',
                        },
                    },
                    {
                        name: '工作任务二:周边商圈与推广渠道分析及监控',
                        value: 1,
                        itemStyle: {
                            color: '#edf3e7',
                        },
                    },
                    {
                        name: '工作任务三:kol反馈数据采集',
                        value: 1,
                        itemStyle: {
                            color: '#edf3e7',
                        },
                    },
                ],
            },
            {
                name: '门店基础操作',
                itemStyle: {
                    color: '#badeba',
                },
                children: [
                    {
                        name: '工作任务一:门店QSC协助与执行',
                        value: 1,
                        itemStyle: {
                            color: '#e7f3e7',
                        },
                    },
                    {
                        name: '工作任务二:门店规章制度执行与管理',
                        value: 1,
                        itemStyle: {
                            color: '#e7f3e7',
                        },
                    },
                    {
                        name: '工作任务三:培训的执行与管理',
                        value: 1,
                        itemStyle: {
                            color: '#e7f3e7',
                        },
                    },
                ],
            },
        ],
    },
    {
        name: '中级单项实训',
        itemStyle: {
            color: '#fd9d75',
        },
        children: [
            {
                name: '基础运营与管理概述',
                itemStyle: {
                    color: '#ffac66',
                },
                children: [
                    {
                        name: '',
                        value: 1,
                        itemStyle: {
                            color: '#ffd7b3',
                        },
                    },
                ],
            },
            {
                name: '门店全渠道数据分销',
                itemStyle: {
                    color: '#ffa04c',
                },
                children: [
                    {
                        name: '',
                        value: 1,
                        itemStyle: {
                            color: '#ffd7b3',
                        },
                    },
                ],
            },
            {
                name: '旅客画像分级与服务',
                itemStyle: {
                    color: '#ff8b26',
                },
                children: [
                    {
                        name: '工作任务一:QSC工作标准',
                        value: 1,
                        itemStyle: {
                            color: '#ffd7b3',
                        },
                    },
                    {
                        name: '工作任务二:工作标准的执行与监督',
                        value: 1,
                        itemStyle: {
                            color: '#ffd7b3',
                        },
                    },
                    {
                        name: '工作任务三:工作标准的执行与监督',
                        value: 1,
                        itemStyle: {
                            color: '#ffd7b3',
                        },
                    },
                    {
                        name: '工作任务四:工作标准的执行与监督',
                        value: 1,
                        itemStyle: {
                            color: '#ffd7b3',
                        },
                    },
                ],
            },
            {
                name: 'QSC工作制定与执行',
                itemStyle: {
                    color: '#ff7900',
                },
                children: [
                    {
                        name: '',
                        value: 1,
                        itemStyle: {
                            color: '#ffd7b3',
                        },
                    },
                ],
            },
        ],
    },
    {
        name: '单项实训',
        itemStyle: {
            color: '#eb7d70',
        },
        children: [
            {
                name: '案例与说明预览',
                itemStyle: {
                    color: '#fb6557',
                },
                children: [
                    {
                        name: '大众点评简介',
                        value: 1,
                        itemStyle: {
                            color: '#fdc9c5',
                        },
                    },
                    {
                        name: '推小游戏,发小样',
                        value: 1,
                        itemStyle: {
                            color: '#fdc9c5',
                        },
                    },
                    {
                        name: '某知名餐饮品牌的数字化运营之路',
                        value: 1,
                        itemStyle: {
                            color: '#fdc9c5',
                        },
                    },
                ],
            },
        ],
    },
    {
        name: 'VR场景',
        itemStyle: {
            color: '#0cb4d9',
        },
        children: [
            {
                name: '营销促销场景',
                itemStyle: {
                    color: '#0287f0',
                },
                children: [
                    {
                        name: '营销实地调研',
                        value: 1,
                        itemStyle: {
                            color: '#a7d5fb',
                        },
                    },
                    {
                        name: '营销SWOT分析',
                        value: 1,
                        itemStyle: {
                            color: '#a7d5fb',
                        },
                    },
                    {
                        name: '营销目标制定',
                        value: 1,
                        itemStyle: {
                            color: '#a7d5fb',
                        },
                    },
                    {
                        name: '投诉渠道选择',
                        value: 1,
                        itemStyle: {
                            color: '#a7d5fb',
                        },
                    },
                ],
            },
            {
                name: '门店运营场景',
                itemStyle: {
                    color: '#1a90f0',
                },
                children: [
                    {
                        name: '',
                        value: 1,
                        itemStyle: {
                            color: '#a7d5fb',
                        },
                    },
                ],
            },
            {
                name: '商品晨练场景',
                itemStyle: {
                    color: '#1a90f0',
                },
                children: [
                    {
                        name: '',
                        value: 1,
                        itemStyle: {
                            color: '#a7d5fb',
                        },
                    },
                ],
            },
            {
                name: '门店采购场景',
                itemStyle: {
                    color: '#60aff1',
                },
                children: [
                    {
                        name: '',
                        value: 1,
                        itemStyle: {
                            color: '#a7d5fb',
                        },
                    },
                ],
            },
            {
                name: '新渠道场景',
                itemStyle: {
                    color: '#85bff0',
                },
                children: [
                    {
                        name: '',
                        value: 1,
                        itemStyle: {
                            color: '#a7d5fb',
                        },
                    },
                ],
            },
        ],
    },
];
option = {
    title: {
        text: '',
        subtext: '',
        textStyle: {
            fontSize: 14,
            align: 'center',
        },
        subtextStyle: {
            align: 'center',
        },
        sublink: 'https://worldcoffeeresearch.org/work/sensory-lexicon/',
    },
    series: {
        type: 'sunburst',
        data: data,
        radius: [0, '95%'],
        sort: undefined,
        emphasis: {
            focus: 'ancestor',
        },
        levels: [
            {},
            {
                r0: '10%',
                r: '35%',
                itemStyle: {
                    borderWidth: 0,
                },
                label: {
                    rotate: 'tangential',
                },
            },
            {
                r0: '35%',
                r: '70%',
                label: {
                    align: 'center',
                    color: '#fff',
                },
                itemStyle: {
                    borderWidth: 0,
                },
            },
            {
                r0: '70%',
                r: '72%',
                label: {
                    position: 'outside',
                    padding: 3,
                    silent: false,
                },
                itemStyle: {
                    borderWidth: 0,
                },
            },
        ],
    },
};