echarts

config/config.js

@@ -416,12 +416,11 @@ export default {
                 },
               ],
             },
-
-
             {
               path: '/indexEcharts',
               name: '首页报表',
               component: '../layouts/SecurityLayout',
+              hideInMenu: true,
               routes: [
                 {
                   path: '/indexEcharts/index',
@@ -446,8 +445,7 @@ export default {
                 
               ],
             },
-            
-
+          
             
             {
               component: './404',

src/components/EchartsTest/EChart.jsx

@@ -56,7 +56,7 @@ class EchartsTest extends Component {
         }
 
         return (
-            <div ref={this.chartRef} style={style}></div>
+            <div onClick={this.props.onClick} ref={this.chartRef} style={style}></div>
         );
     }
 }

src/global.less

@@ -95,6 +95,10 @@ ol {
 .ant-card-body{
   padding: 0;
 }
+.antd-pro-pages-index-echarts-styles-pie,.antd-pro-pages-index-echarts-styles-bar{
+  padding: 0.1rem;
+  margin-bottom: 25px;
+}
 .ant-breadcrumb{
   font-size: 0.1rem;
   .anticon {

src/pages/Welcome.jsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { Card, Typography, Alert, Row, Col } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import EchartsTest from '../components/EchartsTest';
-import CityNums from './charts/CityNums';
+import IndexEcharts from './indexEcharts/index';
+import router from 'umi/router';
 
 const option = {
   xAxis: {
@@ -20,7 +21,7 @@ const option = {
 
 export default () => (
   <>
-    <div style={{ display: 'flex' }}>
+    <div style={{ display: 'flex',marginBottom:'28px' }}>
       <div style={{
         textAlign: 'center', display: 'flex', justifyContent: 'center', lineHeight: '100px', background: 'linear-gradient(144deg,rgba(241,43,62,1) 0%,rgba(254,144,155,1) 100%)', height: '100px',
         boxShadow: '0px  0.11rem 14px -15px rgba(241,43,62,1)',
@@ -37,17 +38,19 @@ export default () => (
         <span style={{ fontSize: '24px', color: '#fff' }}>总注册用户 </span>
         <span style={{ fontSize: '52px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy' }}>12</span>
       </div>
-      <div style={{
-        textAlign: 'center', display: 'flex', justifyContent: 'center', lineHeight: '100px', background: 'linear-gradient(137deg,rgba(107,130,230,1) 0%,rgba(152,175,251,1) 100%)', height: '100px',
+      <div onClick={()=>router.push('/indexEcharts/newUsers')} style={{
+        textAlign: 'center', display: 'flex', justifyContent: 'center', background: 'linear-gradient(137deg,rgba(107,130,230,1) 0%,rgba(152,175,251,1) 100%)', height: '100px',
         boxShadow: '0px  0.11rem 14px -15px rgba(107,130,230,1)',
         borderRadius: '12px', width: '32%',
       }}>
-        <span style={{ fontSize: '24px', color: '#fff' }}>最近7天新增 </span>
-        <span style={{ fontSize: '52px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy' }}>91</span>
+        <span style={{ fontSize: '24px', color: '#fff',borderBottom:'1px solid #fff',margin:'30px 0' }}>最近7天新增 </span>
+        <span style={{ fontSize: '52px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy', lineHeight: '100px' }}>91</span>
       </div>
     </div>
-    <EchartsTest style={{width: 500, height:500}}></EchartsTest>
-    <CityNums></CityNums>
+    <IndexEcharts style={{ width: '100%'}}></IndexEcharts>
+
+    {/* <EchartsTest style={{ width: 500, height: 500 }}></EchartsTest> */}
+
   </>
 );
 

src/pages/charts/CityNums.jsx

@@ -128,7 +128,7 @@ const CityNums = (props) => {
   }
 
   return (
-    <div style={{ margin: '24px 0', width: '100%', borderRadius: '8px', boxShadow: '0px 0px 9px 1px rgba(0,0,0,0.12)', overflow: 'hidden' }}>
+    <div style={{ margin: ' 0 0 20px  0', width: '100%', borderRadius: '8px', boxShadow: '0px 0px 9px 1px rgba(0,0,0,0.12)', overflow: 'hidden' }}>
       <Echart options={options} style={{ width: '100%', height: '600px' }} ></Echart>
     </div>
   )

src/pages/indexEcharts/components/IntentionalCustomers.jsx

@@ -77,25 +77,20 @@ const UserBehavior = (props) => {
     },
   ];
 
-
   function handleBuildingChange (e) {
     IntentionUsers({ buildingId: e })
-
   }
   return (
     <>
       <div>
-        <h3>意向客户</h3>
+      <p style={{fontSize:'0.12rem',fontWeight:'600'}}>意向客户</p>
 
         <BuildSelect slot='action' onChange={(e => handleBuildingChange(e))}></BuildSelect>
 
-        <Table dataSource={data.records} columns={columns} pagination={false} scroll={{ y: 500 }} />
-
+        <Table dataSource={data.records} columns={columns} style={{marginTop:'15px'}} pagination={false} scroll={{ y: 500 }} />
 
       </div>
 
-
-
     </>
   )
 }

src/pages/indexEcharts/components/NewUsers.jsx

@@ -6,7 +6,6 @@ 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 UserSource from './mmm';
 
 import styles from '../styles.less'
 const formatDate = (start, end) => {
@@ -15,7 +14,6 @@ const formatDate = (start, end) => {
   return { startDate, endDate }
 }
 const NewUsers = (props) => {
-  //  console.log(props,'999999999999')
   const [data, setData] = useState({ records: [] })
 
 
@@ -23,21 +21,6 @@ const NewUsers = (props) => {
     NewsUserCount(formatDate(props.startDate, props.endDate))
   }, [props.startDate, props.endDate])
 
-  // getNewsUserCount ({ commit }, payload) {
-  //   return new Promise((resolve, reject) => {
-  //     request({
-  //       ...apis.indexEcharts.newUser,
-  //       params: payload,
-  //     }).then((data) => {
-  //       resolve(data.selectNewsUserCount)
-  //     }).catch((err) => {
-  //       const message = err.message || err.msg
-  //       if (typeof message === 'string') {
-  //         reject(message)
-  //       }
-  //     })
-  //   })
-  // },
 
   function NewsUserCount (params) {
     request({
@@ -61,7 +44,6 @@ const NewUsers = (props) => {
       end: 100
     },
   ] : undefined 
-  // //  show: false
   const dataset = (data.selectNewsUserCount) || []
   const options = {
 
@@ -84,10 +66,12 @@ const NewUsers = (props) => {
         {
           name: "新用户数",
           type: "line",
+          smooth:true, 
         },
         {
           name: "授权注册",
           type: "line",
+          smooth:true, 
         }
       ],
       dataset: {
@@ -100,50 +84,19 @@ const NewUsers = (props) => {
   }
 
 
-  // function onChange (value) {
-  //   UserActive({ dateType: value })
-  // }
-
-
   const piestyles = {
     width: '100%',
     height: '400px',
-
   }
 
-
   return (
     <>
       <div>
-
-
         <div >
-          <h3>新增用户</h3>
-
-
-          {/* <Select
-            showSearch
-            style={{ width: 100 }}
-            placeholder="日活跃"
-            optionFilterProp="children"
-            onChange={onChange}
-            
-          >
-            <Option value="day">日活跃</Option>
-            <Option value="month">月活跃</Option>
-
-          </Select>
-         */}
+          <p onClick={()=>router.push('/indexEcharts/newUsers')}><span style={{borderBottom:'1px solid #f02d40',fontSize:'0.12rem',fontWeight:'600'}}>新增用户</span> <span style={{fontSize:'0.09rem',color:'#888',marginLeft:'0.06rem'}}>最近七天</span></p>
        </div>
-
-
-        <EChart options={options} style={piestyles} />
+        <EChart options={options} style={piestyles} onClick={()=>router.push('/indexEcharts/newUsers')} />
       </div>
-
-
-
-
-
     </>
   )
 }

src/pages/indexEcharts/components/UserActive.jsx

@@ -15,7 +15,6 @@ const formatDate = (start, end) => {
   return { startDate, endDate }
 }
 const UserSource = (props) => {
-  //  console.log(props,'999999999999')
   const [data, setData] = useState({ records: [] })
   //柱图
 
@@ -23,18 +22,6 @@ const UserSource = (props) => {
     UserActive({ dateType: 'day' })
   }, [])
 
-  //  getUserActive({ commit }, payload) {
-  //   return new Promise((resolve, reject) => {
-  //     request({
-  //       ...apis.indexEcharts.userActive,
-  //       params: { pageSize: 9999, ...payload }
-  //     }).then((data) => {
-  //       resolve(data.selectActiveUserCount)
-  //     }).catch((err) => {
-  //       reject(err)
-  //     })
-  //   })
-  // },
 
 
   function UserActive (params) {
@@ -42,21 +29,18 @@ const UserSource = (props) => {
       ...apis.indexEcharts.userActive,
       params: { pageSize: 9999, ...params },
     }).then((data) => {
-      // console.log(data, '3333')
+  
       setData(data)
     })
   }
-  //  show: false
+
   const dataset = (data.selectActiveUserCount) || []
   const options = {
-    // legend: { },
-    // color: ['#8954BA', '#175DFB', '#0BB963', '#27DEFF', '#E713D2', '#E71313'],
+
     tooltip: {},
     xAxis: { type: 'category' },
     yAxis: {},
-    // orient: 'horizontal',
     series: {
-      // orient: 'horizontal',
       type: 'bar',
       name: '活跃用户',
       barWidth: 50,
@@ -98,8 +82,7 @@ const UserSource = (props) => {
 
 
         <div >
-          <h3>用户活跃数</h3>
-
+        <p><span style={{fontSize:'0.12rem',fontWeight:'600'}}>用户活跃数</span></p>
 
           <Select
             showSearch
@@ -107,7 +90,6 @@ const UserSource = (props) => {
             placeholder="日活跃"
             optionFilterProp="children"
             onChange={onChange}
-            
           >
             <Option value="day">日活跃</Option>
             <Option value="month">月活跃</Option>
@@ -120,10 +102,6 @@ const UserSource = (props) => {
         <EChart options={options} style={piestyles} />
       </div>
 
-
-
-
-
     </>
   )
 }

src/pages/indexEcharts/components/UserBehavior.jsx

@@ -1,5 +1,4 @@
 import React, { Component, useState, useEffect } from 'react';
-
 import EChart from '../../../components/EchartsTest/EChart';
 import request from '../../../utils/request';
 import apis from '../../../services/apis';
@@ -17,7 +16,6 @@ const formatDate = (start, end) => {
   return { startDate, endDate }
 }
 const UserBehavior = (props) => {
-// console.log(props,'11111111')
 
 const [data, setData] = useState({ records: [] })
   const [datas, setDatas] = useState({ records: [] })
@@ -39,17 +37,10 @@ const [data, setData] = useState({ records: [] })
       params
     }).then((data) => {
       setData(data || {})
-      // props.onReData(data)
-      // console.log(data || {}, '2134')
+
     })
   }
-  // showDetail (row) {
-  //   this.detailData = []
-  //   this.dialogVisible = true
-  //   this.getUserBehaviorProfile().then((data) => {
-  //     this.detailData = data
-  //   })
-
+  
   function getUserBehaviorProfile (row) {
 
     setData([])
@@ -58,13 +49,10 @@ const [data, setData] = useState({ records: [] })
       params:{ event: row.event, personId: row.personId }
     }).then((data) => {
 
-      
       setData(data )
-      // props.onReData(data)
-      // console.log(data , '22354234')
+     
     })
 
-
   }
   
     const seriesMaker = (data.selectUserBehavior || []).reduce((series, item) => {
@@ -94,18 +82,11 @@ const [data, setData] = useState({ records: [] })
     
   
     const options = {
-    title:  {
-        text: '用户行为',
-        subtext: '最近7天',
-      },
+    title:  {},
       icon: "rect",
       legend: {
          show: true, zlevel: 10 ,
          itemGap:100,
-        //  data:[{
-        //   //  name:'',
-        //   icon: 'rect',
-        //  }]
       },
       color: ['#F12B3E', '#FE929C', '#647CE1', '#A2B9FF', '#FF844F', '#FFBB9D'],
       tooltip: {
@@ -117,6 +98,7 @@ const [data, setData] = useState({ records: [] })
       series: Object.keys(seriesMaker).map(x => {
         return {
           type: 'line',
+          smooth:true, 
           name: x,
           data: seriesMaker[x],
         }
@@ -133,20 +115,16 @@ const [data, setData] = useState({ records: [] })
 
   }
 
-
-
   return (
     <>
       <div>
         {/* onSuccess={(e) => onTabledatas(e)} */}
-      <BuildSelect slot='action' onChange={(e=>handleBuildingChange(e))}></BuildSelect>
-      <EChart  options={options} style={style} />
+        <p onClick={()=>router.push('/indexEcharts/userBehavior')}><span style={{borderBottom:'1px solid #f02d40',color:'#333',fontSize:'0.12rem',fontWeight:'600'}}>用户行为</span> <span style={{fontSize:'0.09rem',color:'#888',marginLeft:'0.06rem'}}>最近七天</span></p>
+      <div style={{float:'right',marginTop:'-40px',marginBottom:'20px'}}><BuildSelect slot='action' onChange={(e=>handleBuildingChange(e))}></BuildSelect></div>
+      <EChart onClick={()=>router.push('/indexEcharts/userBehavior')}  options={options} style={style} />
 
- 
       </div>
 
-
-
     </>
   )
 }

src/pages/indexEcharts/components/UserConversion.jsx

@@ -6,68 +6,33 @@ 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 UserSource from './mmm';
 
 import styles from '../styles.less'
 
-const formatDate = (start, end) => {
-  const startDate = moment(start).format('YYYY-MM-DDT00:00:00.000') + 'Z'
-  const endDate = moment(end).format('YYYY-MM-DDT23:59:59.999') + 'Z'
-  return { startDate, endDate }
-}
 
 const UserSource = (props) => {
 
   const [data, setData] = useState({ records: [] })
   const [theStatis, settheStatis] = useState({ records: [] })
- 
   const [theCurrent, settheCurrent] = useState({ records: [] })
-  const endDate = new Date()
-  const startDate = moment().subtract(7, 'day').toDate()
- 
-  // const theStatis = 'authorization_phone'
+
   useEffect(() => {
-    settheStatis('authorization_phone')
-    // UserConversionRate({ conversion: theStatis }).then(setDataset)
+    UserConversionRate({conversion: 'authorization_phone'})
   }, [])
 
-  // function UserConversionRate (params) {
-  //   console.log(params, '1111111')
-  //   request({
-  //     ...apis.indexEcharts.userConversion,
-  //     params,
-  //   }).then((data) => {
-
-  //     setData(data)
-  //     console.log(data, '000000')
-  //   }).then
-  // }
-  
- function UserConversionRate(_, payload) {
-    return new Promise((resolve, reject) => {
+ function UserConversionRate(params) {
       request({
         ...apis.indexEcharts.userConversion,
-        params: payload,
+        params,
       }).then((data) => {
-        resolve(data)
-      })
-    })
+        console.log(data,"data")
+        setData(data)
+      }) 
   }
-  // const dataset = (data.selectSexUser) || []
-  // console.log(dataset, '000000')
-  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' },
 
-  ]
-// const theCurrent = []
+
  function setDataset(data) {      
+ 
     const { pvNum, ...other } = data['data_count']
 
     // 获取第一个值
@@ -77,12 +42,11 @@ const UserSource = (props) => {
       break
     }
 
-
     if (pvNum < num) {
       theCurrent = []
     } else {
       theCurrent = [
-        { name: getStatisName(), value: num },
+        { name: this.getStatisName(), value: num },
         { name: '其余', value: pvNum - num },
       ]
     }
@@ -91,10 +55,19 @@ const UserSource = (props) => {
   }
 
   function getStatisName() {
-    return statisTypes.filter(x => x.value === theStatis)[0].label
-  }
+     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' },
 
-  // getStatisName() {
+  ]
+    return statisTypes.filter(x => x.value == theStatis)[0].label
+  }
  
   const options = {
     legend: {},
@@ -103,27 +76,16 @@ const UserSource = (props) => {
     series: {
       type: 'pie',
       name: '转化率',
-      radius: ['50%', '70%'],
-      data: theCurrent
+      radius: ['34%', '52%'],
+      data:[ { name: '授权手机', value: 6 },
+      { name: '其余', value: 6 },]
     }
     
-      
-    
-
   }
-  // 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 onChange (value) {
-
+  
+  function onChange (e) {
+    UserConversionRate({conversion: e})
+    
   }
 
   const piestyles = {
@@ -136,36 +98,28 @@ const UserSource = (props) => {
   return (
     <>
       <div>
-        <h3>转化率</h3>
+      <p style={{fontSize:'0.12rem',fontWeight:'600'}}>转化率</p>
 
         <Select
-          showSearch
           style={{ width: 200 }}
           placeholder="授权手机"
-          optionFilterProp="children"
           onChange={onChange}
-
         >
-          <Option value="authorization_phone">授权手机</Option>
-          <Option value="building_save">项目收藏</Option>
-          <Option value="building_share">项目转发</Option>
-          <Option value="activity_save">活动收藏</Option>
-          <Option value="activity_share">活动转发</Option>
-          <Option value="news_save">资讯收藏</Option>
-          <Option value="news_share">资讯转发</Option>
-          <Option value="activity_sign">活动报名</Option>
+          <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} /> */}
-
-
+        <EChart options={options} style={piestyles} />
 
 
       </div>
 
 
-
-
-
     </>
   )
 }

src/pages/indexEcharts/components/UserSex.jsx

@@ -6,7 +6,6 @@ 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 UserSource from './mmm';
 
 import styles from '../styles.less'
 
@@ -22,7 +21,6 @@ const UserSource = (props) => {
   const endDate = new Date()
   const startDate = moment().subtract(7, 'day').toDate()
 
-
   useEffect(() => {
     UserSex(formatDate(startDate, endDate))
   }, [])
@@ -32,59 +30,34 @@ const UserSource = (props) => {
       ...apis.indexEcharts.userSex,
       params,
     }).then((data) => {
-
       setData(data)
-      // console.log(data, '000000')
     })
   }
 
-
   const dataset = (data.selectSexUser) || []
-  // console.log(dataset, '000000')
+ 
   const options = {
     title: {
       text: '性别比例'
     },
     legend: {},
-    color: ['#FF7E48', '#FFC1A4'],
+    color: ['#FF7E48', '#dcdcdc'],
     tooltip: {},
-    
-    // label: { //  饼图图形上的文本标签
-
-    //   normal: { // normal 是图形在默认状态下的样式
-    //     show: true,
-    //     position: 'center',
-    //     color: 'red',
-    //     fontSize: 18,
-    //     fontWeight: 'bold',
-    //     formatter: '12' // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容，
-    //   }
-    // },
     series: {
       type: 'pie',
       name: '性别比例',
-      // radius: ['50%', '70%'],
-      center: ['50%', '65%'],
-
-        radius: ['40%', '60%'],
+      center: ['44%', '65%'],
+      radius: ['34%', '52%'],
       data:
         dataset,
-
-
-
-
     }
-    // series: {
-    //   ...this.defaultOpt.series,
-    //   data: this.dataset || [],
-
-    // },
   }
 
 
   const piestyles = {
     width: '100%',
     height: '400px',
+    minWidth:'350px'
 
   }
 

src/pages/indexEcharts/components/UserSource.jsx

@@ -6,11 +6,9 @@ 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 UserSource from './mmm';
 
 import styles from '../styles.less'
 
-
 const formatDate = (start, end) => {
   const startDate = moment(start).format('YYYY-MM-DDT00:00:00.000') + 'Z'
   const endDate = moment(end).format('YYYY-MM-DDT23:59:59.999') + 'Z'
@@ -18,51 +16,31 @@ const formatDate = (start, end) => {
 }
 
 const UserSource = (props) => {
-// console.log(props,'---------')
   const [data, setData] = useState({ records: [] })
   //柱图
-
   useEffect(() => {
-   userResource(formatDate(props.startDate, props.endDate))
+    userResource(formatDate(props.startDate, props.endDate))
   }, [props.startDate, props.endDate])
 
-  function userResource (params) {
+  function userResource(params) {
     request({
       ...apis.indexEcharts.userResource,
       params,
     }).then((data) => {
-      // console.log(data , '3333')
       setData(data)
       props.onSuccess(data)
     })
   }
 
-  function toEdit () {
-    router.push({
-      pathname: '/indexEcharts/userSource',
-      // query: {
-      //   a: 'b',
-      // },
-    });
-  }
-
   const dataset = data || {};
   const source = dataset.columnar || [];
-
-  // const source = this.dataset.columnar || [];
   const subtitle = '最近7天';
   const baroptions = {
-    title: {
-      text: '用户来源',
-      subtext: '最近7天',
-    },
-    // color: ['#286DD0', '#8565CE', '#6A96F8', '#F5749E', '#8B7FE2'],
+    title: { },
     xAxis: { type: 'category' },
     legend: {
       left: '20%',
       data: ['所有用户', '注册用户']
-      // itemWidth: '24px',
-      // itemHeight:'24px',
     },
 
     tooltip: {},
@@ -106,8 +84,6 @@ const UserSource = (props) => {
           }
         }
 
-
-
       },
     ],
     dataset: {
@@ -115,33 +91,23 @@ const UserSource = (props) => {
       dimensions: ['fromName', 'userCount', 'registered'],
       source: source,
     },
-
   }
 
-  function handleSelectChange (e) {
-    // eslint-disable-next-line no-console
-    // console.log(e)
-  }
-
-
-
-
 
   const barstyle = {
-    width: '1000px',
+    width: '100%',
     height: '480px',
-
+    minWidth: '400px'
   }
 
-
   return (
     <>
       <div>
-    
-        <EChart options={baroptions} style={barstyle} />
- 
-      </div>
+      <p onClick={()=>router.push('/indexEcharts/userSource')}><span style={{borderBottom:'1px solid #f02d40',color:'#333',fontSize:'0.12rem',fontWeight:'600'}}>用户来源</span> <span style={{fontSize:'0.09rem',color:'#888',marginLeft:'0.06rem'}}>最近七天</span></p>
 
+        <EChart onClick={() => router.push('/indexEcharts/userSource')} options={baroptions} style={barstyle} />
+
+      </div>
 
     </>
   )

src/pages/indexEcharts/components/UserSourcepie.jsx

@@ -6,7 +6,6 @@ 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 UserSource from './mmm';
 
 import styles from '../styles.less'
 const formatDate = (start, end) => {
@@ -15,9 +14,8 @@ const formatDate = (start, end) => {
   return { startDate, endDate }
 }
 const UserSource = (props) => {
-  //  console.log(props,'999999999999')
   const [data, setData] = useState({ records: [] })
-  //柱图
+
 
   useEffect(() => {
     userResource(formatDate(props.startDate, props.endDate))
@@ -28,7 +26,6 @@ const UserSource = (props) => {
        ...apis.indexEcharts.userResource,
        params,
      }).then((data) => {
-      //  console.log(data , '3333')
        setData(data)
      })
    }
@@ -36,124 +33,43 @@ const UserSource = (props) => {
   function toEdit () {
     router.push({
       pathname: '/indexEcharts/userSource',
-      // query: {
-      //   a: 'b',
-      // },
     });
   }
 
   const dataset = data || {};
 
 
-
-
-
   const { person_estate_agent = 0, person_null = 0, person_realty_consultant = 0 } = dataset.pie || {};
   const pieoptions = {
-    // xAxis: {},
     color: ['#6B82E6', '#F02D40', '#FF834E'],
     legend: {
-      // left: '70%',
       orient: 'vertical',
       x: 'left',
       data: ['来源置业顾问', '来源全民经纪人', '自主进入'],
-      
     },
-    tooltip: {
-
-    },
-    // yAxis: {},
-
+    tooltip: {},
     series: [
       {
         type: 'pie',
-        // datasetIndex: 1,
-        center: ['50%', '65%'],
-
-        radius: ['40%', '60%'],
-       
-        // itemStyle: {
-        //   normal: {
-          
-        //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-        //       offset: 0,
-        //       color: '#FFC4A8'
-        //     }, {
-        //       offset: 1,
-        //       color: '#FF7E49'
-        //     }]),
-        //   },
-  
-        // }
-     
+        center: ['44%', '65%'],
+        radius: ['34%', '52%'],
       },
-      // {
-        
-       
-       
-      //   itemStyle: {
-      //     normal: {
-          
-      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-      //         offset: 0,
-      //         color: '#214318'
-      //       }, {
-      //         offset: 1,
-      //         color: '#543E49'
-      //       }]),
-      //     },
-  
-      //   }
-     
-      // }
-      // {
-
-      //   itemStyle: {
-      //     normal: {
-          
-      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-      //         offset: 0,
-      //         color: '#FFC4A8'
-      //       }, {
-      //         offset: 1,
-      //         color: '#FF7E49'
-      //       }]),
-      //     }
-
-      // }
-
-
     ],
     dataset: {
       id: 'pie',
       source: [
-        {
-          form: '来源置业顾问', value: person_realty_consultant,
-        },
-        { form: '来源全民经纪人', value: person_estate_agent },
-        { form: '自主进入', value: person_null },
+        { '用户来源': '来源置业顾问', value: person_realty_consultant,},
+        { '用户来源': '来源全民经纪人', value: person_estate_agent },
+        { '用户来源': '自主进入', value: person_null },
       ]
     },
-
-
-
-
-
   }
-  function handleSelectChange (e) {
-    // eslint-disable-next-line no-console
-    // console.log(e)
-  }
-
-
-
-
-
+ 
 
   const piestyles = {
     width: '100%',
     height: '400px',
-
+    minWidth:'350px',
   }
 
 
@@ -161,18 +77,10 @@ const UserSource = (props) => {
     <>
       <div>
 
-
-
-
-
         <EChart options={pieoptions} style={piestyles} />
 
       </div>
 
-
-
-
-
     </>
   )
 }

src/pages/indexEcharts/index.jsx

@@ -1,13 +1,9 @@
 
 import React, { useState, useEffect } from 'react';
 import { Form, Input, Button, Icon, Select, message, Table, Divider, Row, Col, Tag, Pagination, Modal, DatePicker } from 'antd';
-
-// import styles from '../../style/GoodsList.less';
 import router from 'umi/router';
-
 import request from '../../utils/request'
 import apis from '../../services/apis';
-// import Styles from './style.less';/
 import UserSource from './components/UserSource.jsx';
 import UserSourcepie from './components/UserSourcepie.jsx';
 import UserBehavior from './components/UserBehavior.jsx';
@@ -18,28 +14,32 @@ import UserConversion from './components/UserConversion'
 import IntentionalCustomers from './components/IntentionalCustomers'
 import styles from './styles.less'
 import moment from 'moment';
-const header = (props) => {
+import CityNums from '../charts/CityNums';
+const indexEcharts = (props) => {
 
   const endDate = new Date()
 
   //为了观察数据先设30天
-  const startDate = moment().subtract(30, 'day').toDate()
+  const startDate = moment().subtract(7, 'day').toDate()
 
   function onTabledatas (e) {
 
   }
+  
   return (
 
     <>
-      {/* <div>2222</div> */}
-      <div style={{ display: 'flex' }}>
+      <div style={{ display: 'flex',width:'100%' }}>
         <div className={styles.bar}>
-          <UserSource endDate={endDate} startDate={startDate} onSuccess={(e) => onTabledatas(e)}></UserSource>
+          <UserSource endDate={endDate}  startDate={startDate} onSuccess={(e) => onTabledatas(e)}></UserSource>
         </div>
         <div className={styles.pie}>
           <UserSourcepie endDate={endDate} startDate={startDate}></UserSourcepie>
         </div>
       </div>
+      <div>
+      <CityNums></CityNums>
+      </div>
       <div className={styles.behavior}>
         <UserBehavior endDate={endDate} startDate={startDate} dataZoom={false}></UserBehavior>
       </div>
@@ -53,7 +53,6 @@ const header = (props) => {
       <div style={{ display: 'flex' }}>
         <div className={styles.bar}>
           <NewUsers endDate={endDate} startDate={startDate} dataZoom={false}></NewUsers>
-
         </div>
         <div className={styles.pie}><UserConversion></UserConversion> </div>
       </div >
@@ -66,4 +65,4 @@ const header = (props) => {
 }
 
 
-export default header
+export default indexEcharts

src/pages/indexEcharts/newUsers.jsx

@@ -28,7 +28,7 @@ const header = props => {
   useEffect(() => {
 
     setEndDate(new Date())
-    setStartDate(moment().subtract(30, 'day').toDate())
+    setStartDate(moment().subtract(7, 'day').toDate())
 
   }, [])
 
@@ -57,7 +57,6 @@ const header = props => {
 
   function onChange (e) {
 
-    // console.log(`radio checked:${e.target.value}`);
 
   }
 
@@ -68,9 +67,6 @@ const header = props => {
 
   }
 
-  
- 
-
  
   function handleSelectChange (e) {
 
@@ -80,11 +76,6 @@ const header = props => {
 
   const { Column, ColumnGroup } = Table;
 
-
-
-
-
-  
   return (<>
     <div style={{
       backgroundColor: '#fff',
@@ -93,7 +84,7 @@ const header = props => {
       borderRadius: '12px',
       minHeight: '60vh'
     }}>
-      <Radio.Group onChange={onChange} defaultValue="a">
+      <Radio.Group onChange={onChange} buttonStyle="solid" defaultValue="a"  style={{marginBottom:'20px'}}>
         <Radio.Button value="a" onClick={getDataOf(7)}>最近7天</Radio.Button>
         <Radio.Button value="b" onClick={getDataOf(30)}>最近1月</Radio.Button>
       </Radio.Group>

src/pages/indexEcharts/styles.less

@@ -1,36 +1,35 @@
 .bar {
-  width: 1060px;
+  width: 70%;
+  min-width: 400px;
   min-height: 560px;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.12);
   border-radius: 12px;
-  padding: 40px;
-  margin-right: 40px;
-  margin-bottom: 40px;
+  margin-right: 30px;
 }
 
 .pie {
-  width: 509px;
+  width: 30%;
+  min-width: 370px;
   height: 560px;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.12);
   border-radius: 12px;
-  padding: 40px;
-  margin-bottom: 40px;
+
 }
 
 .behavior {
-  width: 1600px;
+  width: 100%;
   height: 586px;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.12);
   border-radius: 12px;
-  margin-bottom: 40px;
+  margin-bottom: 25px;
   padding: 40px;
 }
 
 .customers {
-  width: 1600px;
+  width: 100%;
   height: 718px;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.12);

src/pages/indexEcharts/userBehavior.jsx

@@ -1,10 +1,8 @@
 import React, { Component, useState, useEffect } from 'react';
-import { Radio, DatePicker, Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, Breadcrumb } from 'antd';
+import { Radio, DatePicker, Form, Input, Button, Icon, Select, message,Table} from 'antd';
 import { Row, Col, Menu, Dropdown } from 'antd';
 import UserBehavior from './components/UserBehavior'
-// import XForm, { FieldTypes } from '../../components/XForm';
 import moment from 'moment';
-
 import EChart from '../../components/EchartsTest/EChart';
 import request from '../../utils/request';
 import apis from '../../services/apis';
@@ -16,7 +14,6 @@ import apis from '../../services/apis';
 //   return { startDate, endDate }
 // }
 
-
 const header = props => {
 
   const [tableData, setTableData] = useState({ records: [] })
@@ -28,7 +25,7 @@ const header = props => {
   useEffect(() => {
 
     setEndDate(new Date())
-    setStartDate(moment().subtract(30, 'day').toDate())
+    setStartDate(moment().subtract(7, 'day').toDate())
 
   }, [])
 
@@ -40,26 +37,14 @@ const header = props => {
     daterange[0]=dateStrings[0]
 
   }
-
-  const handleSubmit = (e, props) => {
-
-    e.preventDefault();
-
-  }
-
+ 
   const getDataOf = (days) => () => {
 
- 
     setEndDate(new Date())
     setStartDate(moment().subtract(days, 'day').toDate())
 
   }
 
-  function onChange (e) {
-
-    // console.log(`radio checked:${e.target.value}`);
-
-  }
 
   function datalist () {
 
@@ -67,7 +52,6 @@ const header = props => {
     setStartDate(daterange[0])
 
   }
-
   
   function redata (e) {
   
@@ -75,13 +59,8 @@ const header = props => {
     console.log('行为回调数据：' ,e)
   }
  
-
  
-  function handleSelectChange (e) {
 
-    console.log(e)
-
-  }
 
   const columns = [
     {
@@ -118,18 +97,15 @@ const header = props => {
 
   const dataSource  = []
 
-
-
-  
   return (<>
     <div style={{
       backgroundColor: '#fff',
       padding: '32PX 28px',
       boxShadow: '0px 0px 16px 2px rgba(0,0,0,0.12)',
       borderRadius: '12px',
-      minHeight: '60vh'
+      minHeight: '1000vh'
     }}>
-      <Radio.Group onChange={onChange} defaultValue="a">
+      <Radio.Group  buttonStyle="solid"  defaultValue="a">
         <Radio.Button value="a" onClick={getDataOf(7)}>最近7天</Radio.Button>
         <Radio.Button value="b" onClick={getDataOf(30)}>最近1月</Radio.Button>
       </Radio.Group>
@@ -140,15 +116,13 @@ const header = props => {
           'This Month': [moment().startOf('month'), moment().endOf('month')],
         }}
         showTime
-        // format="YYYY/MM/DD HH:mm:ss"
         onChange={onChangetime}
       />
       <Button type="primary" htmlType="submit" style={{ marginLeft: '30px' }} onClick={datalist}>
         搜索
-          </Button>
-      <div>
+      </Button>
+      <div style={{margin:'24px 0'}}>
         <UserBehavior endDate={endDate} startDate={startDate}  dataZoom={true}  onReData={(e) => redata(e)}></UserBehavior>
-        {/* */}
       </div>
 
       <Table dataSource={dataSource} columns={columns} pagination={false} scroll={{ y: 500 }} />
@@ -156,5 +130,4 @@ const header = props => {
   </>
   )
 }
-// data.records
 export default header

src/pages/indexEcharts/userSource.jsx

@@ -102,11 +102,8 @@ const header = props => {
       return acc
     }, {})
 
-    // tabledata
     setTableData(Object.keys(data).map(x => ({ label: x, ...data[x] })))
 
-    // console.log('回调数据11111111111111111111111111：' ,Object.keys(data).map(x => ({ label: x, ...data[x] })))
-    // console.log('回调数据1：' ,tableData[0])
   }
 
   const columns = [
@@ -154,9 +151,6 @@ const header = props => {
 
   ]
 
-  // const columns = [{}]
-
-  // console.log(tableData, '12222222222222')
   function handleSelectChange (e) {
 
     console.log(e)
@@ -174,7 +168,7 @@ const header = props => {
       borderRadius: '12px',
       minHeight: '60vh'
     }}>
-      <Radio.Group onChange={onChange} defaultValue="a">
+      <Radio.Group buttonStyle="solid" defaultValue="a">
         <Radio.Button value="a" onClick={getDataOf(7)}>最近7天</Radio.Button>
         <Radio.Button value="b" onClick={getDataOf(30)}>最近1月</Radio.Button>
       </Radio.Group>