Echarts中太阳图（Sunburst）的实例
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>
Echarts中太阳图（Sunburst）的实例的更多相关文章
- Echarts中线状图的X轴坐标标签倾斜样式
在echarts中应用线状图时可以展现很多的数据,而当数据量过多的时候,X轴的坐标就会显示不全,因为整个图形的宽度是一定的,X轴的全长是一定的 http://www.cnblogs.com/phpgc ...
- echarts 中 柱图 、折线图、柱图层叠
app.title = '折柱混合'; option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: ...
- echarts中折线图切换为数据视图（表格布局）表头无法对齐解决方法
dataView: { show: true, readOnly: true, option ...
- 5种样式实现div容器中三图摆放实例对比说明
代码地址如下:http://www.demodashi.com/demo/11593.html 效果演示: demo点查看效果 需求说明: 如下图所示为设计图,希望在图片上传无规则无规律的情况下实现设 ...
- echarts中饼状图数据太多进行翻页
echarts饼状图数据太多 echarts 饼状图内容太多怎么处理 有些时候,我们饼状图中echarts的数据可能会很多. 这个时候展示肯定会密密麻麻的.导致显示很凌乱 我们需要'翻页'类似表格展示 ...
- echarts版本折线图
1.效果如下: 绘制折线图,应该算是说echarts中使用最简单也算使用频率最高的一种功能了吧.根据官网列子能找出规律,只是有些属性对于初接触者来说,会有点陌生,不过仔细阅读一下还是不 ...
- 百度 echarts K线图使用
看个效果图先 首先在需要插入图例的HTML中嵌入 <div id="main" style="height:400px"></div> ...
- ECharts 中的事件和行为
在 ECharts 的图表中用户的操作将会触发相应的事件.开发者可以监听这些事件,然后通过回调函数做相应的处理,比如跳转到一个地址,或者弹出对话框,或者做数据下钻等等. 如下是一个绑定点击操作的示例. ...
- 《挑战30天C++入门极限》 对C++中引用的补充说明(实例)
对C++中引用的补充说明(实例) #include <iostream> #include <string> using namespace std; ...
随机推荐
- 【github&&git】1、github中的watch、star、fork的作用
[转自:http://www.jianshu.com/p/6c366b53ea41] 在每个 github 项目的右上角,都有三个按钮,分别是 watch.star.fork,但是有些刚开始使用 gi ...
- 140 - The 12th Zhejiang Provincial Collegiate Programming Contest（浙江省赛2015）
Ace of Aces Time Limit: 2 Seconds Memory Limit: 65536 KB There is a mysterious organization c ...
- Thymeleaf学习记录（1）--启动模板及建立Demo
Thymeleaf是什么? Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎.相比于JSP,Thymeleaf更简洁,渲染性能更好,维护性更好,它可以XML/XHTML/HTM ...
- POJ 1113 Wall(思维 计算几何 数学)
题意 题目链接 给出平面上n个点的坐标.你需要建一个围墙,把所有的点围在里面,且围墙距所有点的距离不小于l.求围墙的最小长度. \(n \leqslant 10^5\) Sol 首先考虑如果没有l的限 ...
- Python 基于python编写一些算法程序等
基于python编写一些算法程序等 by:授客 QQ:1033553122 QQ群:7156436 没特意去研究,只是这对群友在QQ群里(7156436)提出的一些小程序实现.编程题,算法.问题等,本 ...
- 动态切换 web 报表中的统计图类型
统计图在浏览器端展现时,不同的使用人员对图形的展现形式会有不同的要求,有的需要柱形图.有的想看折线图等,报表支持用户在浏览器端动态的选择统计图类型,关注乾学院,查看具体实现方法动态切换 web 报表中 ...
- Expo大作战(三十九)--expo sdk api之 DocumentPicker,Contacts(获取手机联系人信息),Branch
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
- Django基础篇--模板和路由分发
Django模板 首先什么是一个模板? 简单来说就是一个网页,可以被view响应给用户 目的是为了解决复杂的显示问题 2. 模板的设置问题 setting.py中的TEMPLATES配置 1)BACK ...
- OneAPM大讲堂 | 基于图像质量分析的摄像头监控系统的实现
今天咱们要介绍的技术很简单,请看场景: 你在家里安装了几个摄像头想监视你家喵星人的一举一动,然而,就在喵星人准备对你的新包发动攻击的时候,图像突然模糊了.毕竟图像模糊了以后你就没法截图回家和喵当面对质 ...
- nginx 配置简单网站项目（linux下）
1.新建html2与html3两个网站项目测试,而html是本身就有,记得到/etc/hosts 添加dns记录 2.修改nginx.conf文件 3.测试访问 中间用到一些nginx的命令,就不截图 ...