echarts記錄篇(八)：餅圖記錄

(data)=>{
    console.log(data);
    var categories = []; 
    for(var i=0 ; i< data.length ; i++){ 
      categories.push(data[i]['name']) 
    }   

                      var name_color = [{name:"中國振華",color:"#5470c6"},
                      {name:"中電信息",color: "#91cc75"},
                      {name:"中電金投",color: "#FFDD7A"},
                      {name:"深科技",color: "#fac858"},
                      {name:"冠捷科技",color: "#ee6666"},
                      {name:"桑達股份",color: "#73c0de"},
                      {name:"中電財務",color: "#8CFFF0"},
                      {name:"華大半導體",color: "#3ba272"},
                      {name:"中電金信",color: "#fc8452"},
                      {name:"上海浦軟",color: "#9a60b4"},
                      {name:"中電易聯",color: "#ea7ccc"},
                      {name:"中國瑞達",color: "#A1A8FF"},
                      {name:"其他",color:   "#B5B5B5"}]
    //console.log("cccccccc"+categories)   
    //console.log("ddddd"+name_color) 
    var color = [];
    for(var i=0 ; i< categories.length ; i++){ 
      for(var j=0 ; j< name_color.length ; j++){ 
        //console.log("1111111"+categories[i])
        //console.log("2222222"+name_color[j]['name'])
        if(categories[i]  == name_color[j]['name']){
          color.push(name_color[j]['color']);
          break;
        } 
      } 
    }  
    return {
      animation: false,
      tooltip: {
        show: true,
        trigger: 'item',
        // formatter: '{b}<br />{c}<br />{d}%',
        formatter: function(params) {
          var name = params.name;
          var value = params.value;
          var percent = (params.percent).toFixed(1) + '%';
          var color = params.color;
    
          return `
            <div style="display: flex; align-items: left; flex-direction: row; gap: 10px;">
              <div>
                <span style="display: inline-block; width: 10px; height: 10px; border-radius: 0; background-color: ${color}; margin-right: 6px;"></span>
                ${name}
              </div>
              <div>${percent}</div>
            </div>
          `;
        }
      },
      legend: {
        top: 'center',
        right: 'right',
        textStyle: {
          fontSize: '22px',
          color: '#fff'
        },
        itemWidth: 20,
        itemHeight: 20,
        itemGap: 22,
      },
      series: [
        {
          name: '',
          color:color,
          type: 'pie',
          radius: ['40%', '62%'],
          center:['50%','48%'],
          minAngle: 25,
          avoidLabelOverlap: false,
          label: {
            show: true,
            // formatter: '{b}\n{d}%',
            formatter: function(params) {
              console.log("顏色",params)
               return `${params.name}\n${(params.percent).toFixed(1)}%`;
            },
            textStyle: {
              fontSize: '22px',
              color: '#fff'
            },
            
          },
             labelLayout: {//標籤缺失
                hideOverlap: false
            },
          labelLine: {
            show: true,
            normal: {
                  length: 60,
                  length2: 20,
                }
          },
          data,
        }
      ]
    };
    }