Day04

1.右下角

组件代码

import React, { useEffect, useRef, useState } from 'react'
import './rightBottom.css'
import * as echarts from 'echarts';
import today from '../../../images/today.png'
import yestoday from '../../../images/yestoday.png'
import {getFlow} from '../../../../request/index'
function RightBottom() {
    const FlowBox = useRef(null)
    const [option, setOption] = useState({
        legend: {
            data: ['Evaporation', 'Precipitation', 'Temperature'],
            textStyle:{color:'#fff',fontSize:'10px'},icon:'circle'
        },
        grid:{
            left:30,
            height:'50%',
            bottom:70
        },
        xAxis: 
            {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ,
        yAxis: 
            {
                type: 'value',
                min: 50,
                max:650,
                interval: 100
            }
        ,
        series: [
            {
                name: 'Evaporation',
                type: 'bar',
                data: [],
                itemStyle: {
                    borderRadius: [20, 20, 20, 20],
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#2E35FF' },
                        { offset: 0.5, color: '#751BFF' },
                        { offset: 1, color: '#A709FF' }
                    ])
                }
            },
            {
                name: 'Precipitation',
                type: 'bar',
                data: [],
                itemStyle: {
                    borderRadius: [20, 20, 20, 20],
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#39DC87' },
                        { offset: 0.5, color: '#1CB846' },
                        { offset: 1, color: '#08A11B' }
                    ])
                },
                barWidth:15
            },
        ]
    })
    useEffect(() => {
        var myChart = echarts.init(FlowBox.current);
        getFlow().then(resp=>{
            console.log(666,resp.data)
            option.legend.data=resp.data.data.result[0].dimensions.slice(1)
            option.xAxis.data=resp.data.data.result[0].source.map(item=>item.product);
            option.series[0].name='今日外来访客'
            option.series[0].data=resp.data.data.result[0].source.map(item=>item['今日外来访客'])
            option.series[1].name='昨日外来访客'
            option.series[1].data=resp.data.data.result[0].source.map(item=>item['昨日外来访客'])
            console.log(22232,option)
            setOption(option)
            myChart.setOption(option)
        })
        myChart.setOption(option)
    }, [])
    return (
        <div className='right-bottom'>
            <div className='right-bottom-title'>
                <div>校园人员流动情况</div>
            </div>
            <div className='right-bottom-content'>
                <div className='right-bottom-top'>
                    <div className='right-left'>
                        <img src={today}></img>
                        <div>
                            <p>1</p>
                            <p>昨日外来访者</p>
                        </div>
                    </div>
                    <div className='right-right'>
                        <img src={yestoday}></img>
                        <div>
                            <p>1</p>
                            <p>今日外来访者</p>
                        </div>
                    </div>
                </div>
                <div className='right-bottom-bottom' ref={FlowBox}>
​
                </div>
            </div>
        </div>
    )
}
​
export default RightBottom
​

css样式代码：

.right-bottom {
    margin: 10px 50px 0;
    color: #fff;
}
​
.right-bottom-title {
    line-height: 36px;
    background-image: url('../../../images/titlebg.png');
    background-size: 100% 100%;
    transform: rotateY(180deg);
}
​
.right-bottom-title div {
    transform: rotateY(-180deg);
    padding-left: 20px;
}
​
.right-bottom-content {
    height: 210px;
    margin-top: 10px;
    background-color: #0C1D5F;
   
    .right-bottom-top{
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-around;
        .right-left {
            width: 140px;
            height: 60px;
            display: flex;
            align-items: center;
            p{
                text-align: center;
                margin-left: 10px;
            }
        }
        .right-right {
            width:140px;
            height: 60px;
            display: flex;
            align-items: center;
            p{
                text-align: center;
                margin-left: 10px;
            }
        }
    }
​
    .right-bottom-bottom{
        width: 100%;
        height: 200px;
    }
   
}

2.中间旋转木马

首先在首页组件中，导入旋转木马子组件，并使用子组件：

定义子组件

代码逻辑

1.布局：一个盒子：=>6个对象

2.定义动画：设置间隔，匀速运动

3.书写代码的逻辑：

• 布局：1个大盒子，定义数据(1个数组嵌套了6个对象)，在大盒子中遍历渲染6个小盒子

• 修饰样式：定义了3个动画，并将动画给小盒子做修饰

• 通过ref获取父标签，用父标签的children获取到所有的子标签，循环给每个子标签设置动画的延迟

• 给每个子标签绑定鼠标移入事件

  // 事件函数
  const onmouseenter = (id) => {
      // 让动画停止
      for (let a = 0; a < carouselBox.current.children.length; a++) {
          carouselBox.current.children[a].style['animation-play-state'] = `paused`
      }
      // 让当前这个变 hov 图片 ==> 知道这是哪一个要变
      // console.log(222, id);
      // 根据id找到对应的这个数据
      let carouselData = data.find(item => item.id === id)
      // 修改这个数据的active
      carouselData.active = !carouselData.active
      // 重新设置data数据
      setData([...data])
      // console.log(333, data);
  }

• 模拟移入事件设置移出事件和点击事件

  const onmouseleave = (id) => {
      // 让动画停止
      for (let a = 0; a < carouselBox.current.children.length; a++) {
          carouselBox.current.children[a].style['animation-play-state'] = `running`
      }
      // 让当前这个变 hov 图片 ==> 知道这是哪一个要变
      // console.log(222, id);
      // 根据id找到对应的这个数据
      let carouselData = data.find(item => item.id === id)
      // 修改这个数据的active
      carouselData.active = !carouselData.active
      // 重新设置data数据
      setData([...data])
      // console.log(333, data);
  }
  const onclick = (id) => {
      let carouselData = data.find(item => item.id === id)
      alert(carouselData.text)
  }