目前在项目中要实现一个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' } } ] } ] } ] } ] } ] } ] } ] } ];
View Code
但是呢?开发那边给的数据,不是输出的这样的树形结构,而是一个数组,比如如下数据:
var datas = [ { field: 'dr', item: [ { field: 'invite_type', item: [ { field: '未知', parentid: 'dr', percent: 0.2, value: -1, tfield: 'invite_type' }, { field: '流量渠道', parentid: 'dr', percent: 0.5, value: 0, tfield: 'invite_type' }, { field: '邀请', parentid: 'dr', percent: 0.3, value: 1, tfield: 'invite_type' } ], value: '邀请类型' }, { field: 'use_coupon_rate_rank', item: [ { field: '[0,30%)', parentid: 'dr', percent: 0.2, value: '0', tfield: 'use_coupon_rate_rank' }, { field: '[30%,50%)', parentid: 'dr', percent: 0.2, value: '0', tfield: 'use_coupon_rate_rank' }, { field: '[50%,70%)', parentid: 'dr', percent: 0.2, value: '0', tfield: 'use_coupon_rate_rank' }, { field: '[70%,90%)', parentid: 'dr', percent: 0.2, value: '0', tfield: 'use_coupon_rate_rank' }, { field: '[90%,100%)', parentid: 'dr', percent: 0.2, value: '0', tfield: 'use_coupon_rate_rank' } ], value: '卡券使用率排名' }, { field: 'use_coupon_prefer', item: [ { field: '未知', parentid: 'dr', percent: 0.2, value: '0', tfield: 'use_coupon_prefer' }, { field: '强', parentid: 'dr', percent: 0.2, value: '0', tfield: 'use_coupon_prefer' }, { field: '弱', parentid: 'dr', percent: 0.2, value: '0', tfield: 'use_coupon_prefer' } ], value: '卡券偏好' } ], value: '购买决策动因' }, { field: 'ip', item: [ { field: 'hope_period_result', item: [ { field: '未知', parentid: 'ip', percent: 0.2, value: '-1', tfield: 'hope_period_result' }, { field: '不匹配', parentid: 'ip', percent: 0.3, value: '0', tfield: 'hope_period_result' }, { field: '匹配', parentid: 'ip', percent: 0.5, value: '1', tfield: 'hope_period_result' } ], value: '期限匹配结果' }, { field: 'hope_period', item: [ { field: '长期偏好', parentid: 'ip', percent: 0.2, value: '-1', tfield: 'hope_period' }, { field: '中长期偏好', parentid: 'ip', percent: 0.2, value: '0', tfield: 'hope_period' }, { field: '短期偏好', parentid: 'ip', percent: 0.2, value: '1', tfield: 'hope_period' }, { field: '极短期偏好', parentid: 'ip', percent: 0.2, value: '-1', tfield: 'hope_period' }, { field: '急速流动性偏好', parentid: 'ip', percent: 0.2, value: '0', tfield: 'hope_period' } ], value: '期限偏好' } ], value: '投资偏好' }, { field: 'itf', item: [ { field: 'in_rank_year', item: [ { field: '[0,30%)', parentid: 'itf', percent: 0.2, value: '0', tfield: 'in_rank_year' }, { field: '[30%,50%)', parentid: 'itf', percent: 0.2, value: '0', tfield: 'in_rank_year' }, { field: '[50%,70%)', parentid: 'itf', percent: 0.2, value: '0', tfield: 'in_rank_year' }, { field: '[70%,90%)', parentid: 'itf', percent: 0.2, value: '0', tfield: 'in_rank_year' }, { field: '[90%,100%)', parentid: 'itf', percent: 0.2, value: '0', tfield: 'in_rank_year' } ], value: '同一风险等级排名' }, { field: 'cr_last_year_value', item: [ { field: '等级一', parentid: 'itf', percent: 0.2, value: '0', tfield: 'cr_last_year_value' }, { field: '等级二', parentid: 'itf', percent: 0.2, value: '0', tfield: 'cr_last_year_value' }, { field: '等级三', parentid: 'itf', percent: 0.2, value: '0', tfield: 'cr_last_year_value' }, { field: '等级四', parentid: 'itf', percent: 0.2, value: '0', tfield: 'cr_last_year_value' }, { field: '等级五', parentid: 'itf', percent: 0.2, value: '0', tfield: 'cr_last_year_value' } ], value: '综合实际收益率' }, { field: 'real_rate_deviate_year', item: [ { field: '远未实现', parentid: 'itf', percent: 0.2, value: '0', tfield: 'real_rate_deviate_year' }, { field: '稍未实现', parentid: 'itf', percent: 0.2, value: '1', tfield: 'real_rate_deviate_year' }, { field: '稍超期望', parentid: 'itf', percent: 0.2, value: '0', tfield: 'real_rate_deviate_year' }, { field: '超期望', parentid: 'itf', percent: 0.2, value: '0', tfield: 'real_rate_deviate_year' }, { field: '远超期望', parentid: 'itf', percent: 0.2, value: '0', tfield: 'real_rate_deviate_year' } ], value: '实际收益率偏离度' } ], value: '投资目标' }, { field: 'lf', item: [ { field: 'member_level', item: [ { field: 'V0', parentid: 'lf', percent: 0.2, value: 'V0', tfield: 'member_level' }, { field: 'V1', parentid: 'lf', percent: 0.2, value: 'V1', tfield: 'member_level' }, { field: 'V2', parentid: 'lf', percent: 0.2, value: 'V2', tfield: 'member_level' }, { field: 'V3', parentid: 'lf', percent: 0.2, value: 'V3', tfield: 'member_level' }, { field: 'V4', parentid: 'lf', percent: 0.2, value: 'V4', tfield: 'member_level' }, { field: 'V5', parentid: 'lf', percent: 0.2, value: 'V5', tfield: 'member_level' } ], value: '会员等级' }, { field: 'activity_level', item: [ { field: 'A0', parentid: 'lf', percent: 0.2, value: 'A0', tfield: 'activity_level' }, { field: 'A1', parentid: 'lf', percent: 0.2, value: 'A1', tfield: 'activity_level' }, { field: 'A2', parentid: 'lf', percent: 0.2, value: 'A2', tfield: 'activity_level' }, { field: 'A3', parentid: 'lf', percent: 0.2, value: 'A3', tfield: 'activity_level' }, { field: 'A4', parentid: 'lf', percent: 0.2, value: 'A4', tfield: 'activity_level' }, { field: 'A5', parentid: 'lf', percent: 0.2, value: 'A5', tfield: 'activity_level' } ], value: '登陆活跃度' }, { field: 'platform_age', item: [ { field: '新手', parentid: 'lf', percent: 0.2, value: '1', tfield: 'platform_age' }, { field: '次新老用户', parentid: 'lf', percent: 0.2, value: '2', tfield: 'platform_age' }, { field: '老用户', parentid: 'lf', percent: 0.2, value: '3', tfield: 'platform_age' }, { field: '超级老用户', parentid: 'lf', percent: 0.2, value: '4', tfield: 'platform_age' }, { field: '骨灰级老用户', parentid: 'lf', percent: 0.2, value: '5', tfield: 'platform_age' }, { field: '骨灰级忠实老用户', parentid: 'lf', percent: 0.2, value: '6', tfield: 'platform_age' }, { field: '未知', parentid: 'lf', percent: 0.2, value: '-1', tfield: 'platform_age' } ], value: '司龄' } ], value: '会员属性' }, { field: 'nf', item: [ { field: 'wealth_stage', item: [ { field: '财富累积阶段', parentid: 'nf', percent: 0.2, value: '1', tfield: 'wealth_stage' }, { field: '财富巩固阶段', parentid: 'nf', percent: 0.3, value: '2', tfield: 'wealth_stage' }, { field: '财富支出阶段', parentid: 'nf', percent: 0.3, value: '3', tfield: 'wealth_stage' }, { field: '其他阶段', parentid: 'nf', percent: 0.2, value: '0', tfield: 'wealth_stage' } ], value: '年龄阶段' }, { field: 'sex', item: [ { field: '男', parentid: 'nf', percent: 0.5, value: '1', tfield: 'sex' }, { field: '女', parentid: 'nf', percent: 0.5, value: '0', tfield: 'sex' } ], value: '性别' }, { field: 'constellation', item: [ { field: '摩羯座', parentid: 'nf', percent: 0.2, value: '0', tfield: 'constellation' } ], value: '星座' } ], value: '基础属性' }, { field: 'pa', item: [ { field: 'risk_score_level', item: [ { field: '未知', parentid: 'pa', percent: 0.2, value: '-1', tfield: 'risk_score_level' }, { field: '合理', parentid: 'pa', percent: 0.2, value: '1', tfield: 'risk_score_level' }, { field: '偏低', parentid: 'pa', percent: 0.2, value: '0', tfield: 'risk_score_level' }, { field: '偏高', parentid: 'pa', percent: 0.4, value: '2', tfield: 'risk_score_level' } ], value: '资产风险值等级' }, { field: 'f_lose_money_rank_rate', item: [ { field: '[0,30%)', parentid: 'pa', percent: 0.2, value: '0', tfield: 'f_lose_money_rank_rate' }, { field: '[30%,50%)', parentid: 'pa', percent: 0.2, value: '0', tfield: 'f_lose_money_rank_rate' }, { field: '[50%,70%)', parentid: 'pa', percent: 0.2, value: '0', tfield: 'f_lose_money_rank_rate' }, { field: '[70%,90%)', parentid: 'pa', percent: 0.2, value: '0', tfield: 'f_lose_money_rank_rate' }, { field: '[90%,100%)', parentid: 'pa', percent: 0.2, value: '0', tfield: 'f_lose_money_rank_rate' } ], value: '个人账户余额损失收益占比' } ], value: '账户分析' }, { field: 'ria', item: [ { field: 'user_personas_e', item: [ { field: '等级一', parentid: 'ria', percent: 0.2, value: '0' }, { field: '等级二', parentid: 'ria', percent: 0.2, value: '0' }, { field: '等级三', parentid: 'ria', percent: 0.2, value: '0' }, { field: '等级四', parentid: 'ria', percent: 0.2, value: '0' }, { field: '等级五', parentid: 'ria', percent: 0.2, value: '0' } ], value: '风险承受能力' }, { field: 'consumer_low_moey', item: [ { field: '低', parentid: 'ria', percent: 0.2, value: '1' }, { field: '中', parentid: 'ria', percent: 0.2, value: '2' }, { field: '高', parentid: 'ria', percent: 0.2, value: '3' }, { field: '超高', parentid: 'ria', percent: 0.2, value: '4' }, { field: '关注', parentid: 'ria', percent: 0.2, value: '-1' } ], value: '客户短期资金潜力' }, { field: 'family_inc_amt', item: [ { field: '15万以下', parentid: 'ria', percent: 0.2, value: 'a' }, { field: '15-30万元', parentid: 'ria', percent: 0.2, value: 'b' }, { field: '30-50万元', parentid: 'ria', percent: 0.2, value: 'c' }, { field: '50-100万元', parentid: 'ria', percent: 0.2, value: 'd' }, { field: '100-500万元', parentid: 'ria', percent: 0.1, value: 'e' }, { field: '500万以上', parentid: 'ria', percent: 0.1, value: 'f' } ], value: '家庭收入' } ], value: '风险承受能力' }, { field: 'rt', item: [ { field: '', item: [ { field: '等级一', parentid: 'rt', percent: 0.2, value: '0' }, { field: '等级二', parentid: 'rt', percent: 0.2, value: '0' }, { field: '等级三', parentid: 'rt', percent: 0.2, value: '0' }, { field: '等级四', parentid: 'rt', percent: 0.2, value: '0' }, { field: '等级五', parentid: 'rt', percent: 0.2, value: '0' } ], value: '风险容忍等级' }, { field: 'user_risk_rating', item: [ { field: '保守型', parentid: 'rt', percent: 0.2, value: '1R' }, { field: '稳健型', parentid: 'rt', percent: 0.2, value: '2R' }, { field: '平衡型', parentid: 'rt', percent: 0.2, value: '3R' }, { field: '积极型', parentid: 'rt', percent: 0.2, value: '4R' }, { field: '激进型', parentid: 'rt', percent: 0.2, value: '5R' } ], value: '风险测评等级' } ], value: '风险容忍度' } ];
View Code
如上代码,开发给的数据,比如如上数据中的 “邀请类型” 里面的数据,item数组里面是一个个的同级项,也就是并列项,但是在Echars中太阳图中应该是一个树形结构,也就是父节点嵌套子节点,依次循环下去,比如开发给的数据是:
item: [ { field: 'invite_type', item: [ { field: '未知', parentid: 'dr', percent: 0.2, value: -1, tfield: 'invite_type' }, { field: '流量渠道', parentid: 'dr', percent: 0.5, value: 0, tfield: 'invite_type' }, { field: '邀请', parentid: 'dr', percent: 0.3, value: 1, tfield: 'invite_type' } ], value: '邀请类型' } ]
实际上我们需要把它转换成这样的:如下:
[{ "name": "邀请类型", "itemStyle": { "color": "#5191d4" }, "children": [ { "itemStyle": { "color": "#777" }, "children": [{ "id": 0, "name": "未知", "children": [{ "id": 1, "name": "流量渠道", "children": [{ "id": 2, "name": "邀请", "children": [], "value": 1, "itemStyle": { "color": "#777" }, "label": { "rotate": "tangential" } }], "value": 1, "itemStyle": { "color": "#777" }, "label": { "rotate": "tangential" } }], "value": 1, "itemStyle": { "color": "#777" }, "label": { "rotate": "tangential" } } ] }]
具体如何转可以看我上篇文章,
因此有了这些基础后,我们就可以对开发给的数据结构来组成我们自己需要的echarts中的数据结构,也就是for循环遍历,然后组成对应值,具体代码看如下:
var datas = [ { field: 'dr', item: [ { field: 'invite_type', item: [ { field: '未知', parentid: 'dr', percent: 0.2, value: -1, tfield: 'invite_type' }, { field: '流量渠道', parentid: 'dr', percent: 0.5, value: 0, tfield: 'invite_type' }, { field: '邀请', parentid: 'dr', percent: 0.3, value: 1, tfield: 'invite_type' } ], value: '邀请类型' }, { field: 'use_coupon_rate_rank', item: [ { field: '[0,30%)', parentid: 'dr', percent: 0.2, value: '0', tfield: 'use_coupon_rate_rank' }, { field: '[30%,50%)', parentid: 'dr', percent: 0.2, value: '0', tfield: 'use_coupon_rate_rank' }, { field: '[50%,70%)', parentid: 'dr', percent: 0.2, value: '0', tfield: 'use_coupon_rate_rank' }, { field: '[70%,90%)', parentid: 'dr', percent: 0.2, value: '0', tfield: 'use_coupon_rate_rank' }, { field: '[90%,100%)', parentid: 'dr', percent: 0.2, value: '0', tfield: 'use_coupon_rate_rank' } ], value: '卡券使用率排名' }, { field: 'use_coupon_prefer', item: [ { field: '未知', parentid: 'dr', percent: 0.2, value: '0', tfield: 'use_coupon_prefer' }, { field: '强', parentid: 'dr', percent: 0.2, value: '0', tfield: 'use_coupon_prefer' }, { field: '弱', parentid: 'dr', percent: 0.2, value: '0', tfield: 'use_coupon_prefer' } ], value: '卡券偏好' } ], value: '购买决策动因' }, { field: 'ip', item: [ { field: 'hope_period_result', item: [ { field: '未知', parentid: 'ip', percent: 0.2, value: '-1', tfield: 'hope_period_result' }, { field: '不匹配', parentid: 'ip', percent: 0.3, value: '0', tfield: 'hope_period_result' }, { field: '匹配', parentid: 'ip', percent: 0.5, value: '1', tfield: 'hope_period_result' } ], value: '期限匹配结果' }, { field: 'hope_period', item: [ { field: '长期偏好', parentid: 'ip', percent: 0.2, value: '-1', tfield: 'hope_period' }, { field: '中长期偏好', parentid: 'ip', percent: 0.2, value: '0', tfield: 'hope_period' }, { field: '短期偏好', parentid: 'ip', percent: 0.2, value: '1', tfield: 'hope_period' }, { field: '极短期偏好', parentid: 'ip', percent: 0.2, value: '-1', tfield: 'hope_period' }, { field: '急速流动性偏好', parentid: 'ip', percent: 0.2, value: '0', tfield: 'hope_period' } ], value: '期限偏好' } ], value: '投资偏好' }, { field: 'itf', item: [ { field: 'in_rank_year', item: [ { field: '[0,30%)', parentid: 'itf', percent: 0.2, value: '0', tfield: 'in_rank_year' }, { field: '[30%,50%)', parentid: 'itf', percent: 0.2, value: '0', tfield: 'in_rank_year' }, { field: '[50%,70%)', parentid: 'itf', percent: 0.2, value: '0', tfield: 'in_rank_year' }, { field: '[70%,90%)', parentid: 'itf', percent: 0.2, value: '0', tfield: 'in_rank_year' }, { field: '[90%,100%)', parentid: 'itf', percent: 0.2, value: '0', tfield: 'in_rank_year' } ], value: '同一风险等级排名' }, { field: 'cr_last_year_value', item: [ { field: '等级一', parentid: 'itf', percent: 0.2, value: '0', tfield: 'cr_last_year_value' }, { field: '等级二', parentid: 'itf', percent: 0.2, value: '0', tfield: 'cr_last_year_value' }, { field: '等级三', parentid: 'itf', percent: 0.2, value: '0', tfield: 'cr_last_year_value' }, { field: '等级四', parentid: 'itf', percent: 0.2, value: '0', tfield: 'cr_last_year_value' }, { field: '等级五', parentid: 'itf', percent: 0.2, value: '0', tfield: 'cr_last_year_value' } ], value: '综合实际收益率' }, { field: 'real_rate_deviate_year', item: [ { field: '远未实现', parentid: 'itf', percent: 0.2, value: '0', tfield: 'real_rate_deviate_year' }, { field: '稍未实现', parentid: 'itf', percent: 0.2, value: '1', tfield: 'real_rate_deviate_year' }, { field: '稍超期望', parentid: 'itf', percent: 0.2, value: '0', tfield: 'real_rate_deviate_year' }, { field: '超期望', parentid: 'itf', percent: 0.2, value: '0', tfield: 'real_rate_deviate_year' }, { field: '远超期望', parentid: 'itf', percent: 0.2, value: '0', tfield: 'real_rate_deviate_year' } ], value: '实际收益率偏离度' } ], value: '投资目标' }, { field: 'lf', item: [ { field: 'member_level', item: [ { field: 'V0', parentid: 'lf', percent: 0.2, value: 'V0', tfield: 'member_level' }, { field: 'V1', parentid: 'lf', percent: 0.2, value: 'V1', tfield: 'member_level' }, { field: 'V2', parentid: 'lf', percent: 0.2, value: 'V2', tfield: 'member_level' }, { field: 'V3', parentid: 'lf', percent: 0.2, value: 'V3', tfield: 'member_level' }, { field: 'V4', parentid: 'lf', percent: 0.2, value: 'V4', tfield: 'member_level' }, { field: 'V5', parentid: 'lf', percent: 0.2, value: 'V5', tfield: 'member_level' } ], value: '会员等级' }, { field: 'activity_level', item: [ { field: 'A0', parentid: 'lf', percent: 0.2, value: 'A0', tfield: 'activity_level' }, { field: 'A1', parentid: 'lf', percent: 0.2, value: 'A1', tfield: 'activity_level' }, { field: 'A2', parentid: 'lf', percent: 0.2, value: 'A2', tfield: 'activity_level' }, { field: 'A3', parentid: 'lf', percent: 0.2, value: 'A3', tfield: 'activity_level' }, { field: 'A4', parentid: 'lf', percent: 0.2, value: 'A4', tfield: 'activity_level' }, { field: 'A5', parentid: 'lf', percent: 0.2, value: 'A5', tfield: 'activity_level' } ], value: '登陆活跃度' }, { field: 'platform_age', item: [ { field: '新手', parentid: 'lf', percent: 0.2, value: '1', tfield: 'platform_age' }, { field: '次新老用户', parentid: 'lf', percent: 0.2, value: '2', tfield: 'platform_age' }, { field: '老用户', parentid: 'lf', percent: 0.2, value: '3', tfield: 'platform_age' }, { field: '超级老用户', parentid: 'lf', percent: 0.2, value: '4', tfield: 'platform_age' }, { field: '骨灰级老用户', parentid: 'lf', percent: 0.2, value: '5', tfield: 'platform_age' }, { field: '骨灰级忠实老用户', parentid: 'lf', percent: 0.2, value: '6', tfield: 'platform_age' }, { field: '未知', parentid: 'lf', percent: 0.2, value: '-1', tfield: 'platform_age' } ], value: '司龄' } ], value: '会员属性' }, { field: 'nf', item: [ { field: 'wealth_stage', item: [ { field: '财富累积阶段', parentid: 'nf', percent: 0.2, value: '1', tfield: 'wealth_stage' }, { field: '财富巩固阶段', parentid: 'nf', percent: 0.3, value: '2', tfield: 'wealth_stage' }, { field: '财富支出阶段', parentid: 'nf', percent: 0.3, value: '3', tfield: 'wealth_stage' }, { field: '其他阶段', parentid: 'nf', percent: 0.2, value: '0', tfield: 'wealth_stage' } ], value: '年龄阶段' }, { field: 'sex', item: [ { field: '男', parentid: 'nf', percent: 0.5, value: '1', tfield: 'sex' }, { field: '女', parentid: 'nf', percent: 0.5, value: '0', tfield: 'sex' } ], value: '性别' }, { field: 'constellation', item: [ { field: '摩羯座', parentid: 'nf', percent: 0.2, value: '0', tfield: 'constellation' } ], value: '星座' } ], value: '基础属性' }, { field: 'pa', item: [ { field: 'risk_score_level', item: [ { field: '未知', parentid: 'pa', percent: 0.2, value: '-1', tfield: 'risk_score_level' }, { field: '合理', parentid: 'pa', percent: 0.2, value: '1', tfield: 'risk_score_level' }, { field: '偏低', parentid: 'pa', percent: 0.2, value: '0', tfield: 'risk_score_level' }, { field: '偏高', parentid: 'pa', percent: 0.4, value: '2', tfield: 'risk_score_level' } ], value: '资产风险值等级' }, { field: 'f_lose_money_rank_rate', item: [ { field: '[0,30%)', parentid: 'pa', percent: 0.2, value: '0', tfield: 'f_lose_money_rank_rate' }, { field: '[30%,50%)', parentid: 'pa', percent: 0.2, value: '0', tfield: 'f_lose_money_rank_rate' }, { field: '[50%,70%)', parentid: 'pa', percent: 0.2, value: '0', tfield: 'f_lose_money_rank_rate' }, { field: '[70%,90%)', parentid: 'pa', percent: 0.2, value: '0', tfield: 'f_lose_money_rank_rate' }, { field: '[90%,100%)', parentid: 'pa', percent: 0.2, value: '0', tfield: 'f_lose_money_rank_rate' } ], value: '个人账户余额损失收益占比' } ], value: '账户分析' }, { field: 'ria', item: [ { field: 'user_personas_e', item: [ { field: '等级一', parentid: 'ria', percent: 0.2, value: '0' }, { field: '等级二', parentid: 'ria', percent: 0.2, value: '0' }, { field: '等级三', parentid: 'ria', percent: 0.2, value: '0' }, { field: '等级四', parentid: 'ria', percent: 0.2, value: '0' }, { field: '等级五', parentid: 'ria', percent: 0.2, value: '0' } ], value: '风险承受能力' }, { field: 'consumer_low_moey', item: [ { field: '低', parentid: 'ria', percent: 0.2, value: '1' }, { field: '中', parentid: 'ria', percent: 0.2, value: '2' }, { field: '高', parentid: 'ria', percent: 0.2, value: '3' }, { field: '超高', parentid: 'ria', percent: 0.2, value: '4' }, { field: '关注', parentid: 'ria', percent: 0.2, value: '-1' } ], value: '客户短期资金潜力' }, { field: 'family_inc_amt', item: [ { field: '15万以下', parentid: 'ria', percent: 0.2, value: 'a' }, { field: '15-30万元', parentid: 'ria', percent: 0.2, value: 'b' }, { field: '30-50万元', parentid: 'ria', percent: 0.2, value: 'c' }, { field: '50-100万元', parentid: 'ria', percent: 0.2, value: 'd' }, { field: '100-500万元', parentid: 'ria', percent: 0.1, value: 'e' }, { field: '500万以上', parentid: 'ria', percent: 0.1, value: 'f' } ], value: '家庭收入' } ], value: '风险承受能力' }, { field: 'rt', item: [ { field: '', item: [ { field: '等级一', parentid: 'rt', percent: 0.2, value: '0' }, { field: '等级二', parentid: 'rt', percent: 0.2, value: '0' }, { field: '等级三', parentid: 'rt', percent: 0.2, value: '0' }, { field: '等级四', parentid: 'rt', percent: 0.2, value: '0' }, { field: '等级五', parentid: 'rt', percent: 0.2, value: '0' } ], value: '风险容忍等级' }, { field: 'user_risk_rating', item: [ { field: '保守型', parentid: 'rt', percent: 0.2, value: '1R' }, { field: '稳健型', parentid: 'rt', percent: 0.2, value: '2R' }, { field: '平衡型', parentid: 'rt', percent: 0.2, value: '3R' }, { field: '积极型', parentid: 'rt', percent: 0.2, value: '4R' }, { field: '激进型', parentid: 'rt', percent: 0.2, value: '5R' } ], value: '风险测评等级' } ], value: '风险容忍度' } ]; // 属性配置设置 let attr = { id: 'id', parendId: 'pId', name: 'field', rootId: -1 }; function toTreeData(data, attr) { let tree = []; let resData = data; for (let i = 0; i < resData.length; i++) { if (resData[i][attr.parendId] === attr.rootId) { let obj = { id: resData[i][attr.id], name: resData[i][attr.name], children: [], value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' } }; tree.push(obj); resData.splice(i, 1); i--; } } var run = function(treeArrs) { if (resData.length > 0) { for (let i = 0; i < treeArrs.length; i++) { for (let j = 0; j < resData.length; j++) { if (treeArrs[i].id === resData[j][attr.parendId]) { let obj = { id: resData[j][attr.id], name: resData[j][attr.name], children: [], value: 1, itemStyle: { color: '#777' }, label: { rotate: 'tangential' } }; treeArrs[i].children.push(obj); resData.splice(j, 1); j--; } } run(treeArrs[i].children); } } }; run(tree); return tree; } for (let i = 0; i < datas.length; i++) { datas[i].name = datas[i].value; datas[i].itemStyle = {}; datas[i].itemStyle.color = '#777'; let items = datas[i].item; datas[i].children = []; for (let j = 0; j < items.length; j++) { const curItems = items[j].item; if (curItems && curItems.length > 0) { for(let k = 0; k < curItems.length; k++) { if (k === 0) { curItems[k].pId = -1; curItems[k].id = k; } else { curItems[k].pId = k - 1; curItems[k].id = k; } } } let arr = toTreeData(curItems, attr); datas[i].children.push({ name: items[j].value, itemStyle: { color: '#5191d4', }, children: [ { itemStyle: { color: '#777' }, children: arr } ] }); } }; console.log(datas); var option = { title: { text: '测试标题', subtext: '个人账户资产分析明细', textStyle: { fontSize: 12, align: 'center' }, subtextStyle: { align: 'center' } }, series: { type: 'sunburst', center: ['50%', '50%'], highlightPolicy: 'ancestor', data: datas, radius: ['7%', '92%'], sort: null, label: { fontSize: 10, padding: 0 }, // 是一个数组,第0项表示数据下钻后返回上级的图形,其后的每一项分别从圆心向外层的层级 levels: [ // 留给数据下钻点的空白配置 {}, // 最靠内测的第一层 { r0: '15%', r: '30%', itemStyle: { borderWidth: 1 }, label: { rotate: 'tangential' } }, // 最靠内测的第二层 { r0: '92%', r: '100%', itemStyle: { borderWidth: 1 }, label: { align: 'center', rotate: 'tangential', padding: 1, silent: true } }, // 最靠内测的第三层 { r0: '30%', r: '30%', label: { position: 'inside', padding: 3, silent: false } } ] } }; // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('multMapId')); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);
View Code
HTML代码如下引用即可:
<!DOCTYPE html> <html> <head> <title>xxxx</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> </head> <body> <div id="multMapId" style=" 800px;height:800px; margin: 20px auto 0"></div> <script type="text/javascript" src="./echarts4.x.js"></script> <script src="./index3.js" type="text/javascript"></script> </body> </html>