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' } } ] } ] } ] } ] } ] } ] } ] } ];
但是呢?開發那邊給的資料,不是輸出的這樣的樹形結構,而是一個陣列,比如如下資料:
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: '風險容忍度' } ];
如上程式碼,開發給的資料,比如如上資料中的 “邀請型別” 裡面的資料,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);
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="width: 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>