ANTV

252 阅读2分钟
function columnChart (height,data,windowSize,big) {
  if (document.getElementById('marketChart')) {
    document.getElementById('marketChart').innerHTML = ''
  }
  if(!data || !data.length) return false;
  const chart = new Chart({
    container: 'marketChart',
    autoFit: true,
    height: height*windowSize,
    padding:[10,10,10,10]
  });

  chart.coordinate('theta', {
    radius: 0.75,
  });

  chart.data(data);

  chart.scale('实际投入占比', {
    formatter: (val) => {
      val = val + '%';
      return val;
    },
  });

  chart.tooltip({
    showTitle: false,
    showMarkers: false,
    itemTpl:'<li class="g2-tooltip-list-item" style=font-family: PingFangSC-Regular;font-size: 12px;color: #333333;font-weight: 400;"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}<p style="padding-top:0.1rem;"><span>已申请金额:</span>{amount2}</p><p style="padding-top:0.1rem;"><span>实际投入金额:</span>{amount1}</p><p style="padding-top:0.1rem;"><span>实际投入占比:</span>{percent}</p></li>'
  });
  chart.legend(false)

  chart
    .interval()
    .adjust('stack')
    .position('实际投入占比')
    .color('keyName', (item) => {
      if(item == '整单折扣'){
        return 'rgba(18,121,222,0.85)'
      }else if(item == '差价'){
        return 'rgba(232,71,73,0.85)'
      }else if(item == 'DT协议返利'){
        return 'rgba(49,191,239,0.85)'
      }else if(item == 'DPP返利'){
        return 'rgba(90,216,166,0.85)'
      }else if(item == '促销激励'){
        return 'rgba(255,169,64,0.85)'
      }else if(item == '市场推广费'){
        return 'rgba(120,196,201,0.85)'
      }else if(item == 'KIP返利'){
        return 'rgba(104,124,249,0.85)'
      }else if(item == 'APP激励'){
        return 'rgba(18,222,221,0.85)'
      }else if(item == 'SPIFF激励'){
        return 'rgba(119,100,249,0.85)'
      }else if(item == '特殊业务'){
        return 'rgba(31,36,235,0.85)'
      }
    })
    .label('keyName*实际投入占比', (ele) => {
      return {
        autoRotate:false, // 取消文本旋转角度
        style:{
          fontSize:14*windowSize,
          fill:'#fff',
        },
        layout: { type: 'pie-spider' },
        labelLine: {
          style: {
            lineWidth: 0.5,
            fill:'#40A9FF'
          },
        },
        content: (data) => {
          if(big){
            if(data['实际投入占比'] > 0) return data.keyName+'\n'+data['实际投入占比']+'%'
          }else{
            if(data['实际投入占比'] > 0) return data.keyName+':'+data['实际投入占比']+'%'
          }
          return null
        }
      }
    })
    .tooltip('keyName*实际投入占比*实际投入金额*已申请金额', (keyName, percent,amount1,amount2) => {
      return {
        name: keyName,
        percent: percent + '%',
        amount1:React.$dealNumber(amount1, '金额', '-'),
        amount2:React.$dealNumber(amount2, '金额', '-')
      };
    });
  chart.interaction('element-active');
  chart.render();
}