Echarts中太阳图(Sunburst)的实例

目前在项目中要实现一个Echars中的太阳图,但是Echars中的太阳图的数据格式是一个树形结构,如下代码格式如下:

Echarts中太阳图(Sunburst)的实例-冯金伟博客园Echarts中太阳图(Sunburst)的实例-冯金伟博客园

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

View Code

但是呢?开发那边给的数据,不是输出的这样的树形结构,而是一个数组,比如如下数据:

Echarts中太阳图(Sunburst)的实例-冯金伟博客园Echarts中太阳图(Sunburst)的实例-冯金伟博客园

var datas = [
  {
    field: 'dr',
    item: [
      {
        field: 'invite_type',
        item: [
          {
            field: '未知',
            parentid: 'dr',
            percent: 0.2,
            value: -1,
            tfield: 'invite_type'
          },
          {
            field: '流量渠道',
            parentid: 'dr',
            percent: 0.5,
            value: 0,
            tfield: 'invite_type'
          },
          {
            field: '邀请',
            parentid: 'dr',
            percent: 0.3,
            value: 1,
            tfield: 'invite_type'
          }
        ],
        value: '邀请类型'
      },
      {
        field: 'use_coupon_rate_rank',
        item: [
          {
            field: '[0,30%)',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_rate_rank'
          },
          {
            field: '[30%,50%)',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_rate_rank'
          },
          {
            field: '[50%,70%)',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_rate_rank'
          },
          {
            field: '[70%,90%)',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_rate_rank'
          },
          {
            field: '[90%,100%)',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_rate_rank'
          }
        ],
        value: '卡券使用率排名'
      },
      {
        field: 'use_coupon_prefer',
        item: [
          {
            field: '未知',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_prefer'
          },
          {
            field: '强',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_prefer'
          },
          {
            field: '弱',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_prefer'
          }
        ],
        value: '卡券偏好'
      }
    ],
    value: '购买决策动因'
  },
  {
    field: 'ip',
    item: [
      {
        field: 'hope_period_result',
        item: [
          {
            field: '未知',
            parentid: 'ip',
            percent: 0.2,
            value: '-1',
            tfield: 'hope_period_result'
          },
          {
            field: '不匹配',
            parentid: 'ip',
            percent: 0.3,
            value: '0',
            tfield: 'hope_period_result'
          },
          {
            field: '匹配',
            parentid: 'ip',
            percent: 0.5,
            value: '1',
            tfield: 'hope_period_result'
          }
        ],
        value: '期限匹配结果'
      },
      {
        field: 'hope_period',
        item: [
          {
            field: '长期偏好',
            parentid: 'ip',
            percent: 0.2,
            value: '-1',
            tfield: 'hope_period'
          },
          {
            field: '中长期偏好',
            parentid: 'ip',
            percent: 0.2,
            value: '0',
            tfield: 'hope_period'
          },
          {
            field: '短期偏好',
            parentid: 'ip',
            percent: 0.2,
            value: '1',
            tfield: 'hope_period'
          },
          {
            field: '极短期偏好',
            parentid: 'ip',
            percent: 0.2,
            value: '-1',
            tfield: 'hope_period'
          },
          {
            field: '急速流动性偏好',
            parentid: 'ip',
            percent: 0.2,
            value: '0',
            tfield: 'hope_period'
          }
        ],
        value: '期限偏好'
      }
    ],
    value: '投资偏好'
  },
  {
    field: 'itf',
    item: [
      {
        field: 'in_rank_year',
        item: [
          {
            field: '[0,30%)',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'in_rank_year'
          },
          {
            field: '[30%,50%)',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'in_rank_year'
          },
          {
            field: '[50%,70%)',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'in_rank_year'
          },
          {
            field: '[70%,90%)',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'in_rank_year'
          },
          {
            field: '[90%,100%)',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'in_rank_year'
          }
        ],
        value: '同一风险等级排名'
      },
      {
        field: 'cr_last_year_value',
        item: [
          {
            field: '等级一',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'cr_last_year_value'
          },
          {
            field: '等级二',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'cr_last_year_value'
          },
          {
            field: '等级三',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'cr_last_year_value'
          },
          {
            field: '等级四',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'cr_last_year_value'
          },
          {
            field: '等级五',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'cr_last_year_value'
          }
        ],
        value: '综合实际收益率'
      },
      {
        field: 'real_rate_deviate_year',
        item: [
          {
            field: '远未实现',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'real_rate_deviate_year'
          },
          {
            field: '稍未实现',
            parentid: 'itf',
            percent: 0.2,
            value: '1',
            tfield: 'real_rate_deviate_year'
          },
          {
            field: '稍超期望',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'real_rate_deviate_year'
          },
          {
            field: '超期望',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'real_rate_deviate_year'
          },
          {
            field: '远超期望',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'real_rate_deviate_year'
          }
        ],
        value: '实际收益率偏离度'
      }
    ],
    value: '投资目标'
  },
  {
    field: 'lf',
    item: [
      {
        field: 'member_level',
        item: [
          {
            field: 'V0',
            parentid: 'lf',
            percent: 0.2,
            value: 'V0',
            tfield: 'member_level'
          },
          {
            field: 'V1',
            parentid: 'lf',
            percent: 0.2,
            value: 'V1',
            tfield: 'member_level'
          },
          {
            field: 'V2',
            parentid: 'lf',
            percent: 0.2,
            value: 'V2',
            tfield: 'member_level'
          },
          {
            field: 'V3',
            parentid: 'lf',
            percent: 0.2,
            value: 'V3',
            tfield: 'member_level'
          },
          {
            field: 'V4',
            parentid: 'lf',
            percent: 0.2,
            value: 'V4',
            tfield: 'member_level'
          },
          {
            field: 'V5',
            parentid: 'lf',
            percent: 0.2,
            value: 'V5',
            tfield: 'member_level'
          }
        ],
        value: '会员等级'
      },
      {
        field: 'activity_level',
        item: [
          {
            field: 'A0',
            parentid: 'lf',
            percent: 0.2,
            value: 'A0',
            tfield: 'activity_level'
          },
          {
            field: 'A1',
            parentid: 'lf',
            percent: 0.2,
            value: 'A1',
            tfield: 'activity_level'
          },
          {
            field: 'A2',
            parentid: 'lf',
            percent: 0.2,
            value: 'A2',
            tfield: 'activity_level'
          },
          {
            field: 'A3',
            parentid: 'lf',
            percent: 0.2,
            value: 'A3',
            tfield: 'activity_level'
          },
          {
            field: 'A4',
            parentid: 'lf',
            percent: 0.2,
            value: 'A4',
            tfield: 'activity_level'
          },
          {
            field: 'A5',
            parentid: 'lf',
            percent: 0.2,
            value: 'A5',
            tfield: 'activity_level'
          }
        ],
        value: '登陆活跃度'
      },
      {
        field: 'platform_age',
        item: [
          {
            field: '新手',
            parentid: 'lf',
            percent: 0.2,
            value: '1',
            tfield: 'platform_age'
          },
          {
            field: '次新老用户',
            parentid: 'lf',
            percent: 0.2,
            value: '2',
            tfield: 'platform_age'
          },
          {
            field: '老用户',
            parentid: 'lf',
            percent: 0.2,
            value: '3',
            tfield: 'platform_age'
          },
          {
            field: '超级老用户',
            parentid: 'lf',
            percent: 0.2,
            value: '4',
            tfield: 'platform_age'
          },
          {
            field: '骨灰级老用户',
            parentid: 'lf',
            percent: 0.2,
            value: '5',
            tfield: 'platform_age'
          },
          {
            field: '骨灰级忠实老用户',
            parentid: 'lf',
            percent: 0.2,
            value: '6',
            tfield: 'platform_age'
          },
          {
            field: '未知',
            parentid: 'lf',
            percent: 0.2,
            value: '-1',
            tfield: 'platform_age'
          }
        ],
        value: '司龄'
      }
    ],
    value: '会员属性'
  },
  {
    field: 'nf',
    item: [
      {
        field: 'wealth_stage',
        item: [
          {
            field: '财富累积阶段',
            parentid: 'nf',
            percent: 0.2,
            value: '1',
            tfield: 'wealth_stage'
          },
          {
            field: '财富巩固阶段',
            parentid: 'nf',
            percent: 0.3,
            value: '2',
            tfield: 'wealth_stage'
          },
          {
            field: '财富支出阶段',
            parentid: 'nf',
            percent: 0.3,
            value: '3',
            tfield: 'wealth_stage'
          },
          {
            field: '其他阶段',
            parentid: 'nf',
            percent: 0.2,
            value: '0',
            tfield: 'wealth_stage'
          }
        ],
        value: '年龄阶段'
      },
      {
        field: 'sex',
        item: [
          {
            field: '男',
            parentid: 'nf',
            percent: 0.5,
            value: '1',
            tfield: 'sex'
          },
          {
            field: '女',
            parentid: 'nf',
            percent: 0.5,
            value: '0',
            tfield: 'sex'
          }
        ],
        value: '性别'
      },
      {
        field: 'constellation',
        item: [
          {
            field: '摩羯座',
            parentid: 'nf',
            percent: 0.2,
            value: '0',
            tfield: 'constellation'
          }
        ],
        value: '星座'
      }
    ],
    value: '基础属性'
  },
  {
    field: 'pa',
    item: [
      {
        field: 'risk_score_level',
        item: [
          {
            field: '未知',
            parentid: 'pa',
            percent: 0.2,
            value: '-1',
            tfield: 'risk_score_level'
          },
          {
            field: '合理',
            parentid: 'pa',
            percent: 0.2,
            value: '1',
            tfield: 'risk_score_level'
          },
          {
            field: '偏低',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'risk_score_level'
          },
          {
            field: '偏高',
            parentid: 'pa',
            percent: 0.4,
            value: '2',
            tfield: 'risk_score_level'
          }
        ],
        value: '资产风险值等级'
      },
      {
        field: 'f_lose_money_rank_rate',
        item: [
          {
            field: '[0,30%)',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'f_lose_money_rank_rate'
          },
          {
            field: '[30%,50%)',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'f_lose_money_rank_rate'
          },
          {
            field: '[50%,70%)',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'f_lose_money_rank_rate'
          },
          {
            field: '[70%,90%)',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'f_lose_money_rank_rate'
          },
          {
            field: '[90%,100%)',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'f_lose_money_rank_rate'
          }
        ],
        value: '个人账户余额损失收益占比'
      }
    ],
    value: '账户分析'
  },
  {
    field: 'ria',
    item: [
      {
        field: 'user_personas_e',
        item: [
          {
            field: '等级一',
            parentid: 'ria',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等级二',
            parentid: 'ria',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等级三',
            parentid: 'ria',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等级四',
            parentid: 'ria',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等级五',
            parentid: 'ria',
            percent: 0.2,
            value: '0'
          }
        ],
        value: '风险承受能力'
      },
      {
        field: 'consumer_low_moey',
        item: [
          {
            field: '低',
            parentid: 'ria',
            percent: 0.2,
            value: '1'
          },
          {
            field: '中',
            parentid: 'ria',
            percent: 0.2,
            value: '2'
          },
          {
            field: '高',
            parentid: 'ria',
            percent: 0.2,
            value: '3'
          },
          {
            field: '超高',
            parentid: 'ria',
            percent: 0.2,
            value: '4'
          },
          {
            field: '关注',
            parentid: 'ria',
            percent: 0.2,
            value: '-1'
          }
        ],
        value: '客户短期资金潜力'
      },
      {
        field: 'family_inc_amt',
        item: [
          {
            field: '15万以下',
            parentid: 'ria',
            percent: 0.2,
            value: 'a'
          },
          {
            field: '15-30万元',
            parentid: 'ria',
            percent: 0.2,
            value: 'b'
          },
          {
            field: '30-50万元',
            parentid: 'ria',
            percent: 0.2,
            value: 'c'
          },
          {
            field: '50-100万元',
            parentid: 'ria',
            percent: 0.2,
            value: 'd'
          },
          {
            field: '100-500万元',
            parentid: 'ria',
            percent: 0.1,
            value: 'e'
          },
          {
            field: '500万以上',
            parentid: 'ria',
            percent: 0.1,
            value: 'f'
          }
        ],
        value: '家庭收入'
      }
    ],
    value: '风险承受能力'
  },
  {
    field: 'rt',
    item: [
      {
        field: '',
        item: [
          {
            field: '等级一',
            parentid: 'rt',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等级二',
            parentid: 'rt',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等级三',
            parentid: 'rt',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等级四',
            parentid: 'rt',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等级五',
            parentid: 'rt',
            percent: 0.2,
            value: '0'
          }
        ],
        value: '风险容忍等级'
      },
      {
        field: 'user_risk_rating',
        item: [
          {
            field: '保守型',
            parentid: 'rt',
            percent: 0.2,
            value: '1R'
          },
          {
            field: '稳健型',
            parentid: 'rt',
            percent: 0.2,
            value: '2R'
          },
          {
            field: '平衡型',
            parentid: 'rt',
            percent: 0.2,
            value: '3R'
          },
          {
            field: '积极型',
            parentid: 'rt',
            percent: 0.2,
            value: '4R'
          },
          {
            field: '激进型',
            parentid: 'rt',
            percent: 0.2,
            value: '5R'
          }
        ],
        value: '风险测评等级'
      }
    ],
    value: '风险容忍度'
  }
];

View Code

如上代码,开发给的数据,比如如上数据中的 “邀请类型” 里面的数据,item数组里面是一个个的同级项,也就是并列项,但是在Echars中太阳图中应该是一个树形结构,也就是父节点嵌套子节点,依次循环下去,比如开发给的数据是:

item: [
      {
        field: 'invite_type',
        item: [
          {
            field: '未知',
            parentid: 'dr',
            percent: 0.2,
            value: -1,
            tfield: 'invite_type'
          },
          {
            field: '流量渠道',
            parentid: 'dr',
            percent: 0.5,
            value: 0,
            tfield: 'invite_type'
          },
          {
            field: '邀请',
            parentid: 'dr',
            percent: 0.3,
            value: 1,
            tfield: 'invite_type'
          }
        ],
        value: '邀请类型'
      }
]

实际上我们需要把它转换成这样的:如下:

[{
  "name": "邀请类型",
  "itemStyle": {
    "color": "#5191d4"
  },
  "children": [
  {
    "itemStyle": {
      "color": "#777"
    },
    "children": [{
      "id": 0,
      "name": "未知",
      "children": [{
        "id": 1,
        "name": "流量渠道",
        "children": [{
          "id": 2,
          "name": "邀请",
          "children": [],
          "value": 1,
          "itemStyle": {
            "color": "#777"
          },
          "label": {
            "rotate": "tangential"
          }
        }],
        "value": 1,
        "itemStyle": {
          "color": "#777"
        },
        "label": {
          "rotate": "tangential"
        }
      }],
      "value": 1,
      "itemStyle": {
        "color": "#777"
      },
      "label": {
        "rotate": "tangential"
      }
    }
  ]
}]

具体如何转可以看我上篇文章

因此有了这些基础后,我们就可以对开发给的数据结构来组成我们自己需要的echarts中的数据结构,也就是for循环遍历,然后组成对应值,具体代码看如下:

Echarts中太阳图(Sunburst)的实例-冯金伟博客园Echarts中太阳图(Sunburst)的实例-冯金伟博客园

var datas = [
  {
    field: 'dr',
    item: [
      {
        field: 'invite_type',
        item: [
          {
            field: '未知',
            parentid: 'dr',
            percent: 0.2,
            value: -1,
            tfield: 'invite_type'
          },
          {
            field: '流量渠道',
            parentid: 'dr',
            percent: 0.5,
            value: 0,
            tfield: 'invite_type'
          },
          {
            field: '邀请',
            parentid: 'dr',
            percent: 0.3,
            value: 1,
            tfield: 'invite_type'
          }
        ],
        value: '邀请类型'
      },
      {
        field: 'use_coupon_rate_rank',
        item: [
          {
            field: '[0,30%)',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_rate_rank'
          },
          {
            field: '[30%,50%)',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_rate_rank'
          },
          {
            field: '[50%,70%)',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_rate_rank'
          },
          {
            field: '[70%,90%)',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_rate_rank'
          },
          {
            field: '[90%,100%)',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_rate_rank'
          }
        ],
        value: '卡券使用率排名'
      },
      {
        field: 'use_coupon_prefer',
        item: [
          {
            field: '未知',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_prefer'
          },
          {
            field: '强',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_prefer'
          },
          {
            field: '弱',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_prefer'
          }
        ],
        value: '卡券偏好'
      }
    ],
    value: '购买决策动因'
  },
  {
    field: 'ip',
    item: [
      {
        field: 'hope_period_result',
        item: [
          {
            field: '未知',
            parentid: 'ip',
            percent: 0.2,
            value: '-1',
            tfield: 'hope_period_result'
          },
          {
            field: '不匹配',
            parentid: 'ip',
            percent: 0.3,
            value: '0',
            tfield: 'hope_period_result'
          },
          {
            field: '匹配',
            parentid: 'ip',
            percent: 0.5,
            value: '1',
            tfield: 'hope_period_result'
          }
        ],
        value: '期限匹配结果'
      },
      {
        field: 'hope_period',
        item: [
          {
            field: '长期偏好',
            parentid: 'ip',
            percent: 0.2,
            value: '-1',
            tfield: 'hope_period'
          },
          {
            field: '中长期偏好',
            parentid: 'ip',
            percent: 0.2,
            value: '0',
            tfield: 'hope_period'
          },
          {
            field: '短期偏好',
            parentid: 'ip',
            percent: 0.2,
            value: '1',
            tfield: 'hope_period'
          },
          {
            field: '极短期偏好',
            parentid: 'ip',
            percent: 0.2,
            value: '-1',
            tfield: 'hope_period'
          },
          {
            field: '急速流动性偏好',
            parentid: 'ip',
            percent: 0.2,
            value: '0',
            tfield: 'hope_period'
          }
        ],
        value: '期限偏好'
      }
    ],
    value: '投资偏好'
  },
  {
    field: 'itf',
    item: [
      {
        field: 'in_rank_year',
        item: [
          {
            field: '[0,30%)',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'in_rank_year'
          },
          {
            field: '[30%,50%)',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'in_rank_year'
          },
          {
            field: '[50%,70%)',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'in_rank_year'
          },
          {
            field: '[70%,90%)',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'in_rank_year'
          },
          {
            field: '[90%,100%)',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'in_rank_year'
          }
        ],
        value: '同一风险等级排名'
      },
      {
        field: 'cr_last_year_value',
        item: [
          {
            field: '等级一',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'cr_last_year_value'
          },
          {
            field: '等级二',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'cr_last_year_value'
          },
          {
            field: '等级三',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'cr_last_year_value'
          },
          {
            field: '等级四',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'cr_last_year_value'
          },
          {
            field: '等级五',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'cr_last_year_value'
          }
        ],
        value: '综合实际收益率'
      },
      {
        field: 'real_rate_deviate_year',
        item: [
          {
            field: '远未实现',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'real_rate_deviate_year'
          },
          {
            field: '稍未实现',
            parentid: 'itf',
            percent: 0.2,
            value: '1',
            tfield: 'real_rate_deviate_year'
          },
          {
            field: '稍超期望',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'real_rate_deviate_year'
          },
          {
            field: '超期望',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'real_rate_deviate_year'
          },
          {
            field: '远超期望',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'real_rate_deviate_year'
          }
        ],
        value: '实际收益率偏离度'
      }
    ],
    value: '投资目标'
  },
  {
    field: 'lf',
    item: [
      {
        field: 'member_level',
        item: [
          {
            field: 'V0',
            parentid: 'lf',
            percent: 0.2,
            value: 'V0',
            tfield: 'member_level'
          },
          {
            field: 'V1',
            parentid: 'lf',
            percent: 0.2,
            value: 'V1',
            tfield: 'member_level'
          },
          {
            field: 'V2',
            parentid: 'lf',
            percent: 0.2,
            value: 'V2',
            tfield: 'member_level'
          },
          {
            field: 'V3',
            parentid: 'lf',
            percent: 0.2,
            value: 'V3',
            tfield: 'member_level'
          },
          {
            field: 'V4',
            parentid: 'lf',
            percent: 0.2,
            value: 'V4',
            tfield: 'member_level'
          },
          {
            field: 'V5',
            parentid: 'lf',
            percent: 0.2,
            value: 'V5',
            tfield: 'member_level'
          }
        ],
        value: '会员等级'
      },
      {
        field: 'activity_level',
        item: [
          {
            field: 'A0',
            parentid: 'lf',
            percent: 0.2,
            value: 'A0',
            tfield: 'activity_level'
          },
          {
            field: 'A1',
            parentid: 'lf',
            percent: 0.2,
            value: 'A1',
            tfield: 'activity_level'
          },
          {
            field: 'A2',
            parentid: 'lf',
            percent: 0.2,
            value: 'A2',
            tfield: 'activity_level'
          },
          {
            field: 'A3',
            parentid: 'lf',
            percent: 0.2,
            value: 'A3',
            tfield: 'activity_level'
          },
          {
            field: 'A4',
            parentid: 'lf',
            percent: 0.2,
            value: 'A4',
            tfield: 'activity_level'
          },
          {
            field: 'A5',
            parentid: 'lf',
            percent: 0.2,
            value: 'A5',
            tfield: 'activity_level'
          }
        ],
        value: '登陆活跃度'
      },
      {
        field: 'platform_age',
        item: [
          {
            field: '新手',
            parentid: 'lf',
            percent: 0.2,
            value: '1',
            tfield: 'platform_age'
          },
          {
            field: '次新老用户',
            parentid: 'lf',
            percent: 0.2,
            value: '2',
            tfield: 'platform_age'
          },
          {
            field: '老用户',
            parentid: 'lf',
            percent: 0.2,
            value: '3',
            tfield: 'platform_age'
          },
          {
            field: '超级老用户',
            parentid: 'lf',
            percent: 0.2,
            value: '4',
            tfield: 'platform_age'
          },
          {
            field: '骨灰级老用户',
            parentid: 'lf',
            percent: 0.2,
            value: '5',
            tfield: 'platform_age'
          },
          {
            field: '骨灰级忠实老用户',
            parentid: 'lf',
            percent: 0.2,
            value: '6',
            tfield: 'platform_age'
          },
          {
            field: '未知',
            parentid: 'lf',
            percent: 0.2,
            value: '-1',
            tfield: 'platform_age'
          }
        ],
        value: '司龄'
      }
    ],
    value: '会员属性'
  },
  {
    field: 'nf',
    item: [
      {
        field: 'wealth_stage',
        item: [
          {
            field: '财富累积阶段',
            parentid: 'nf',
            percent: 0.2,
            value: '1',
            tfield: 'wealth_stage'
          },
          {
            field: '财富巩固阶段',
            parentid: 'nf',
            percent: 0.3,
            value: '2',
            tfield: 'wealth_stage'
          },
          {
            field: '财富支出阶段',
            parentid: 'nf',
            percent: 0.3,
            value: '3',
            tfield: 'wealth_stage'
          },
          {
            field: '其他阶段',
            parentid: 'nf',
            percent: 0.2,
            value: '0',
            tfield: 'wealth_stage'
          }
        ],
        value: '年龄阶段'
      },
      {
        field: 'sex',
        item: [
          {
            field: '男',
            parentid: 'nf',
            percent: 0.5,
            value: '1',
            tfield: 'sex'
          },
          {
            field: '女',
            parentid: 'nf',
            percent: 0.5,
            value: '0',
            tfield: 'sex'
          }
        ],
        value: '性别'
      },
      {
        field: 'constellation',
        item: [
          {
            field: '摩羯座',
            parentid: 'nf',
            percent: 0.2,
            value: '0',
            tfield: 'constellation'
          }
        ],
        value: '星座'
      }
    ],
    value: '基础属性'
  },
  {
    field: 'pa',
    item: [
      {
        field: 'risk_score_level',
        item: [
          {
            field: '未知',
            parentid: 'pa',
            percent: 0.2,
            value: '-1',
            tfield: 'risk_score_level'
          },
          {
            field: '合理',
            parentid: 'pa',
            percent: 0.2,
            value: '1',
            tfield: 'risk_score_level'
          },
          {
            field: '偏低',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'risk_score_level'
          },
          {
            field: '偏高',
            parentid: 'pa',
            percent: 0.4,
            value: '2',
            tfield: 'risk_score_level'
          }
        ],
        value: '资产风险值等级'
      },
      {
        field: 'f_lose_money_rank_rate',
        item: [
          {
            field: '[0,30%)',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'f_lose_money_rank_rate'
          },
          {
            field: '[30%,50%)',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'f_lose_money_rank_rate'
          },
          {
            field: '[50%,70%)',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'f_lose_money_rank_rate'
          },
          {
            field: '[70%,90%)',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'f_lose_money_rank_rate'
          },
          {
            field: '[90%,100%)',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'f_lose_money_rank_rate'
          }
        ],
        value: '个人账户余额损失收益占比'
      }
    ],
    value: '账户分析'
  },
  {
    field: 'ria',
    item: [
      {
        field: 'user_personas_e',
        item: [
          {
            field: '等级一',
            parentid: 'ria',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等级二',
            parentid: 'ria',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等级三',
            parentid: 'ria',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等级四',
            parentid: 'ria',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等级五',
            parentid: 'ria',
            percent: 0.2,
            value: '0'
          }
        ],
        value: '风险承受能力'
      },
      {
        field: 'consumer_low_moey',
        item: [
          {
            field: '低',
            parentid: 'ria',
            percent: 0.2,
            value: '1'
          },
          {
            field: '中',
            parentid: 'ria',
            percent: 0.2,
            value: '2'
          },
          {
            field: '高',
            parentid: 'ria',
            percent: 0.2,
            value: '3'
          },
          {
            field: '超高',
            parentid: 'ria',
            percent: 0.2,
            value: '4'
          },
          {
            field: '关注',
            parentid: 'ria',
            percent: 0.2,
            value: '-1'
          }
        ],
        value: '客户短期资金潜力'
      },
      {
        field: 'family_inc_amt',
        item: [
          {
            field: '15万以下',
            parentid: 'ria',
            percent: 0.2,
            value: 'a'
          },
          {
            field: '15-30万元',
            parentid: 'ria',
            percent: 0.2,
            value: 'b'
          },
          {
            field: '30-50万元',
            parentid: 'ria',
            percent: 0.2,
            value: 'c'
          },
          {
            field: '50-100万元',
            parentid: 'ria',
            percent: 0.2,
            value: 'd'
          },
          {
            field: '100-500万元',
            parentid: 'ria',
            percent: 0.1,
            value: 'e'
          },
          {
            field: '500万以上',
            parentid: 'ria',
            percent: 0.1,
            value: 'f'
          }
        ],
        value: '家庭收入'
      }
    ],
    value: '风险承受能力'
  },
  {
    field: 'rt',
    item: [
      {
        field: '',
        item: [
          {
            field: '等级一',
            parentid: 'rt',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等级二',
            parentid: 'rt',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等级三',
            parentid: 'rt',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等级四',
            parentid: 'rt',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等级五',
            parentid: 'rt',
            percent: 0.2,
            value: '0'
          }
        ],
        value: '风险容忍等级'
      },
      {
        field: 'user_risk_rating',
        item: [
          {
            field: '保守型',
            parentid: 'rt',
            percent: 0.2,
            value: '1R'
          },
          {
            field: '稳健型',
            parentid: 'rt',
            percent: 0.2,
            value: '2R'
          },
          {
            field: '平衡型',
            parentid: 'rt',
            percent: 0.2,
            value: '3R'
          },
          {
            field: '积极型',
            parentid: 'rt',
            percent: 0.2,
            value: '4R'
          },
          {
            field: '激进型',
            parentid: 'rt',
            percent: 0.2,
            value: '5R'
          }
        ],
        value: '风险测评等级'
      }
    ],
    value: '风险容忍度'
  }
];
// 属性配置设置
let attr = {
  id: 'id',
  parendId: 'pId',
  name: 'field',
  rootId: -1
};
function toTreeData(data, attr) {
  let tree = [];
  let resData = data;
  for (let i = 0; i < resData.length; i++) {
    if (resData[i][attr.parendId] === attr.rootId) {
      let obj = {
        id: resData[i][attr.id],
        name: resData[i][attr.name],
        children: [],
        value: 1,
        itemStyle: {
          color: '#777'
        },
        label: {
          rotate: 'tangential'
        }
      };
      tree.push(obj);
      resData.splice(i, 1);
      i--;
    }
  }
  var run = function(treeArrs) {
    if (resData.length > 0) {
      for (let i = 0; i < treeArrs.length; i++) {
        for (let j = 0; j < resData.length; j++) {
          if (treeArrs[i].id === resData[j][attr.parendId]) {
            let obj = {
              id: resData[j][attr.id],
              name: resData[j][attr.name],
              children: [],
              value: 1,
              itemStyle: {
                color: '#777'
              },
              label: {
                rotate: 'tangential'
              }
            };
            treeArrs[i].children.push(obj);
            resData.splice(j, 1);
            j--;
          }
        }
        run(treeArrs[i].children);
      }
    }
  };
  run(tree);
  return tree;
}

for (let i = 0; i < datas.length; i++) {
  datas[i].name = datas[i].value;
  datas[i].itemStyle = {};
  datas[i].itemStyle.color = '#777';
  let items = datas[i].item;
  datas[i].children = [];
  for (let j = 0; j < items.length; j++) {
    const curItems = items[j].item;
    if (curItems && curItems.length > 0) {
      for(let k = 0; k < curItems.length; k++) {
        if (k === 0) {
          curItems[k].pId = -1;
          curItems[k].id = k;
        } else {
          curItems[k].pId = k - 1;
          curItems[k].id = k;
        }
      }
    }
    let arr = toTreeData(curItems, attr);
    datas[i].children.push({
      name: items[j].value,
      itemStyle: {
        color: '#5191d4',
      },
      children: [
        {
          itemStyle: {
            color: '#777'
          },
          children: arr
        }
      ]
    });
  }
};
console.log(datas);
var option = {
  title: {
    text: '测试标题',
    subtext: '个人账户资产分析明细',
    textStyle: {
      fontSize: 12,
      align: 'center'
    },
    subtextStyle: {
      align: 'center'
    }
  },
  series: {
    type: 'sunburst',
    center: ['50%', '50%'],
    highlightPolicy: 'ancestor',
    data: datas,
    radius: ['7%', '92%'],
    sort: null,
    label: {
      fontSize: 10,
      padding: 0
    },
    // 是一个数组,第0项表示数据下钻后返回上级的图形,其后的每一项分别从圆心向外层的层级
    levels: [
      // 留给数据下钻点的空白配置
      {}, 
      // 最靠内测的第一层 
      {
        r0: '15%',
        r: '30%',
        itemStyle: {
          borderWidth: 1
        },
        label: {
          rotate: 'tangential'
        }
      }, 
      // 最靠内测的第二层 
      {
        r0: '92%',
        r: '100%',
        itemStyle: {
          borderWidth: 1
        },
        label: {
          align: 'center',
          rotate: 'tangential',
          padding: 1,
          silent: true
        }
      }, 
      // 最靠内测的第三层 
      {
        r0: '30%',
        r: '30%',
        label: {
          position: 'inside',
          padding: 3,
          silent: false
        }
      }

    ]
  }
};
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('multMapId'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

View Code

HTML代码如下引用即可:

<!DOCTYPE html>
<html>
<head>
  <title>xxxx</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
</head>
<body>
  <div id="multMapId" style=" 800px;height:800px; margin: 20px auto 0"></div>

  <script type="text/javascript" src="./echarts4.x.js"></script>
  <script src="./index3.js" type="text/javascript"></script>
</body>
</html>

github中的demo请查看