DT走过的路

柱状图和饼图

index.jsx

import React, { useEffect } from 'react';
import StaffAmount from './component/StaffAmount';
import { useSelector, useDispatch } from 'umi';
import StaffTable from './component/StaffTable';
import Pie from './component/Pie';
import AgeBar from './component/AgeBar';
import Bar from './component/Bar';
const Index = () => {
    const { 
        amountDataList, 
        staffData,
        pieList,
        columnList,
        marriageData,
        constellationData
    } = useSelector(state => state.dashboard );
    //console.log(amountDataList,'amountDataList');
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch({
            type: 'dashboard/initDashboardList',
        })
    }, []);

    return (
        <div className="dashboard-container">

           {amountDataList.map((item, index) => (
                <StaffAmount {...item} key={index}></StaffAmount>
           ))}
           {/* 饼图 学历  性别 */}
           {pieList.map((item, index) => (
                <Pie {...item} key={index}></Pie>
            ))}
            {pieList[1] && <AgeBar {...pieList[1]} ></AgeBar>}
            <Pie {...marriageData} ></Pie>
            {/* 员工数量柱状图 */}
            {columnList.map((item, index) => (
                <Bar {...item} key={index}></Bar>
            ))}
           {/* 员工表格 */}
           <StaffTable {...staffData}></StaffTable>
           {/* 星座情况 */}
           <Pie {...constellationData} ></Pie>



        </div>
    );
};


export default Index;

注意点，页面初始渲染可能原始数据为[]，需要判断处理

{pieList[1] && <AgeBar {...pieList[1]} ></AgeBar>}

./component/AgeBar.jsx

import React from 'react';
import ReactECharts from 'echarts-for-react';
const AgeBar = ({renderList, styleData}) => {
    const option = { 
        title:{
            text:'平均年龄',
        },
        xAxis:{
            max:Math.ceil(Math.max(...renderList.map(item => item.age))),
        },
        yAxis:{
            type:'category',
            data:renderList.map(item => item.name),
            inverse:true,
            max: 1
        },
        series:[
            {
                realtimeSort:true,
                type:'bar',
                data:renderList.map(item => item.age),
                label:{
                    show:true,
                    position:'right',
                    valueAnimation:true,
                }
            }
        ]
    };
    return (
        <div className="staff-amount-container" style={{...styleData}}>
            <ReactECharts option={option} className="react_for_echarts"/>
        </div>
    );
}

export default AgeBar;

import React from 'react';
import ReactECharts from 'echarts-for-react';
const Bar = ({title, renderList, styleData, br = false}) => {
    const option ={
        title: {
            text: title,
        },
        tooltip: {
            trigger: 'axis',
        },
        xAxis: [{
            type: 'category',
            data: renderList.xData,
            axisLabel: {
                interval: 0,
                formatter: value => br ? value.split('').join('\n') : value,
               // rotate: 45,
            }
        }],
        yAxis: [{
            type: 'value',
            minInterval: 1
        }],
        series: [
            {
                name:'人数',
                type: 'bar',
                data: renderList.yData,
                label: {
                    show: true,
                    precision: 1,
                    position: 'top',
                    valueAnimation: true,
                }
            }
        ],
    }
    return (
       
        <div className="staff-amount-container" style={{...styleData}}>
            <ReactECharts option={option} className="react_for_echarts"/>
        </div>
              
    );
}

export default Bar;