浏览代码

转化率

周立森 5 年前
父节点
当前提交
f82c2a19c7
共有 1 个文件被更改,包括 46 次插入25 次删除
  1. 46
    25
      src/pages/indexEcharts/components/UserConversion.jsx

+ 46
- 25
src/pages/indexEcharts/components/UserConversion.jsx 查看文件

13
 const UserSource = props => {
13
 const UserSource = props => {
14
 
14
 
15
   const [theCurrent, setTheCurrent] = useState({ records: [] })
15
   const [theCurrent, setTheCurrent] = useState({ records: [] })
16
-
16
+  const [conversionRate, setConversionRate] = useState(0)
17
   useEffect(() => {
17
   useEffect(() => {
18
     UserConversionRate({ conversion: 'authorization_phone' })
18
     UserConversionRate({ conversion: 'authorization_phone' })
19
   }, [])
19
   }, [])
20
 
20
 
21
- function UserConversionRate(params) {
22
-   
23
-      request({
24
-        ...apis.indexEcharts.userConversion,
25
-        params,
26
-      }).then(data => {
27
-        setDataset(data, params.conversion)
28
-      })
21
+  function UserConversionRate (params) {
22
+
23
+    request({
24
+      ...apis.indexEcharts.userConversion,
25
+      params,
26
+    }).then(data => {  
27
+      console.log(data.data_count.registeredCount/data.data_count.pvNum,'1241234')
28
+      setDataset(data, params.conversion)
29
+    })
29
   }
30
   }
30
 
31
 
31
- function setDataset(data, theStatis) {
32
+  function setDataset (data, theStatis) {
32
     const { pvNum, ...other } = data.data_count
33
     const { pvNum, ...other } = data.data_count
33
 
34
 
34
     // 获取第一个值
35
     // 获取第一个值
41
     if (pvNum < num) {
42
     if (pvNum < num) {
42
       setTheCurrent([])
43
       setTheCurrent([])
43
     } else {
44
     } else {
45
+
46
+      setConversionRate(num/pvNum)
44
       setTheCurrent([
47
       setTheCurrent([
45
         { name: getStatisName(theStatis), value: num },
48
         { name: getStatisName(theStatis), value: num },
46
         { name: '其余', value: pvNum - num },
49
         { name: '其余', value: pvNum - num },
48
     }
51
     }
49
   }
52
   }
50
 
53
 
51
-  function getStatisName(theStatis) {
52
-     const statisTypes = [
53
-    { label: '授权手机', value: 'authorization_phone' },
54
-    { label: '项目收藏', value: 'building_save' },
55
-    { label: '项目转发', value: 'building_share' },
56
-    { label: '活动收藏', value: 'activity_save' },
57
-    { label: '活动转发', value: 'activity_share' },
58
-    { label: '资讯收藏', value: 'news_save' },
59
-    { label: '资讯转发', value: 'news_share' },
60
-    { label: '活动报名', value: 'activity_sign' },
61
-
62
-  ]
54
+  function getStatisName (theStatis) {
55
+    const statisTypes = [
56
+      { label: '授权手机', value: 'authorization_phone' },
57
+      { label: '项目收藏', value: 'building_save' },
58
+      { label: '项目转发', value: 'building_share' },
59
+      { label: '活动收藏', value: 'activity_save' },
60
+      { label: '活动转发', value: 'activity_share' },
61
+      { label: '资讯收藏', value: 'news_save' },
62
+      { label: '资讯转发', value: 'news_share' },
63
+      { label: '活动报名', value: 'activity_sign' },
64
+
65
+    ]
63
     return statisTypes.filter(x => x.value === theStatis)[0].label
66
     return statisTypes.filter(x => x.value === theStatis)[0].label
64
   }
67
   }
65
 
68
 
71
       type: 'pie',
74
       type: 'pie',
72
       name: '转化率',
75
       name: '转化率',
73
       radius: ['34%', '52%'],
76
       radius: ['34%', '52%'],
77
+      avoidLabelOverlap: false,
78
+      hoverAnimation: false,
79
+      label: { 
80
+        normal: { 
81
+          show: true,
82
+          position: 'center',
83
+          color: '#666666',
84
+          fontSize: 24,
85
+          fontWeight: 'bold',
86
+          formatter: `${(conversionRate*100).toFixed(2) === 'NaN' ? 0 : (conversionRate*100).toFixed(2) }%`, // {b}:数据名; {c}:数据值; {d}:百分比,可以自定义显示内容,
87
+        }
88
+      },
89
+      labelLine: {
90
+        normal: {
91
+          show: false
92
+        }
93
+      },
94
+
74
       data: theCurrent,
95
       data: theCurrent,
75
     },
96
     },
76
   }
97
   }
77
 
98
 
78
-  function onChange(e) {
99
+  function onChange (e) {
79
     UserConversionRate({ conversion: e })
100
     UserConversionRate({ conversion: e })
80
   }
101
   }
81
   const piestyles = {
102
   const piestyles = {
86
   return (
107
   return (
87
     <>
108
     <>
88
       <div>
109
       <div>
89
-      <p style={{ fontSize: '0.12rem', fontWeight: '600' }}>转化率</p>
110
+        <p style={{ fontSize: '0.12rem', fontWeight: '600' }}>转化率</p>
90
 
111
 
91
         <Select
112
         <Select
92
           style={{ width: 200 }}
113
           style={{ width: 200 }}
110
 
131
 
111
     </>
132
     </>
112
   )
133
   )
113
- }
134
+}
114
 
135
 
115
 export default UserSource
136
 export default UserSource