pc-admin/src/pages/statistics/dataReport/components/userSource.jsx

import React, { Component, useState, useEffect } from 'react';
import echarts from 'echarts/lib/echarts';
import { Card } from 'antd';
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';

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 { startDate = moment().subtract(7, 'day').format('YYYY-MM-DD'), endDate = moment().format('YYYY-MM-DD') } = props;
  const [xData, setxData] = useState([]);
  const [fromData, setFromData] = useState([]);
  const [registerData, setRegisterData] = useState([]);
  //柱图
  useEffect(() => {
    userResource(formatDate(startDate, endDate));
  }, []);

  function userResource(params) {
    request({
      ...apis.indexEcharts.selectPersonFrom,
      params,
    }).then(data => {

      setxData(data.tdWxDicts.map(x => x.sceneAlias));
      setFromData(data.tdWxDicts.map(x => x.fromData));
      setRegisterData(data.tdWxDicts.map(x => x.registerSum));
      // props.onSuccess(data)
    });
  }

  const subtitle = '最近7天';
  const baroptions = {
    title: {},
    xAxis: {
      type: 'category',
      data: xData,
      axisLabel: { rotate: 45 },
    },
    legend: {
      left: '20%',
      data: ['所有用户', '注册用户'],
    },

    tooltip: {},

    yAxis: {},
    series: [
      {
        type: 'bar',
        name: '所有用户',
        datasetIndex: 0,
        barWidth: 20,
        data: fromData,
        itemStyle: {
          normal: {
            barBorderRadius: [20, 20, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#FFC4A8',
              },
              {
                offset: 1,
                color: '#FF7E49',
              },
            ]),
            shadowColor: 'rgba(0, 0, 0, 0.4)',
          },
        },
      },
      {
        type: 'bar',
        name: '注册用户',
        barWidth: 20,
        data: registerData,
        itemStyle: {
          normal: {
            barBorderRadius: [20, 20, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#FE939D',
              },
              {
                offset: 1,
                color: '#F0293C',
              },
            ]),
            shadowColor: 'rgba(0, 0, 0, 0.4)',
          },
        },
      },
    ],
    // dataset: {
    //   id: 'bar',
    //   dimensions: ['fromName', 'userCount', 'registered'],
    //   source: source,
    // },
  };

  const barstyle = {
    width: '100%',
    // height: '480px',
    // minWidth: '400px'
  };

  return (
    <>
      <Card title="用户来源" headStyle={{ textAlign: 'left' }}>
        {/* <p onClick={()=>router.push('/statistical/userSource')}><span style={{borderBottom:'1px solid #f02d40',cursor: 'pointer',color:'#333',fontSize:'0.12rem',fontWeight:'600'}}>用户来源</span> {!props.BuildSelectHide && <span style={{ fontSize: '0.09rem', color: '#888', marginLeft: '0.06rem' }}>最近七天</span>}</p> */}

        <EChart options={baroptions} style={barstyle} />
      </Card>
    </>
  );
};

export default UserSource;