【React】实时疫情数据展示

小咪咪 2022-11-30 04:24 164阅读 0赞

## 内容 ##

> React 组件化思想  
> React 中使用 axios 请求  
> ECharts 中国地图的应用

## 效果预览 ##

![在这里插入图片描述][2020082318421929.gif_pic_center]  
样式可忽略，主聊 React 。

## 实现步骤 ##

React 核心思想组件化，此处就把页面分为5个不同的组件：根组件（index.js）、头部组件（header.js）、搜索组件（search.js）、数据表组件（form.js）、地图组件（map.js）。大大提高了项目的可扩展性

##### 1. 根组件（index.js） #####

**主要用于渲染，数据传递，和承载各个子组件**

import React from 'react';
    import ReactDOM from 'react-dom';
    import json from './yiqing.json'; // 数据文件
    import './asset/css/index.css';
    // 引入各个组件
    import MapCom from './component/echars.js';
    import HeadCom from './component/header.js';
    import FormCom from './component/form.js';
    import SearCom from './component/search.js';
    
    let newData = []; // 定义数组（存放处理后的数据）
    
    json.forEach((item,index)=>{  //处理数据，拿到所需数据
        newData.push(
            { 
                city : item.name,
                confirm : item.trend.list[0].data.pop(),
                cure : item.trend.list[1].data.pop(),
                die : item.trend.list[2].data.pop(),
            }
        )
    })
    // 把确诊人数按从大到小排序
    newData.sort((a,b)=>{ 
        return b.confirm - a.confirm
    })
    
    class AppCom extends React.Component{ 
        constructor(props){ 
            super(props);
            this.state = { 
                res:newData, //数据源
                myclass:{  // 用于显示或隐藏组件的类（实现tab栏切换）
                    c1:'current active',
                    c2:'current'
                },
                barStyle:{ 
                    left:'100px'
                }
            }
        }
        render(){ 
            // console.log(this.state.res);
            return(
               <div>
                    <HeadCom/>
                    <div className="master">
                    <ul className="tabs">
                        <div className="flag" style={ this.state.barStyle}></div>
                        <li data-index="0" onClick={ this.oneClick}>疫情图表</li>
                        <li data-index="1" onClick={ this.oneClick}>疫情地图</li>
                    </ul>
                    <div className={ this.state.myclass.c2}>
                    <MapCom newData={ this.state.res}/>
                    </div>
                    <div className={ this.state.myclass.c1}>
                    <SearCom newData={ this.state.res}/>
                    <FormCom newData={ this.state.res}/>
                    </div>
                    </div>
               </div>
            )
        }
        oneClick = (e)=>{ 
            if(e.target.dataset.index === "0"){  // 如果获取自定义属性为 0 就切换类
                this.setState({ 
                    myclass:{ 
                        c1:'current active',
                        c2:'current'
                    },
                    barStyle:{ 
                        left:'100px'
                    }
                })
            }else{ 
                this.setState({ 
                    myclass:{ 
                        c1:'current',
                        c2:'current active'
                    },
                    barStyle:{ 
                        left:'500px'
                    }
                })
            }
        }
    }
    
    ReactDOM.render(
        <AppCom/>,
        document.querySelector('#root')
    )

**注意**：此处的数据源是请求后的 json 文件（偷个懒），实时数据可以用 `反向代理`、`axios 请求` 得到， 请求时，注意配合钩子函数，实现数据的完整获取。数据源地址：[数据源][Link 1]

##### 2. 头部组件（header.js） #####

主要用于头部视图区的美化（多余，哈哈）

import React from 'react';
    import '../asset/css/header.css';
    
    class HeadCom extends React.Component{ 
        constructor(props){ 
            super(props);
            this.state= { }
        }
        render(){ 
            return(
                <div className="header">
                    <h3>新型冠状病毒肺炎</h3>
                    <h1>疫情实时大数据报告</h1>
                </div>
            )
        }
    }
    
    export default HeadCom

##### 3. 搜索组件（search.js） #####

**主要用于实现搜索具体地区的功能**

import React from 'react';
    class SearCom extends React.Component{ 
        constructor(props){ 
            super(props);
            this.state = { 
                inpCity:'',
                result:'',
                mystyle:{   //样式较少，写在state中
                    marginTop:'15px',
                    textAlign:'center'
                },
                inputstyle:{ 
                    width:'800px',
                    height:'30px',
                    marginTop:'10px',
                    border:'none',
                    borderBottom:'1px solid #10aeb5'
                }
            }
        }
        render(){  // 注意：React中的input输入框，必须绑定onchange事件（实现双线绑定）
            return(
                <div>
                    <h3 style={ this.state.mystyle}>输入地区进行查询</h3>
                    <input style={ this.state.inputstyle} type="text"
                        placeholder="请输入要查询的省份"
                        value={ this.state.inpCity} 
                        onKeyDown={ this.keyEvent} 
                        onChange={ this.inpChange}/>
                    <div style={ this.state.mystyle}>
                        <h2>{ this.state.inpCity}</h2>
                        { this.state.result}
                    </div>
                </div>
            )
        }
        keyEvent = (e)=>{ 
            if(e.keyCode === 13){ 
                console.log(this.props.newData)
                let mykey = this.props.newData.filter((item,index)=>{ 
                    return item.city === this.state.inpCity
                })
                
                if(mykey.length){ 
                    this.setState({ 
                        result:(
                            <p>
                            <span>确诊：{ mykey[0].confirm}-----</span>
                            <span>治愈：{ mykey[0].cure}-----</span>
                            <span>死亡：{ mykey[0].die}</span>
                        </p>
                        )
                    })
                }else{ 
                    this.setState({ 
                        result:(
                            <span>请出入正确的省份</span>
                        )
                    })
                }
            }
        }
        inpChange= (e)=>{ 
           this.setState({ 
               inpCity:e.target.value
           })
           if(e.target.value === ''){ 
               this.setState({ 
                   result:null  // 清空输入框，数据隐藏
               })
            }
        }
    }
    
    export default SearCom

**注意**：React中的`input输入框`，必须绑定`onchange事件`（实现双向绑定）

##### 4. 数据表组件（form.js） #####

**主要用于实现各个省份数据的循环渲染**

import React from 'react';
    import '../asset/css/form.css'
    
    class FormCom extends React.Component{ 
        constructor(props){ 
            super(props);
            this.state = { 
                banner:['疫情地区','累计确诊','累计治愈','累计死亡']
            }
        }
        render(){ 
            // console.log(this.props.newData)
            return(
                <div>
                    <ul className="listitem">
                    <li>
                    { 
                    this.state.banner.map((item,index)=>{ 
                        return(
                        <span key={ index}>{ item}</span>
                        )
                    })
                    }
                    </li>
                    { 
                         this.props.newData.map((item,index)=>{ 
                            return(
                            <li key={ index}>
                                <span>{ item.city}</span>
                                <span>{ item.confirm}</span>
                                <span>{ item.cure}</span>
                                <span>{ item.die}</span>
                            </li>
                            )
                        })
                    }
                </ul>
                </div>
            )
        }
    }
    
    export default FormCom

##### 5. 地图组件（map.js） #####

**主要用于实现各省份数据地图上的展示（ECharts 地图配置详尽）**

import React from 'react';
    import Echars from 'echarts';
    import '../asset/css/echars.css';
    import '../../node_modules/echarts/map/js/china.js' // 导入中国地图
    
    class MapCom extends React.Component{ 
        constructor(props){ 
            super(props);
            this.state = { }
        }
        render(){ 
            return(
                <div id="map"></div>
            )
        }
        componentDidMount(){     //页面渲染完毕
            const myChart = Echars.init(document.querySelector('#map'));  // 通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成图形
            let mydata = []; // 定义数据的数组
            this.props.newData.forEach((item,index)=>{ 
                mydata.push(  // 地图渲染接收数据为[{name:'',value:''},{},{}...]
                    { 
                        name:item.city,
                        value:item.confirm
                    }
                )
            })
        
            var option = {   //配置数据
                title:{    // 地图标题
                    text:"全国疫情大数据",
                    x:"center"
                },
                tooltip:{   // 鼠标经过提示文本
                  trigger:"item"
                },
                visualMap:{   // 地图色差挂件展示配置
                    min: 0,           //最小值 0
                    max: 3000,        //最大值 3000
                    x:'left',         //对其方式，左对齐
                    text:['高','低'], //文本，默认为数值文本
                    calculable : true, //显示文本值
                    // color:["",""] // 可对展示颜色进行配置（此处默认色）
                }
                ,
                series:[{   //地图相关配置
                    name:"累计确诊", // 显示的标题
                    type:"map", //类型（地图）
                    mapType:'china', // 地图名称（根据情况而定，必填）
                    width:"90%", // 地图在容器内的比例
                    data:mydata, //数据源
                    label:{ 
                        show:true //是否展示标签（省份名称）
                    }
                }]
            };
            myChart.setOption(option, true);  //把echarts实例挂载
        }
    }
    export default MapCom

**注意**：ECharts 官网找不到中国地图示例，但 ECharts 文件中仍然包含中国地图。传送：[ECharts官网][ECharts]

##### 写在最后 #####

文章到此就告一段落了，对于各组件的样式，承认丑到爆（毕竟时间紧，绕我一次，哈哈）。希望对大家有所帮助，加油。

[2020082318421929.gif_pic_center]: /images/20221124/6f7f3e24608d4db793cec7bd990b5c28.png
[Link 1]: https://voice.baidu.com/newpneumonia/get?target=trend&isCaseIn=0&stage=publish&callback=jsonp_1598180606657_71033
[ECharts]: https://echarts.apache.org/zh/index.html