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

import React, { Component, useState, useEffect } from 'react';

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 'echarts/lib/component/dataZoom'
import { Table, Select, Row, Col, Menu, Dropdown, Button, Icon, message } from 'antd';
import BuildSelect from '../../../components/SelectButton/BuildSelect'

const { Option } = Select;

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 UserBehavior = (props) => {
// console.log(props,'11111111')

const [data, setData] = useState({ records: [] })
  const [datas, setDatas] = useState({ records: [] })
 
  
  //柱图

  useEffect(() => {
    getUserBehaviorSummary(formatDate(props.startDate, props.endDate))
    getUserBehaviorProfile(formatDate(props.startDate, props.endDate))

  }, [props.startDate, props.endDate])

  function getUserBehaviorSummary(params) {


    request({
      ...apis.indexEcharts.userBehavior.summary,
      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([])
    request({
      ...apis.indexEcharts.userBehavior.profile,
      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) => {
      let { date, activityCount, activity } = item
      date = moment(date).format('YYYY-MM-DD')
      if (!activityCount) activityCount = 0

      // 使用对象, 可以去重
      series[`${activity}`] = (series[`${activity}`] || []).concat([[ date, activityCount ]])

      return series;
    }, {})


   const dataZoom=props.dataZoom?[
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        type: 'slider',
        start: 0,
        end: 100
      },
    ] : undefined 
    
  
    const options = {
    title:  {
        text: '用户行为',
        subtext: '最近7天',
      },
      icon: "rect",
      legend: {
         show: true, zlevel: 10 ,
         itemGap:100,
        //  data:[{
        //   //  name:'',
        //   icon: 'rect',
        //  }]
      },
      color: ['#F12B3E', '#FE929C', '#647CE1', '#A2B9FF', '#FF844F', '#FFBB9D'],
      tooltip: {
        trigger: 'axis'
      },
      xAxis: { type: 'category' },
      yAxis: {},
      dataZoom,
      series: Object.keys(seriesMaker).map(x => {
        return {
          type: 'line',
          name: x,
          data: seriesMaker[x],
        }
      }),
    }
   function handleBuildingChange (e) {
      getUserBehaviorSummary({ buildingId: e })
    }


  const style = {
    width: '100%',
    height: '400px',

  }



  return (
    <>
      <div>
        {/* onSuccess={(e) => onTabledatas(e)} */}
      <BuildSelect slot='action' onChange={(e=>handleBuildingChange(e))}></BuildSelect>
      <EChart  options={options} style={style} />

 
      </div>



    </>
  )
}

export default UserBehavior;