Echarts中太陽圖(Sunburst)的例項

龍恩0707發表於2018-07-12

Echarts中太陽圖(Sunburst)的例項

目前在專案中要實現一個Echars中的太陽圖,但是Echars中的太陽圖的資料格式是一個樹形結構,如下程式碼格式如下:

var mapData = [
  {
    name: '會員屬性',
    itemStyle: {
      color: '#777'
    },
    children: [
      {
        name: '會員等級',
        itemStyle: {
          color: '#5191d4'
        },
        children: [
          {
            itemStyle: {
              color: '#777'
            },
            children: [
              {
                name: 'V0',
                value: 1,
                itemStyle: {
                  color: '#777'
                },
                label: {
                  rotate: 'tangential'
                },
                children: [
                  {
                    name: 'V1',
                    value: 1,
                    itemStyle: {
                      color: 'red'
                    },
                    label: {
                      rotate: 'tangential'
                    },
                    children: [
                      {
                        name: 'V2',
                        value: 1,
                        itemStyle: {
                          color: '#777'
                        },
                        label: {
                          rotate: 'tangential'
                        },
                        children: [
                          {
                            name: 'V3',
                            value: 1,
                            itemStyle: {
                              color: '#777'
                            },
                            label: {
                              rotate: 'tangential'
                            },
                            children: [
                              {
                                name: 'V4',
                                value: 1,
                                itemStyle: {
                                  color: '#777'
                                },
                                label: {
                                  rotate: 'tangential'
                                },
                                children: [
                                  {
                                    name: 'V5',
                                    value: 1,
                                    itemStyle: {
                                      color: '#777'
                                    },
                                    label: {
                                      rotate: 'tangential'
                                    }
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: '登入活躍度',
        itemStyle: {
          color: '#5191d4'
        },
        children: [
          {
            itemStyle: {
              color: '#777'
            },
            children: [
              {
                name: 'A0',
                value: 1,
                itemStyle: {
                  color: '#777'
                },
                label: {
                  rotate: 'tangential'
                },
                children: [
                  {
                    name: 'A1',
                    value: 1,
                    itemStyle: {
                      color: '#777'
                    },
                    label: {
                      rotate: 'tangential'
                    },
                    children: [
                      {
                        name: 'A2',
                        value: 1,
                        itemStyle: {
                          color: '#777'
                        },
                        label: {
                          rotate: 'tangential'
                        },
                        children: [
                          {
                            name: 'A3',
                            value: 1,
                            itemStyle: {
                              color: '#777'
                            },
                            label: {
                              rotate: 'tangential'
                            },
                            children: [
                              {
                                name: 'A4',
                                value: 1,
                                itemStyle: {
                                  color: '#777'
                                },
                                label: {
                                  rotate: 'tangential'
                                },
                                children: [
                                  {
                                    name: 'A5',
                                    value: 1,
                                    label: {
                                      rotate: 'tangential'
                                    },
                                    itemStyle: {
                                      color: '#777'
                                    }
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: '司齡',
        itemStyle: {
          color: '#5191d4'
        },
        children: [
          {
            itemStyle: {
              color: '#777'
            },
            children: [
              {
                name: '新手',
                value: 1,
                itemStyle: {
                  color: '#777'
                },
                label: {
                  rotate: 'tangential'
                },
                children: [
                  {
                    name: '次新手',
                    value: 1,
                    itemStyle: {
                      color: '#777'
                    },
                    label: {
                      rotate: 'tangential'
                    },
                    children: [
                      {
                        name: '老使用者',
                        value: 1,
                        itemStyle: {
                          color: '#777'
                        },
                        label: {
                          rotate: 'tangential'
                        },
                        children: [
                          {
                            name: '超級老使用者',
                            value: 1,
                            itemStyle: {
                              color: '#777'
                            },
                            label: {
                              rotate: 'tangential'
                            },
                            children: [
                              {
                                name: '骨灰級老使用者',
                                value: 1,
                                itemStyle: {
                                  color: '#777'
                                },
                                label: {
                                  rotate: 'tangential'
                                },
                                children: [
                                  {
                                    name: '骨灰級超級老使用者',
                                    value: 1,
                                    itemStyle: {
                                      color: '#777'
                                    },
                                    label: {
                                      rotate: 'tangential'
                                    }
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    name: '基礎屬性',
    itemStyle: {
      color: '#777'
    },
    children: [
      {
        name: '星座',
        itemStyle: {
          color: '#5191d4'
        },
        children: [
          {
            itemStyle: {
              color: '#777'
            },
            children: [
              {
                name: '白羊',
                value: 1,
                label: {
                  rotate: 'tangential'
                },
                itemStyle: {
                  color: '#777'
                }
              }
            ]
          }
        ]
      }, 
      {
        name: '性別',
        itemStyle: {
          color: '#5191d4'
        },
        children: [
          {
            itemStyle: {
              color: '#777'
            },
            children: [
              {
                name: '男',
                value: 1,
                itemStyle: {
                  color: '#777'
                },
                label: {
                  rotate: 'tangential'
                },
                children: [
                  {
                    name: '女',
                    value: 1,
                    itemStyle: {
                      color: '#777'
                    },
                    label: {
                      rotate: 'tangential'
                    },
                    children: [
                      {
                        name: '未知',
                        value: 1,
                        itemStyle: {
                          color: '#777'
                        },
                        label: {
                          rotate: 'tangential'
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: '年齡',
        itemStyle: {
          color: '#5191d4'
        },
        children: [
          {
            itemStyle: {
              color: '#777'
            },
            children: [
              {
                name: '30歲',
                value: 1,
                itemStyle: {
                  color: '#777'
                },
                label: {
                  rotate: 'tangential'
                },
                children: [
                  {
                    name: '財富積累階段',
                    value: 1,
                    itemStyle: {
                      color: '#777'
                    },
                    label: {
                      rotate: 'tangential'
                    },
                    children: [
                      {
                        name: '財富鞏固階段',
                        value: 1,
                        itemStyle: {
                          color: '#777'
                        },
                        label: {
                          rotate: 'tangential'
                        },
                        children: [
                          {
                            name: '財富支出階段',
                            value: 1,
                            itemStyle: {
                              color: '#777'
                            },
                            label: {
                              rotate: 'tangential'
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    name: '購買決策動因',
    itemStyle: {
      color: '#777'
    },
    children: [
      {
        name: '邀請型別',
        itemStyle: {
          color: '#5191d4'
        },
        children: [
          {
            itemStyle: {
              color: '#777'
            },
            children: [
              {
                name: '自然流量',
                value: 1,
                itemStyle: {
                  color: '#777'
                },
                label: {
                  rotate: 'tangential'
                },
                children: [
                  {
                    name: '流量渠道',
                    value: 1,
                    itemStyle: {
                      color: '#777'
                    },
                    label: {
                      rotate: 'tangential'
                    },
                    children: [
                      {
                        name: '邀請',
                        value: 1,
                        itemStyle: {
                          color: '#777'
                        },
                        label: {
                          rotate: 'tangential'
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: '卡劵使用率排名',
        itemStyle: {
          color: '#5191d4'
        },
        children: [
          {
            itemStyle: {
              color: '#777'
            },
            children: [
              {
                name: '[0%, 30%]',
                value: 1,
                itemStyle: {
                  color: '#777'
                },
                label: {
                  rotate: 'tangential'
                },
                children: [
                  {
                    name: '[30%, 50%]',
                    value: 1,
                    itemStyle: {
                      color: '#777'
                    },
                    label: {
                      rotate: 'tangential'
                    },
                    children: [
                      {
                        name: '[50%, 70%]',
                        value: 1,
                        itemStyle: {
                          color: '#777'
                        },
                        label: {
                          rotate: 'tangential'
                        },
                        children: [
                          {
                            name: '[70%, 90%]',
                            value: 1,
                            itemStyle: {
                              color: '#777'
                            },
                            label: {
                              rotate: 'tangential'
                            },
                            children: [
                              {
                                name: '[90%, 100%]',
                                value: 1,
                                itemStyle: {
                                  color: '#777'
                                },
                                label: {
                                  rotate: 'tangential'
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: '卡劵偏好',
        itemStyle: {
          color: '#5191d4'
        },
        children: [
          {
            itemStyle: {
              color: '#777'
            },
            children: [
              {
                name: '低',
                value: 1,
                itemStyle: {
                  color: '#777'
                },
                label: {
                  rotate: 'tangential'
                },
                children: [
                  {
                    name: '強',
                    value: 1,
                    itemStyle: {
                      color: '#777'
                    },
                    label: {
                      rotate: 'tangential'
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    name: '賬戶分析',
    itemStyle: {
      color: '#777'
    },
    children: [
      {
        name: '資產風險值',
        itemStyle: {
          color: '#5191d4'
        },
        children: [
          {
            itemStyle: {
              color: '#777'
            },
            children: [
              {
                name: '偏低分值2.7',
                value: 1,
                itemStyle: {
                  color: '#777'
                },
                label: {
                  rotate: 'tangential'
                },
                children: [
                  {
                    name: '標準值3.0',
                    value: 1,
                    itemStyle: {
                      color: '#777'
                    },
                    label: {
                      rotate: 'tangential'
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: '個人賬戶餘額收益損失',
        itemStyle: {
          color: '#5191d4'
        },
        children: [
          {
            itemStyle: {
              color: '#777'
            },
            children: [
              {
                name: '[0%, 30%]',
                value: 1,
                itemStyle: {
                  color: '#777'
                },
                label: {
                  rotate: 'tangential'
                },
                children: [
                  {
                    name: '[30%, 50%]',
                    value: 1,
                    itemStyle: {
                      color: '#777'
                    },
                    label: {
                      rotate: 'tangential'
                    },
                    children: [
                      {
                        name: '[50%, 70%]',
                        value: 1,
                        itemStyle: {
                          color: '#777'
                        },
                        label: {
                          rotate: 'tangential'
                        },
                        children: [
                          {
                            name: '[70%, 90%]',
                            value: 1,
                            itemStyle: {
                              color: '#777'
                            },
                            label: {
                              rotate: 'tangential'
                            },
                            children: [
                              {
                                name: '[90%, 100%]',
                                value: 1,
                                itemStyle: {
                                  color: '#777'
                                },
                                label: {
                                  rotate: 'tangential'
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: '產品類別餘額佔比',
        itemStyle: {
          color: '#5191d4'
        },
        children: [
          {
            itemStyle: {
              color: '#777'
            },
            children: [
              {
                name: '基金20%',
                value: 1,
                itemStyle: {
                  color: '#777'
                },
                label: {
                  rotate: 'tangential'
                },
                children: [
                  {
                    name: '互金非標70%',
                    value: 1,
                    itemStyle: {
                      color: '#777'
                    },
                    label: {
                      rotate: 'tangential'
                    },
                    children: [
                      {
                        name: '賬戶餘額30%',
                        value: 1,
                        itemStyle: {
                          color: '#777'
                        },
                        label: {
                          rotate: 'tangential'
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    name: '投資偏好',
    itemStyle: {
      color: '#777'
    },
    children: [
      {
        name: '期限匹配結果',
        itemStyle: {
          color: '#5191d4'
        },
        children: [
          {
            itemStyle: {
              color: '#777'
            },
            children: [
              {
                name: '不匹配',
                value: 1,
                itemStyle: {
                  color: '#777'
                },
                label: {
                  rotate: 'tangential'
                },
                children: [
                  {
                    name: '基本匹配',
                    value: 1,
                    itemStyle: {
                      color: '#777'
                    },
                    label: {
                      rotate: 'tangential'
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: '大類資產偏好',
        itemStyle: {
          color: '#5191d4'
        },
        children: [
          {
            itemStyle: {
              color: '#777'
            },
            children: [
              {
                name: '現金及貨幣類20%',
                value: 1,
                itemStyle: {
                  color: '#777'
                },
                label: {
                  rotate: 'tangential'
                },
                children: [
                  {
                    name: '固定收益類30%',
                    value: 1,
                    itemStyle: {
                      color: '#777'
                    },
                    label: {
                      rotate: 'tangential'
                    },
                    children: [
                      {
                        name: '債券類40%',
                        value: 1,
                        itemStyle: {
                          color: '#777'
                        },
                        label: {
                          rotate: 'tangential'
                        },
                        children: [
                          {
                            name: '股票類10%',
                            value: 1,
                            itemStyle: {
                              color: '#777'
                            },
                            label: {
                              rotate: 'tangential'
                            },
                            children: [
                              {
                                name: '另類及其他0%',
                                value: 1,
                                itemStyle: {
                                  color: '#777'
                                },
                                label: {
                                  rotate: 'tangential'
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: '期限偏好',
        itemStyle: {
          color: '#5191d4'
        },
        children: [
          {
            itemStyle: {
              color: '#777'
            },
            children: [
              {
                name: '長期性偏好弱',
                value: 1,
                itemStyle: {
                  color: '#777'
                },
                label: {
                  rotate: 'tangential'
                },
                children: [
                  {
                    name: '中長期偏好弱',
                    value: 1,
                    itemStyle: {
                      color: '#777'
                    },
                    label: {
                      rotate: 'tangential'
                    },
                    children: [
                      {
                        name: '短期偏好中',
                        value: 1,
                        itemStyle: {
                          color: '#777'
                        },
                        label: {
                          rotate: 'tangential'
                        },
                        children: [
                          {
                            name: '極短期偏好中',
                            value: 1,
                            itemStyle: {
                              color: '#777'
                            },
                            label: {
                              rotate: 'tangential'
                            },
                            children: [
                              {
                                name: '極速流動性偏好強',
                                value: 1,
                                itemStyle: {
                                  color: '#777'
                                },
                                label: {
                                  rotate: 'tangential'
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    name: '風險容忍度',
    itemStyle: {
      color: '#777'
    },
    children: [
      {
        name: '風險容忍等級',
        itemStyle: {
          color: '#5191d4'
        },
        children: [
          {
            itemStyle: {
              color: '#777'
            },
            children: [
              {
                name: '等級1',
                value: 1,
                itemStyle: {
                  color: '#777'
                },
                label: {
                  rotate: 'tangential'
                },
                children: [
                  {
                    name: '等級2',
                    value: 1,
                    itemStyle: {
                      color: '#777'
                    },
                    label: {
                      rotate: 'tangential'
                    },
                    children: [
                      {
                        name: '等級3',
                        value: 1,
                        itemStyle: {
                          color: '#777'
                        },
                        label: {
                          rotate: 'tangential'
                        },
                        children: [
                          {
                            name: '等級4',
                            value: 1,
                            itemStyle: {
                              color: '#777'
                            },
                            label: {
                              rotate: 'tangential'
                            },
                            children: [
                              {
                                name: '等級5',
                                value: 1,
                                itemStyle: {
                                  color: '#777'
                                },
                                label: {
                                  rotate: 'tangential'
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: '風險測評等級',
        itemStyle: {
          color: '#5191d4'
        },
        children: [
          {
            itemStyle: {
              color: '#777'
            },
            children: [
              {
                name: '保守型',
                value: 1,
                itemStyle: {
                  color: '#777'
                },
                label: {
                  rotate: 'tangential'
                },
                children: [
                  {
                    name: '穩健型',
                    value: 1,
                    itemStyle: {
                      color: '#777'
                    },
                    label: {
                      rotate: 'tangential'
                    },
                    children: [
                      {
                        name: '平衡型',
                        value: 1,
                        itemStyle: {
                          color: '#777'
                        },
                        label: {
                          rotate: 'tangential'
                        },
                        children: [
                          {
                            name: '成長型',
                            value: 1,
                            itemStyle: {
                              color: '#777'
                            },
                            label: {
                              rotate: 'tangential'
                            },
                            children: [
                              {
                                name: '進取型',
                                value: 1,
                                itemStyle: {
                                  color: '#777'
                                },
                                label: {
                                  rotate: 'tangential'
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    name: '風險承受能力',
    itemStyle: {
      color: '#777'
    },
    children: [
      {
        name: '風險承受能力',
        itemStyle: {
          color: '#5191d4'
        },
        children: [
          {
            itemStyle: {
              color: '#777'
            },
            children: [
              {
                name: '等級1',
                value: 1,
                itemStyle: {
                  color: '#777'
                },
                label: {
                  rotate: 'tangential'
                },
                children: [
                  {
                    name: '等級2',
                    value: 1,
                    itemStyle: {
                      color: '#777'
                    },
                    label: {
                      rotate: 'tangential'
                    },
                    children: [
                      {
                        name: '等級3',
                        value: 1,
                        itemStyle: {
                          color: '#777'
                        },
                        label: {
                          rotate: 'tangential'
                        },
                        children: [
                          {
                            name: '等級4',
                            value: 1,
                            itemStyle: {
                              color: '#777'
                            },
                            label: {
                              rotate: 'tangential'
                            },
                            children: [
                              {
                                name: '等級5',
                                value: 1,
                                itemStyle: {
                                  color: '#777'
                                },
                                label: {
                                  rotate: 'tangential'
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: '客戶短期資金潛力',
        itemStyle: {
          color: '#5191d4'
        },
        children: [
          {
            itemStyle: {
              color: '#777'
            },
            children: [
              {
                name: '關注',
                value: 1,
                itemStyle: {
                  color: '#777'
                },
                label: {
                  rotate: 'tangential'
                },
                children: [
                  {
                    name: '低',
                    value: 1,
                    itemStyle: {
                      color: '#777'
                    },
                    label: {
                      rotate: 'tangential'
                    },
                    children: [
                      {
                        name: '中',
                        value: 1,
                        itemStyle: {
                          color: '#777'
                        },
                        label: {
                          rotate: 'tangential'
                        },
                        children: [
                          {
                            name: '高',
                            value: 1,
                            itemStyle: {
                              color: '#777'
                            },
                            label: {
                              rotate: 'tangential'
                            },
                            children: [
                              {
                                name: '超高',
                                value: 1,
                                itemStyle: {
                                  color: '#777'
                                },
                                label: {
                                  rotate: 'tangential'
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: '家庭收入',
        itemStyle: {
          color: '#5191d4'
        },
        children: [
          {
            itemStyle: {
              color: '#777'
            },
            children: [
              {
                name: '15萬以下',
                value: 1,
                itemStyle: {
                  color: '#777'
                },
                label: {
                  rotate: 'tangential'
                },
                children: [
                  {
                    name: '15-30萬元',
                    value: 1,
                    itemStyle: {
                      color: '#777'
                    },
                    label: {
                      rotate: 'tangential'
                    },
                    children: [
                      {
                        name: '30-50萬元',
                        value: 1,
                        itemStyle: {
                          color: '#777'
                        },
                        label: {
                          rotate: 'tangential'
                        },
                        children: [
                          {
                            name: '50-100萬元',
                            value: 1,
                            itemStyle: {
                              color: '#777'
                            },
                            label: {
                              rotate: 'tangential'
                            },
                            children: [
                              {
                                name: '100-500萬元',
                                value: 1,
                                itemStyle: {
                                  color: '#777'
                                },
                                label: {
                                  rotate: 'tangential'
                                },
                                children: [
                                  {
                                    name: '500萬元以上',
                                    value: 1,
                                    itemStyle: {
                                      color: '#777'
                                    },
                                    label: {
                                      rotate: 'tangential'
                                    }
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    name: '投資目標',
    itemStyle: {
      color: '#777'
    },
    children: [
      {
        name: '同一風險等級',
        itemStyle: {
          color: '#5191d4'
        },
        children: [
          {
            itemStyle: {
              color: '#777'
            },
            children: [
              {
                name: '[0,30%]',
                value: 1,
                itemStyle: {
                  color: '#777'
                },
                label: {
                  rotate: 'tangential'
                },
                children: [
                  {
                    name: '[30%,50%]',
                    value: 1,
                    itemStyle: {
                      color: '#777'
                    },
                    label: {
                      rotate: 'tangential'
                    },
                    children: [
                      {
                        name: '[50%,70%]',
                        value: 1,
                        itemStyle: {
                          color: '#777'
                        },
                        label: {
                          rotate: 'tangential'
                        },
                        children: [
                          {
                            name: '[70%,90%]',
                            value: 1,
                            itemStyle: {
                              color: '#777'
                            },
                            label: {
                              rotate: 'tangential'
                            },
                            children: [
                              {
                                name: '[90%,100%]',
                                value: 1,
                                itemStyle: {
                                  color: '#777'
                                },
                                label: {
                                  rotate: 'tangential'
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: '實際收益率偏離度',
        itemStyle: {
          color: '#5191d4'
        },
        children: [
          {
            itemStyle: {
              color: '#777'
            },
            children: [
              {
                name: '遠未實現',
                value: 1,
                itemStyle: {
                  color: '#777'
                },
                label: {
                  rotate: 'tangential'
                },
                children: [
                  {
                    name: '稍微實現',
                    value: 1,
                    itemStyle: {
                      color: '#777'
                    },
                    label: {
                      rotate: 'tangential'
                    },
                    children: [
                      {
                        name: '稍超期望',
                        value: 1,
                        itemStyle: {
                          color: '#777'
                        },
                        label: {
                          rotate: 'tangential'
                        },
                        children: [
                          {
                            name: '超期望',
                            value: 1,
                            itemStyle: {
                              color: '#777'
                            },
                            label: {
                              rotate: 'tangential'
                            },
                            children: [
                              {
                                name: '遠超期望',
                                value: 1,
                                itemStyle: {
                                  color: '#777'
                                },
                                label: {
                                  rotate: 'tangential'
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: '綜合實際收益率',
        itemStyle: {
          color: '#5191d4'
        },
        children: [
          {
            itemStyle: {
              color: '#777'
            },
            children: [
              {
                name: '等級1',
                value: 1,
                itemStyle: {
                  color: '#777'
                },
                label: {
                  rotate: 'tangential'
                },
                children: [
                  {
                    name: '等級2',
                    value: 1,
                    itemStyle: {
                      color: '#777'
                    },
                    label: {
                      rotate: 'tangential'
                    },
                    children: [
                      {
                        name: '等級3',
                        value: 1,
                        itemStyle: {
                          color: '#777'
                        },
                        label: {
                          rotate: 'tangential'
                        },
                        children: [
                          {
                            name: '等級4',
                            value: 1,
                            itemStyle: {
                              color: '#777'
                            },
                            label: {
                              rotate: 'tangential'
                            },
                            children: [
                              {
                                name: '等級5',
                                value: 1,
                                itemStyle: {
                                  color: '#777'
                                },
                                label: {
                                  rotate: 'tangential'
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
];
View Code

但是呢?開發那邊給的資料,不是輸出的這樣的樹形結構,而是一個陣列,比如如下資料:

var datas = [
  {
    field: 'dr',
    item: [
      {
        field: 'invite_type',
        item: [
          {
            field: '未知',
            parentid: 'dr',
            percent: 0.2,
            value: -1,
            tfield: 'invite_type'
          },
          {
            field: '流量渠道',
            parentid: 'dr',
            percent: 0.5,
            value: 0,
            tfield: 'invite_type'
          },
          {
            field: '邀請',
            parentid: 'dr',
            percent: 0.3,
            value: 1,
            tfield: 'invite_type'
          }
        ],
        value: '邀請型別'
      },
      {
        field: 'use_coupon_rate_rank',
        item: [
          {
            field: '[0,30%)',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_rate_rank'
          },
          {
            field: '[30%,50%)',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_rate_rank'
          },
          {
            field: '[50%,70%)',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_rate_rank'
          },
          {
            field: '[70%,90%)',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_rate_rank'
          },
          {
            field: '[90%,100%)',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_rate_rank'
          }
        ],
        value: '卡券使用率排名'
      },
      {
        field: 'use_coupon_prefer',
        item: [
          {
            field: '未知',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_prefer'
          },
          {
            field: '強',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_prefer'
          },
          {
            field: '弱',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_prefer'
          }
        ],
        value: '卡券偏好'
      }
    ],
    value: '購買決策動因'
  },
  {
    field: 'ip',
    item: [
      {
        field: 'hope_period_result',
        item: [
          {
            field: '未知',
            parentid: 'ip',
            percent: 0.2,
            value: '-1',
            tfield: 'hope_period_result'
          },
          {
            field: '不匹配',
            parentid: 'ip',
            percent: 0.3,
            value: '0',
            tfield: 'hope_period_result'
          },
          {
            field: '匹配',
            parentid: 'ip',
            percent: 0.5,
            value: '1',
            tfield: 'hope_period_result'
          }
        ],
        value: '期限匹配結果'
      },
      {
        field: 'hope_period',
        item: [
          {
            field: '長期偏好',
            parentid: 'ip',
            percent: 0.2,
            value: '-1',
            tfield: 'hope_period'
          },
          {
            field: '中長期偏好',
            parentid: 'ip',
            percent: 0.2,
            value: '0',
            tfield: 'hope_period'
          },
          {
            field: '短期偏好',
            parentid: 'ip',
            percent: 0.2,
            value: '1',
            tfield: 'hope_period'
          },
          {
            field: '極短期偏好',
            parentid: 'ip',
            percent: 0.2,
            value: '-1',
            tfield: 'hope_period'
          },
          {
            field: '急速流動性偏好',
            parentid: 'ip',
            percent: 0.2,
            value: '0',
            tfield: 'hope_period'
          }
        ],
        value: '期限偏好'
      }
    ],
    value: '投資偏好'
  },
  {
    field: 'itf',
    item: [
      {
        field: 'in_rank_year',
        item: [
          {
            field: '[0,30%)',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'in_rank_year'
          },
          {
            field: '[30%,50%)',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'in_rank_year'
          },
          {
            field: '[50%,70%)',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'in_rank_year'
          },
          {
            field: '[70%,90%)',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'in_rank_year'
          },
          {
            field: '[90%,100%)',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'in_rank_year'
          }
        ],
        value: '同一風險等級排名'
      },
      {
        field: 'cr_last_year_value',
        item: [
          {
            field: '等級一',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'cr_last_year_value'
          },
          {
            field: '等級二',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'cr_last_year_value'
          },
          {
            field: '等級三',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'cr_last_year_value'
          },
          {
            field: '等級四',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'cr_last_year_value'
          },
          {
            field: '等級五',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'cr_last_year_value'
          }
        ],
        value: '綜合實際收益率'
      },
      {
        field: 'real_rate_deviate_year',
        item: [
          {
            field: '遠未實現',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'real_rate_deviate_year'
          },
          {
            field: '稍未實現',
            parentid: 'itf',
            percent: 0.2,
            value: '1',
            tfield: 'real_rate_deviate_year'
          },
          {
            field: '稍超期望',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'real_rate_deviate_year'
          },
          {
            field: '超期望',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'real_rate_deviate_year'
          },
          {
            field: '遠超期望',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'real_rate_deviate_year'
          }
        ],
        value: '實際收益率偏離度'
      }
    ],
    value: '投資目標'
  },
  {
    field: 'lf',
    item: [
      {
        field: 'member_level',
        item: [
          {
            field: 'V0',
            parentid: 'lf',
            percent: 0.2,
            value: 'V0',
            tfield: 'member_level'
          },
          {
            field: 'V1',
            parentid: 'lf',
            percent: 0.2,
            value: 'V1',
            tfield: 'member_level'
          },
          {
            field: 'V2',
            parentid: 'lf',
            percent: 0.2,
            value: 'V2',
            tfield: 'member_level'
          },
          {
            field: 'V3',
            parentid: 'lf',
            percent: 0.2,
            value: 'V3',
            tfield: 'member_level'
          },
          {
            field: 'V4',
            parentid: 'lf',
            percent: 0.2,
            value: 'V4',
            tfield: 'member_level'
          },
          {
            field: 'V5',
            parentid: 'lf',
            percent: 0.2,
            value: 'V5',
            tfield: 'member_level'
          }
        ],
        value: '會員等級'
      },
      {
        field: 'activity_level',
        item: [
          {
            field: 'A0',
            parentid: 'lf',
            percent: 0.2,
            value: 'A0',
            tfield: 'activity_level'
          },
          {
            field: 'A1',
            parentid: 'lf',
            percent: 0.2,
            value: 'A1',
            tfield: 'activity_level'
          },
          {
            field: 'A2',
            parentid: 'lf',
            percent: 0.2,
            value: 'A2',
            tfield: 'activity_level'
          },
          {
            field: 'A3',
            parentid: 'lf',
            percent: 0.2,
            value: 'A3',
            tfield: 'activity_level'
          },
          {
            field: 'A4',
            parentid: 'lf',
            percent: 0.2,
            value: 'A4',
            tfield: 'activity_level'
          },
          {
            field: 'A5',
            parentid: 'lf',
            percent: 0.2,
            value: 'A5',
            tfield: 'activity_level'
          }
        ],
        value: '登陸活躍度'
      },
      {
        field: 'platform_age',
        item: [
          {
            field: '新手',
            parentid: 'lf',
            percent: 0.2,
            value: '1',
            tfield: 'platform_age'
          },
          {
            field: '次新老使用者',
            parentid: 'lf',
            percent: 0.2,
            value: '2',
            tfield: 'platform_age'
          },
          {
            field: '老使用者',
            parentid: 'lf',
            percent: 0.2,
            value: '3',
            tfield: 'platform_age'
          },
          {
            field: '超級老使用者',
            parentid: 'lf',
            percent: 0.2,
            value: '4',
            tfield: 'platform_age'
          },
          {
            field: '骨灰級老使用者',
            parentid: 'lf',
            percent: 0.2,
            value: '5',
            tfield: 'platform_age'
          },
          {
            field: '骨灰級忠實老使用者',
            parentid: 'lf',
            percent: 0.2,
            value: '6',
            tfield: 'platform_age'
          },
          {
            field: '未知',
            parentid: 'lf',
            percent: 0.2,
            value: '-1',
            tfield: 'platform_age'
          }
        ],
        value: '司齡'
      }
    ],
    value: '會員屬性'
  },
  {
    field: 'nf',
    item: [
      {
        field: 'wealth_stage',
        item: [
          {
            field: '財富累積階段',
            parentid: 'nf',
            percent: 0.2,
            value: '1',
            tfield: 'wealth_stage'
          },
          {
            field: '財富鞏固階段',
            parentid: 'nf',
            percent: 0.3,
            value: '2',
            tfield: 'wealth_stage'
          },
          {
            field: '財富支出階段',
            parentid: 'nf',
            percent: 0.3,
            value: '3',
            tfield: 'wealth_stage'
          },
          {
            field: '其他階段',
            parentid: 'nf',
            percent: 0.2,
            value: '0',
            tfield: 'wealth_stage'
          }
        ],
        value: '年齡階段'
      },
      {
        field: 'sex',
        item: [
          {
            field: '男',
            parentid: 'nf',
            percent: 0.5,
            value: '1',
            tfield: 'sex'
          },
          {
            field: '女',
            parentid: 'nf',
            percent: 0.5,
            value: '0',
            tfield: 'sex'
          }
        ],
        value: '性別'
      },
      {
        field: 'constellation',
        item: [
          {
            field: '摩羯座',
            parentid: 'nf',
            percent: 0.2,
            value: '0',
            tfield: 'constellation'
          }
        ],
        value: '星座'
      }
    ],
    value: '基礎屬性'
  },
  {
    field: 'pa',
    item: [
      {
        field: 'risk_score_level',
        item: [
          {
            field: '未知',
            parentid: 'pa',
            percent: 0.2,
            value: '-1',
            tfield: 'risk_score_level'
          },
          {
            field: '合理',
            parentid: 'pa',
            percent: 0.2,
            value: '1',
            tfield: 'risk_score_level'
          },
          {
            field: '偏低',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'risk_score_level'
          },
          {
            field: '偏高',
            parentid: 'pa',
            percent: 0.4,
            value: '2',
            tfield: 'risk_score_level'
          }
        ],
        value: '資產風險值等級'
      },
      {
        field: 'f_lose_money_rank_rate',
        item: [
          {
            field: '[0,30%)',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'f_lose_money_rank_rate'
          },
          {
            field: '[30%,50%)',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'f_lose_money_rank_rate'
          },
          {
            field: '[50%,70%)',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'f_lose_money_rank_rate'
          },
          {
            field: '[70%,90%)',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'f_lose_money_rank_rate'
          },
          {
            field: '[90%,100%)',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'f_lose_money_rank_rate'
          }
        ],
        value: '個人賬戶餘額損失收益佔比'
      }
    ],
    value: '賬戶分析'
  },
  {
    field: 'ria',
    item: [
      {
        field: 'user_personas_e',
        item: [
          {
            field: '等級一',
            parentid: 'ria',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等級二',
            parentid: 'ria',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等級三',
            parentid: 'ria',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等級四',
            parentid: 'ria',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等級五',
            parentid: 'ria',
            percent: 0.2,
            value: '0'
          }
        ],
        value: '風險承受能力'
      },
      {
        field: 'consumer_low_moey',
        item: [
          {
            field: '低',
            parentid: 'ria',
            percent: 0.2,
            value: '1'
          },
          {
            field: '中',
            parentid: 'ria',
            percent: 0.2,
            value: '2'
          },
          {
            field: '高',
            parentid: 'ria',
            percent: 0.2,
            value: '3'
          },
          {
            field: '超高',
            parentid: 'ria',
            percent: 0.2,
            value: '4'
          },
          {
            field: '關注',
            parentid: 'ria',
            percent: 0.2,
            value: '-1'
          }
        ],
        value: '客戶短期資金潛力'
      },
      {
        field: 'family_inc_amt',
        item: [
          {
            field: '15萬以下',
            parentid: 'ria',
            percent: 0.2,
            value: 'a'
          },
          {
            field: '15-30萬元',
            parentid: 'ria',
            percent: 0.2,
            value: 'b'
          },
          {
            field: '30-50萬元',
            parentid: 'ria',
            percent: 0.2,
            value: 'c'
          },
          {
            field: '50-100萬元',
            parentid: 'ria',
            percent: 0.2,
            value: 'd'
          },
          {
            field: '100-500萬元',
            parentid: 'ria',
            percent: 0.1,
            value: 'e'
          },
          {
            field: '500萬以上',
            parentid: 'ria',
            percent: 0.1,
            value: 'f'
          }
        ],
        value: '家庭收入'
      }
    ],
    value: '風險承受能力'
  },
  {
    field: 'rt',
    item: [
      {
        field: '',
        item: [
          {
            field: '等級一',
            parentid: 'rt',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等級二',
            parentid: 'rt',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等級三',
            parentid: 'rt',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等級四',
            parentid: 'rt',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等級五',
            parentid: 'rt',
            percent: 0.2,
            value: '0'
          }
        ],
        value: '風險容忍等級'
      },
      {
        field: 'user_risk_rating',
        item: [
          {
            field: '保守型',
            parentid: 'rt',
            percent: 0.2,
            value: '1R'
          },
          {
            field: '穩健型',
            parentid: 'rt',
            percent: 0.2,
            value: '2R'
          },
          {
            field: '平衡型',
            parentid: 'rt',
            percent: 0.2,
            value: '3R'
          },
          {
            field: '積極型',
            parentid: 'rt',
            percent: 0.2,
            value: '4R'
          },
          {
            field: '激進型',
            parentid: 'rt',
            percent: 0.2,
            value: '5R'
          }
        ],
        value: '風險測評等級'
      }
    ],
    value: '風險容忍度'
  }
];
View Code

如上程式碼,開發給的資料,比如如上資料中的 “邀請型別” 裡面的資料,item陣列裡面是一個個的同級項,也就是並列項,但是在Echars中太陽圖中應該是一個樹形結構,也就是父節點巢狀子節點,依次迴圈下去,比如開發給的資料是:

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

實際上我們需要把它轉換成這樣的:如下:

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

具體如何轉可以看我上篇文章

因此有了這些基礎後,我們就可以對開發給的資料結構來組成我們自己需要的echarts中的資料結構,也就是for迴圈遍歷,然後組成對應值,具體程式碼看如下:

var datas = [
  {
    field: 'dr',
    item: [
      {
        field: 'invite_type',
        item: [
          {
            field: '未知',
            parentid: 'dr',
            percent: 0.2,
            value: -1,
            tfield: 'invite_type'
          },
          {
            field: '流量渠道',
            parentid: 'dr',
            percent: 0.5,
            value: 0,
            tfield: 'invite_type'
          },
          {
            field: '邀請',
            parentid: 'dr',
            percent: 0.3,
            value: 1,
            tfield: 'invite_type'
          }
        ],
        value: '邀請型別'
      },
      {
        field: 'use_coupon_rate_rank',
        item: [
          {
            field: '[0,30%)',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_rate_rank'
          },
          {
            field: '[30%,50%)',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_rate_rank'
          },
          {
            field: '[50%,70%)',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_rate_rank'
          },
          {
            field: '[70%,90%)',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_rate_rank'
          },
          {
            field: '[90%,100%)',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_rate_rank'
          }
        ],
        value: '卡券使用率排名'
      },
      {
        field: 'use_coupon_prefer',
        item: [
          {
            field: '未知',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_prefer'
          },
          {
            field: '強',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_prefer'
          },
          {
            field: '弱',
            parentid: 'dr',
            percent: 0.2,
            value: '0',
            tfield: 'use_coupon_prefer'
          }
        ],
        value: '卡券偏好'
      }
    ],
    value: '購買決策動因'
  },
  {
    field: 'ip',
    item: [
      {
        field: 'hope_period_result',
        item: [
          {
            field: '未知',
            parentid: 'ip',
            percent: 0.2,
            value: '-1',
            tfield: 'hope_period_result'
          },
          {
            field: '不匹配',
            parentid: 'ip',
            percent: 0.3,
            value: '0',
            tfield: 'hope_period_result'
          },
          {
            field: '匹配',
            parentid: 'ip',
            percent: 0.5,
            value: '1',
            tfield: 'hope_period_result'
          }
        ],
        value: '期限匹配結果'
      },
      {
        field: 'hope_period',
        item: [
          {
            field: '長期偏好',
            parentid: 'ip',
            percent: 0.2,
            value: '-1',
            tfield: 'hope_period'
          },
          {
            field: '中長期偏好',
            parentid: 'ip',
            percent: 0.2,
            value: '0',
            tfield: 'hope_period'
          },
          {
            field: '短期偏好',
            parentid: 'ip',
            percent: 0.2,
            value: '1',
            tfield: 'hope_period'
          },
          {
            field: '極短期偏好',
            parentid: 'ip',
            percent: 0.2,
            value: '-1',
            tfield: 'hope_period'
          },
          {
            field: '急速流動性偏好',
            parentid: 'ip',
            percent: 0.2,
            value: '0',
            tfield: 'hope_period'
          }
        ],
        value: '期限偏好'
      }
    ],
    value: '投資偏好'
  },
  {
    field: 'itf',
    item: [
      {
        field: 'in_rank_year',
        item: [
          {
            field: '[0,30%)',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'in_rank_year'
          },
          {
            field: '[30%,50%)',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'in_rank_year'
          },
          {
            field: '[50%,70%)',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'in_rank_year'
          },
          {
            field: '[70%,90%)',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'in_rank_year'
          },
          {
            field: '[90%,100%)',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'in_rank_year'
          }
        ],
        value: '同一風險等級排名'
      },
      {
        field: 'cr_last_year_value',
        item: [
          {
            field: '等級一',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'cr_last_year_value'
          },
          {
            field: '等級二',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'cr_last_year_value'
          },
          {
            field: '等級三',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'cr_last_year_value'
          },
          {
            field: '等級四',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'cr_last_year_value'
          },
          {
            field: '等級五',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'cr_last_year_value'
          }
        ],
        value: '綜合實際收益率'
      },
      {
        field: 'real_rate_deviate_year',
        item: [
          {
            field: '遠未實現',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'real_rate_deviate_year'
          },
          {
            field: '稍未實現',
            parentid: 'itf',
            percent: 0.2,
            value: '1',
            tfield: 'real_rate_deviate_year'
          },
          {
            field: '稍超期望',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'real_rate_deviate_year'
          },
          {
            field: '超期望',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'real_rate_deviate_year'
          },
          {
            field: '遠超期望',
            parentid: 'itf',
            percent: 0.2,
            value: '0',
            tfield: 'real_rate_deviate_year'
          }
        ],
        value: '實際收益率偏離度'
      }
    ],
    value: '投資目標'
  },
  {
    field: 'lf',
    item: [
      {
        field: 'member_level',
        item: [
          {
            field: 'V0',
            parentid: 'lf',
            percent: 0.2,
            value: 'V0',
            tfield: 'member_level'
          },
          {
            field: 'V1',
            parentid: 'lf',
            percent: 0.2,
            value: 'V1',
            tfield: 'member_level'
          },
          {
            field: 'V2',
            parentid: 'lf',
            percent: 0.2,
            value: 'V2',
            tfield: 'member_level'
          },
          {
            field: 'V3',
            parentid: 'lf',
            percent: 0.2,
            value: 'V3',
            tfield: 'member_level'
          },
          {
            field: 'V4',
            parentid: 'lf',
            percent: 0.2,
            value: 'V4',
            tfield: 'member_level'
          },
          {
            field: 'V5',
            parentid: 'lf',
            percent: 0.2,
            value: 'V5',
            tfield: 'member_level'
          }
        ],
        value: '會員等級'
      },
      {
        field: 'activity_level',
        item: [
          {
            field: 'A0',
            parentid: 'lf',
            percent: 0.2,
            value: 'A0',
            tfield: 'activity_level'
          },
          {
            field: 'A1',
            parentid: 'lf',
            percent: 0.2,
            value: 'A1',
            tfield: 'activity_level'
          },
          {
            field: 'A2',
            parentid: 'lf',
            percent: 0.2,
            value: 'A2',
            tfield: 'activity_level'
          },
          {
            field: 'A3',
            parentid: 'lf',
            percent: 0.2,
            value: 'A3',
            tfield: 'activity_level'
          },
          {
            field: 'A4',
            parentid: 'lf',
            percent: 0.2,
            value: 'A4',
            tfield: 'activity_level'
          },
          {
            field: 'A5',
            parentid: 'lf',
            percent: 0.2,
            value: 'A5',
            tfield: 'activity_level'
          }
        ],
        value: '登陸活躍度'
      },
      {
        field: 'platform_age',
        item: [
          {
            field: '新手',
            parentid: 'lf',
            percent: 0.2,
            value: '1',
            tfield: 'platform_age'
          },
          {
            field: '次新老使用者',
            parentid: 'lf',
            percent: 0.2,
            value: '2',
            tfield: 'platform_age'
          },
          {
            field: '老使用者',
            parentid: 'lf',
            percent: 0.2,
            value: '3',
            tfield: 'platform_age'
          },
          {
            field: '超級老使用者',
            parentid: 'lf',
            percent: 0.2,
            value: '4',
            tfield: 'platform_age'
          },
          {
            field: '骨灰級老使用者',
            parentid: 'lf',
            percent: 0.2,
            value: '5',
            tfield: 'platform_age'
          },
          {
            field: '骨灰級忠實老使用者',
            parentid: 'lf',
            percent: 0.2,
            value: '6',
            tfield: 'platform_age'
          },
          {
            field: '未知',
            parentid: 'lf',
            percent: 0.2,
            value: '-1',
            tfield: 'platform_age'
          }
        ],
        value: '司齡'
      }
    ],
    value: '會員屬性'
  },
  {
    field: 'nf',
    item: [
      {
        field: 'wealth_stage',
        item: [
          {
            field: '財富累積階段',
            parentid: 'nf',
            percent: 0.2,
            value: '1',
            tfield: 'wealth_stage'
          },
          {
            field: '財富鞏固階段',
            parentid: 'nf',
            percent: 0.3,
            value: '2',
            tfield: 'wealth_stage'
          },
          {
            field: '財富支出階段',
            parentid: 'nf',
            percent: 0.3,
            value: '3',
            tfield: 'wealth_stage'
          },
          {
            field: '其他階段',
            parentid: 'nf',
            percent: 0.2,
            value: '0',
            tfield: 'wealth_stage'
          }
        ],
        value: '年齡階段'
      },
      {
        field: 'sex',
        item: [
          {
            field: '男',
            parentid: 'nf',
            percent: 0.5,
            value: '1',
            tfield: 'sex'
          },
          {
            field: '女',
            parentid: 'nf',
            percent: 0.5,
            value: '0',
            tfield: 'sex'
          }
        ],
        value: '性別'
      },
      {
        field: 'constellation',
        item: [
          {
            field: '摩羯座',
            parentid: 'nf',
            percent: 0.2,
            value: '0',
            tfield: 'constellation'
          }
        ],
        value: '星座'
      }
    ],
    value: '基礎屬性'
  },
  {
    field: 'pa',
    item: [
      {
        field: 'risk_score_level',
        item: [
          {
            field: '未知',
            parentid: 'pa',
            percent: 0.2,
            value: '-1',
            tfield: 'risk_score_level'
          },
          {
            field: '合理',
            parentid: 'pa',
            percent: 0.2,
            value: '1',
            tfield: 'risk_score_level'
          },
          {
            field: '偏低',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'risk_score_level'
          },
          {
            field: '偏高',
            parentid: 'pa',
            percent: 0.4,
            value: '2',
            tfield: 'risk_score_level'
          }
        ],
        value: '資產風險值等級'
      },
      {
        field: 'f_lose_money_rank_rate',
        item: [
          {
            field: '[0,30%)',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'f_lose_money_rank_rate'
          },
          {
            field: '[30%,50%)',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'f_lose_money_rank_rate'
          },
          {
            field: '[50%,70%)',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'f_lose_money_rank_rate'
          },
          {
            field: '[70%,90%)',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'f_lose_money_rank_rate'
          },
          {
            field: '[90%,100%)',
            parentid: 'pa',
            percent: 0.2,
            value: '0',
            tfield: 'f_lose_money_rank_rate'
          }
        ],
        value: '個人賬戶餘額損失收益佔比'
      }
    ],
    value: '賬戶分析'
  },
  {
    field: 'ria',
    item: [
      {
        field: 'user_personas_e',
        item: [
          {
            field: '等級一',
            parentid: 'ria',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等級二',
            parentid: 'ria',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等級三',
            parentid: 'ria',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等級四',
            parentid: 'ria',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等級五',
            parentid: 'ria',
            percent: 0.2,
            value: '0'
          }
        ],
        value: '風險承受能力'
      },
      {
        field: 'consumer_low_moey',
        item: [
          {
            field: '低',
            parentid: 'ria',
            percent: 0.2,
            value: '1'
          },
          {
            field: '中',
            parentid: 'ria',
            percent: 0.2,
            value: '2'
          },
          {
            field: '高',
            parentid: 'ria',
            percent: 0.2,
            value: '3'
          },
          {
            field: '超高',
            parentid: 'ria',
            percent: 0.2,
            value: '4'
          },
          {
            field: '關注',
            parentid: 'ria',
            percent: 0.2,
            value: '-1'
          }
        ],
        value: '客戶短期資金潛力'
      },
      {
        field: 'family_inc_amt',
        item: [
          {
            field: '15萬以下',
            parentid: 'ria',
            percent: 0.2,
            value: 'a'
          },
          {
            field: '15-30萬元',
            parentid: 'ria',
            percent: 0.2,
            value: 'b'
          },
          {
            field: '30-50萬元',
            parentid: 'ria',
            percent: 0.2,
            value: 'c'
          },
          {
            field: '50-100萬元',
            parentid: 'ria',
            percent: 0.2,
            value: 'd'
          },
          {
            field: '100-500萬元',
            parentid: 'ria',
            percent: 0.1,
            value: 'e'
          },
          {
            field: '500萬以上',
            parentid: 'ria',
            percent: 0.1,
            value: 'f'
          }
        ],
        value: '家庭收入'
      }
    ],
    value: '風險承受能力'
  },
  {
    field: 'rt',
    item: [
      {
        field: '',
        item: [
          {
            field: '等級一',
            parentid: 'rt',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等級二',
            parentid: 'rt',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等級三',
            parentid: 'rt',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等級四',
            parentid: 'rt',
            percent: 0.2,
            value: '0'
          },
          {
            field: '等級五',
            parentid: 'rt',
            percent: 0.2,
            value: '0'
          }
        ],
        value: '風險容忍等級'
      },
      {
        field: 'user_risk_rating',
        item: [
          {
            field: '保守型',
            parentid: 'rt',
            percent: 0.2,
            value: '1R'
          },
          {
            field: '穩健型',
            parentid: 'rt',
            percent: 0.2,
            value: '2R'
          },
          {
            field: '平衡型',
            parentid: 'rt',
            percent: 0.2,
            value: '3R'
          },
          {
            field: '積極型',
            parentid: 'rt',
            percent: 0.2,
            value: '4R'
          },
          {
            field: '激進型',
            parentid: 'rt',
            percent: 0.2,
            value: '5R'
          }
        ],
        value: '風險測評等級'
      }
    ],
    value: '風險容忍度'
  }
];
// 屬性配置設定
let attr = {
  id: 'id',
  parendId: 'pId',
  name: 'field',
  rootId: -1
};
function toTreeData(data, attr) {
  let tree = [];
  let resData = data;
  for (let i = 0; i < resData.length; i++) {
    if (resData[i][attr.parendId] === attr.rootId) {
      let obj = {
        id: resData[i][attr.id],
        name: resData[i][attr.name],
        children: [],
        value: 1,
        itemStyle: {
          color: '#777'
        },
        label: {
          rotate: 'tangential'
        }
      };
      tree.push(obj);
      resData.splice(i, 1);
      i--;
    }
  }
  var run = function(treeArrs) {
    if (resData.length > 0) {
      for (let i = 0; i < treeArrs.length; i++) {
        for (let j = 0; j < resData.length; j++) {
          if (treeArrs[i].id === resData[j][attr.parendId]) {
            let obj = {
              id: resData[j][attr.id],
              name: resData[j][attr.name],
              children: [],
              value: 1,
              itemStyle: {
                color: '#777'
              },
              label: {
                rotate: 'tangential'
              }
            };
            treeArrs[i].children.push(obj);
            resData.splice(j, 1);
            j--;
          }
        }
        run(treeArrs[i].children);
      }
    }
  };
  run(tree);
  return tree;
}

for (let i = 0; i < datas.length; i++) {
  datas[i].name = datas[i].value;
  datas[i].itemStyle = {};
  datas[i].itemStyle.color = '#777';
  let items = datas[i].item;
  datas[i].children = [];
  for (let j = 0; j < items.length; j++) {
    const curItems = items[j].item;
    if (curItems && curItems.length > 0) {
      for(let k = 0; k < curItems.length; k++) {
        if (k === 0) {
          curItems[k].pId = -1;
          curItems[k].id = k;
        } else {
          curItems[k].pId = k - 1;
          curItems[k].id = k;
        }
      }
    }
    let arr = toTreeData(curItems, attr);
    datas[i].children.push({
      name: items[j].value,
      itemStyle: {
        color: '#5191d4',
      },
      children: [
        {
          itemStyle: {
            color: '#777'
          },
          children: arr
        }
      ]
    });
  }
};
console.log(datas);
var option = {
  title: {
    text: '測試標題',
    subtext: '個人賬戶資產分析明細',
    textStyle: {
      fontSize: 12,
      align: 'center'
    },
    subtextStyle: {
      align: 'center'
    }
  },
  series: {
    type: 'sunburst',
    center: ['50%', '50%'],
    highlightPolicy: 'ancestor',
    data: datas,
    radius: ['7%', '92%'],
    sort: null,
    label: {
      fontSize: 10,
      padding: 0
    },
    // 是一個陣列,第0項表示資料下鑽後返回上級的圖形,其後的每一項分別從圓心向外層的層級
    levels: [
      // 留給資料下鑽點的空白配置
      {}, 
      // 最靠內測的第一層 
      {
        r0: '15%',
        r: '30%',
        itemStyle: {
          borderWidth: 1
        },
        label: {
          rotate: 'tangential'
        }
      }, 
      // 最靠內測的第二層 
      {
        r0: '92%',
        r: '100%',
        itemStyle: {
          borderWidth: 1
        },
        label: {
          align: 'center',
          rotate: 'tangential',
          padding: 1,
          silent: true
        }
      }, 
      // 最靠內測的第三層 
      {
        r0: '30%',
        r: '30%',
        label: {
          position: 'inside',
          padding: 3,
          silent: false
        }
      }

    ]
  }
};
// 基於準備好的dom,初始化echarts例項
var myChart = echarts.init(document.getElementById('multMapId'));
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
View Code

HTML程式碼如下引用即可:

<!DOCTYPE html>
<html>
<head>
  <title>xxxx</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
</head>
<body>
  <div id="multMapId" style="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>

github中的demo請檢視

相關文章