Echarts中太阳图（Sunburst）的实例
2024-09-30 13:36:12
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>
最新文章
- Nginx 多站点配置
- Web项目,F12调试的说明
- Js综合笔记
- Jmeter—4 添加断言 判断响应数据是否符合预期
- [leetcode 17]Letter Combinations of a Phone Number
- codeforces 719A：Vitya in the Countryside
- 翻译：Knockout 快速上手 - 4: 你需要知道的顶级特性
- 【PL/SQL练习】控制结构
- Supporting Multiple Screens 翻译 支持各种屏幕（上）
- 使用自定义类型做qmap,qhash的key
- Cogs 12 运输问题2 （有上下界网络流）
- 利用Node.js实现模拟Session验证的登陆
- zabbix 主动模式和被动模式说名
- web 页面间传值 js 封装方法
- （转！）利用Keras实现图像分类与颜色分类
- 常用的评价指标：accuracy、precision、recall、F1-score、ROC-AUC、PR-AUC
- Google 发布的15个 Android 性能优化典范
- springmvc启动时报错：找不到类ContextLoaderListener：java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener
- JavaScript中对象数组 作业题目以及作业
- Java直接内存与非直接内存性能测试