estateagents-admin-manager/src/pages/indexEcharts/components/NewUsers.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 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 NewUsers = (props) => {
  //  console.log(props,'999999999999')
  const [data, setData] = useState({ records: [] })


  useEffect(() => {
    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({
      ...apis.indexEcharts.newUser,
      params,
    }).then((data) => {
      console.log(data, '3333')
      setData(data)
    })
  }

  const dataZoom=props.dataZoom?[
    {
      type: 'inside',
      start: 0,
      end: 100
    },
    {
      type: 'slider',
      start: 0,
      end: 100
    },
  ] : undefined 
  // //  show: false
  const dataset = (data.selectNewsUserCount) || []
  const options = {

   
      color: ["#FF814C", "#F02B3E"],
      tooltip: {
        trigger: "axis"
      },
      icon: "rect",
      legend: {
        data: ["新用户数", "授权注册"]
      },
      toolbox: {},
      xAxis: {
        type: "category",
      },
      yAxis: {},
      dataZoom,
      series: [
        {
          name: "新用户数",
          type: "line",
        },
        {
          name: "授权注册",
          type: "line",
        }
      ],
      dataset: {
        dimensions: ['date', 'userCount', 'authorizationCount'],
        source: dataset
      }
 
    
    
  }


  // 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>
         */}
       </div>


        <EChart options={options} style={piestyles} />
      </div>





    </>
  )
}

export default NewUsers;