可视化大屏

右下角

先导入需要的组件图片

react
import {useEffect, useState, useRef} from 'react'

 导入样式
import "./rightBottom.css"

 导入图片
import todayPng from '../../../assets/images/today.png'
import yestodayPng from '../../../assets/images/yestoday.png'

/导入echarts
import * as echarts from 'echarts'

导入请求函数
import {getFlow} from '../../../request/home'

组件代码

const Rightbottom = () => {
    // 定义变量，用于获取标签
    const echartsDOM = useRef(null)
    // 定义option
    const [option, setOption] = useState({
        tooltip: {
          trigger: 'axis'
        },
        grid: {
            left: 50,
            right: 60,
            bottom: 20
        },
        legend: {
          data: ['Evaporation', 'Precipitation'],
          textStyle: {
            color: '#fff'
          },
          icon: 'circle'
        },
        xAxis: 
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          }
        ,
        yAxis: 
          {
            type: 'value',
          }
        ,
        series: [
          {
            name: 'Evaporation',
            type: 'bar',
            data: [],
            itemStyle: {
                borderRadius: [20,20,20,20],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#2337f9' },
                    { offset: 0.5, color: '#6c1dff' },
                    { offset: 1, color: '#b004f2' }
                ])
            },
            barWidth: 15
          },
          {
            name: 'Precipitation',
            type: 'bar',
            data: [],
            itemStyle: {
                borderRadius: [20,20,20,20],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#3ee292' },
                    { offset: 0.5, color: '#20be52' },
                    { offset: 1, color: '#039b11' }
                ])
            },
            barWidth: 15
          }
        ]
    })
    // 在useEffect中创建图标
    useEffect(() => {
        // 初始化echarts
        const mycharts = echarts.init(echartsDOM.current)
        
        // 发送请求
        getFlow().then(resp => {
            // console.log(111, resp);
            // 修改option的legend
            option.legend.data = resp.data.data.result[0].dimensions.slice(1)
            // 修改x轴数据
            option.xAxis.data = resp.data.data.result[0].source.map(item => item.product)
            // 修改series
            // 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['昨日外来访客'])
            // 处理代码
            option.legend.data.forEach((v, i) => {
                option.series[i].name = v
                option.series[i].data = resp.data.data.result[0].source.map(item => item[v])
            })
            // console.log(33, option);
            setOption(option)
            mycharts.setOption(option)
        })
        // 设置option
        mycharts.setOption(option)
    }, [])
    return (
        <div className='right-bottom'>
           {/* 标题 */}
           <div className="right-bottom-title">
                <div>校园人员流动情况</div>
            </div>
            {/* 下面 */}
            <div className='right-bottom-bottom'>
                {/* 图标和文字描述 */}
                <div className='right-bottom-icon'>
                    <div>
                        <img src={yestodayPng} />
                        <div>
                            <span>1</span>
                            <span>昨日外来访客</span>
                        </div>
                    </div>
                    <div>
                        <img src={todayPng} />
                        <div>
                            <span>1</span>
                            <span>今日外来访客</span>
                        </div>
                    </div>
                </div>
                {/* 图表 */}
                <div className="right-bottom-echarts" ref={echartsDOM}></div>
            </div>
        </div>
    )
}

export default Rightbottom

css样式

.right-bottom{
    color: #ccc;
    margin: 10px 50px 0 70px;
}
.right-bottom-title{
    background-image: url(../../../assets/images/titlebg.png);
    background-size: 100% 100%;
    height: 36px;
    line-height: 36px;
    transform: rotateY(180deg);
    padding-right: 25px;
    font-size: 14px;
}
.right-bottom-title div{
    transform: rotateY(-180deg);
}

.right-bottom-bottom{
    background-color: rgba(120,120,120,.2);
    margin-top: 10px;
}
.right-bottom-icon{
    display: flex;
    justify-content: space-around;
    padding: 30px 0 0;
}
.right-bottom-icon>div{
    display: flex;
    align-items: center;
}
.right-bottom-icon>div>div{
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    text-align: center;
    font-size: 14px;
}

.right-bottom-echarts{
    width: 100%;
    height: 170px;
    margin-top: 10px;
    padding-bottom: 20px;
}

中间旋转木马

同样是先导入需要的组件和图片

[1719221040222](media/1719221040222.png) 

[1719221051995](media/1719221051995.png) 

定义子组件：

[1719221075874](media/1719221075874.png) 

书写代码的逻辑

布局：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])
      //

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

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)
  }