模块预览echarts sunburst配置项内容和展示
配置项如下
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,
},
},
],
},
};
截图如下
