forgeplus-react/src/forge/Component/LanguagePower.jsx

import React, { useEffect, useState } from 'react';
import { FlexAJ  } from '../Component/layout';

function LanguagePower({languages}){
  const [ array , setArray ] = useState(undefined);

  useEffect(()=>{
    if(languages){
      let arr = [];
      Object.keys(languages).map((item,key)=>{
        arr.push({name:item,percent:languages[item],color:getColor()});
      })
      setArray(arr);
    }
  },[languages])

   function getColor(){
      let str = "#";
      let arr = ["1","2","3","4","4","5","6","7","8","9","a","b","c","d","e","f"];
      for(var i=0;i<6;i++){
        let num = parseInt(Math.random() * 16);
        str+=arr[num];
      }
      return str;
    }
  return(
    <div>
      <p className="font-16 color-grey-6">开发语言</p>
      <div className="progress">
        {
          array && array.map((item,key)=>{
            return(
              <span style={{width:item.percent,backgroundColor:item.color}}></span>
            )
          })
        }
      </div>
      {
        array && array.length > 0 &&
        <FlexAJ className="progresstip">
          {
            array.map((item,key)=>{
              return(
                <span><i className="zero" style={{backgroundColor:`${item.color}`}}></i><span>{item.name}</span><span>{item.percent}</span></span>
              )
            })
          }
        </FlexAJ>
      }
      
    </div>
  )
}
export default LanguagePower;