estateagents-admin-manager/src/pages/indexEcharts/components/UserConversion.jsx

import React, { Component, useState, useEffect } from 'react';
import echarts from 'echarts/lib/echarts';
import EChart from '../../../components/EchartsTest/EChart';
import request from '../../../utils/request';
import apis from '../../../services/apis';
import moment from 'moment';
import router from 'umi/router';
import { Table, Select, Row, Col, Menu, Dropdown, Button, Icon, message } from 'antd';

import styles from '../styles.less'


const UserSource = props => {

  const [theCurrent, setTheCurrent] = useState({ records: [] })
  const [conversionRate, setConversionRate] = useState(0)
  useEffect(() => {
    UserConversionRate({ conversion: 'authorization_phone' })
  }, [])

  function UserConversionRate (params) {

    request({
      ...apis.indexEcharts.userConversion,
      params,
    }).then(data => {  
      console.log(data.data_count.registeredCount/data.data_count.pvNum,'1241234')
      setDataset(data, params.conversion)
    })
  }

  function setDataset (data, theStatis) {
    const { pvNum, ...other } = data.data_count

    // 获取第一个值
    let num = 0
    for (const v of Object.keys(other)) {
      num = other[v]
      break
    }

    if (pvNum < num) {
      setTheCurrent([])
    } else {

      setConversionRate(num/pvNum)
      setTheCurrent([
        { name: getStatisName(theStatis), value: num },
        { name: '其余', value: pvNum - num },
      ])
    }
  }

  function getStatisName (theStatis) {
    const statisTypes = [
      { label: '授权手机', value: 'authorization_phone' },
      { label: '项目收藏', value: 'building_save' },
      { label: '项目转发', value: 'building_share' },
      { label: '活动收藏', value: 'activity_save' },
      { label: '活动转发', value: 'activity_share' },
      { label: '资讯收藏', value: 'news_save' },
      { label: '资讯转发', value: 'news_share' },
      { label: '活动报名', value: 'activity_sign' },

    ]
    return statisTypes.filter(x => x.value === theStatis)[0].label
  }

  const options = {
    legend: {},
    color: ['#FF7E48', '#dcdcdc'],
    tooltip: {},
    series: {
      type: 'pie',
      name: '转化率',
      radius: ['34%', '52%'],
      avoidLabelOverlap: false,
      label: { 
        normal: { 
          show: true,
          position: 'center',
          color: '#666666',
          fontSize: 24,
          fontWeight: 'bold',
          formatter: `${(conversionRate*100).toFixed(2) === 'NaN' ? 0 : (conversionRate*100).toFixed(2) }%`, // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容，
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },

      data: theCurrent,
    },
  }

  function onChange (e) {
    UserConversionRate({ conversion: e })
  }
  const piestyles = {
    width: '100%',
    height: '400px',
  }

  return (
    <>
      <div>
        <p style={{ fontSize: '0.12rem', fontWeight: '600' }}>转化率</p>

        <Select
          style={{ width: 200 }}
          placeholder="授权手机"
          onChange={onChange}
        >
          <Select.Option value="authorization_phone">授权手机</Select.Option>
          <Select.Option value="building_save">项目收藏</Select.Option>
          <Select.Option value="building_share">项目转发</Select.Option>
          <Select.Option value="activity_save">活动收藏</Select.Option>
          <Select.Option value="activity_share">活动转发</Select.Option>
          <Select.Option value="news_save">资讯收藏</Select.Option>
          <Select.Option value="news_share">资讯转发</Select.Option>
          <Select.Option value="activity_sign">活动报名</Select.Option>
        </Select>
        <EChart options={options} style={piestyles} />


      </div>


    </>
  )
}

export default UserSource