Echarts中太阳图(Sunburst)的实例
目前在项目中要实现一个Echars中的太阳图,但是Echars中的太阳图的数据格式是一个树形结构,如下代码格式如下:
var mapData = [ { name: '会员属性', itemStyle: { color: '#777' }, children: [ { name: '会员等级', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: 'V0', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: 'V1', value: 1, itemStyle: { color: 'red' }, label: { rotate: 'tangential' }, children: [ { name: 'V2', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: 'V3', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: 'V4', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: 'V5', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' } } ] } ] } ] } ] } ] } ] } ] }, { name: '登录活跃度', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: 'A0', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: 'A1', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: 'A2', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: 'A3', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: 'A4', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: 'A5', value: 1, label: { rotate: 'tangential' }, itemStyle: { color: '#777' } } ] } ] } ] } ] } ] } ] } ] }, { name: '司龄', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: '新手', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '次新手', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '老用户', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '超级老用户', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '骨灰级老用户', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '骨灰级超级老用户', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' } } ] } ] } ] } ] } ] } ] } ] } ] }, { name: '基础属性', itemStyle: { color: '#777' }, children: [ { name: '星座', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: '白羊', value: 1, label: { rotate: 'tangential' }, itemStyle: { color: '#777' } } ] } ] }, { name: '性别', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: '男', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '女', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '未知', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' } } ] } ] } ] } ] }, { name: '年龄', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: '30岁', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '财富积累阶段', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '财富巩固阶段', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '财富支出阶段', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' } } ] } ] } ] } ] } ] } ] }, { name: '购买决策动因', itemStyle: { color: '#777' }, children: [ { name: '邀请类型', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: '自然流量', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '流量渠道', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '邀请', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' } } ] } ] } ] } ] }, { name: '卡劵使用率排名', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: '[0%, 30%]', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '[30%, 50%]', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '[50%, 70%]', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '[70%, 90%]', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '[90%, 100%]', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' } } ] } ] } ] } ] } ] } ] }, { name: '卡劵偏好', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: '低', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '强', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' } } ] } ] } ] } ] }, { name: '账户分析', itemStyle: { color: '#777' }, children: [ { name: '资产风险值', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: '偏低分值2.7', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '标准值3.0', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' } } ] } ] } ] }, { name: '个人账户余额收益损失', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: '[0%, 30%]', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '[30%, 50%]', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '[50%, 70%]', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '[70%, 90%]', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '[90%, 100%]', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' } } ] } ] } ] } ] } ] } ] }, { name: '产品类别余额占比', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: '基金20%', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '互金非标70%', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '账户余额30%', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' } } ] } ] } ] } ] } ] }, { name: '投资偏好', itemStyle: { color: '#777' }, children: [ { name: '期限匹配结果', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: '不匹配', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '基本匹配', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' } } ] } ] } ] }, { name: '大类资产偏好', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: '现金及货币类20%', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '固定收益类30%', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '债券类40%', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '股票类10%', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '另类及其他0%', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' } } ] } ] } ] } ] } ] } ] }, { name: '期限偏好', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: '长期性偏好弱', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '中长期偏好弱', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '短期偏好中', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '极短期偏好中', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '极速流动性偏好强', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' } } ] } ] } ] } ] } ] } ] } ] }, { name: '风险容忍度', itemStyle: { color: '#777' }, children: [ { name: '风险容忍等级', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: '等级1', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '等级2', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '等级3', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '等级4', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '等级5', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' } } ] } ] } ] } ] } ] } ] }, { name: '风险测评等级', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: '保守型', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '稳健型', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '平衡型', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '成长型', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '进取型', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' } } ] } ] } ] } ] } ] } ] } ] }, { name: '风险承受能力', itemStyle: { color: '#777' }, children: [ { name: '风险承受能力', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: '等级1', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '等级2', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '等级3', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '等级4', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '等级5', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' } } ] } ] } ] } ] } ] } ] }, { name: '客户短期资金潜力', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: '关注', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '低', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '中', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '高', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '超高', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' } } ] } ] } ] } ] } ] } ] }, { name: '家庭收入', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: '15万以下', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '15-30万元', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '30-50万元', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '50-100万元', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '100-500万元', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '500万元以上', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' } } ] } ] } ] } ] } ] } ] } ] } ] }, { name: '投资目标', itemStyle: { color: '#777' }, children: [ { name: '同一风险等级', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: '[0,30%]', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '[30%,50%]', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '[50%,70%]', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '[70%,90%]', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '[90%,100%]', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' } } ] } ] } ] } ] } ] } ] }, { name: '实际收益率偏离度', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: '远未实现', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '稍微实现', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '稍超期望', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '超期望', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '远超期望', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' } } ] } ] } ] } ] } ] } ] }, { name: '综合实际收益率', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: '等级1', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '等级2', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '等级3', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '等级4', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' }, children: [ { name: '等级5', value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' } } ] } ] } ] } ] } ] } ] } ] } ];