合并

src/pages/indexEcharts/components/UserConversion.jsx

 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 => {
-        setDataset(data, params.conversion)
-      })
+  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) {
+  function setDataset (data, theStatis) {
     const { pvNum, ...other } = data.data_count
 
     // 获取第一个值
     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' },
-
-  ]
+  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: ['#8B7FE2', '#DDDDDD'],
+    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) {
+  function onChange (e) {
     UserConversionRate({ conversion: e })
   }
   const piestyles = {
   return (
     <>
       <div>
-      <p style={{ fontSize: '0.12rem', fontWeight: '600' }}>转化率</p>
+        <p style={{ fontSize: '0.12rem', fontWeight: '600' }}>转化率</p>
 
         <Select
           style={{ width: 200 }}
 
     </>
   )
- }
+}
 
 export default UserSource