content
React componentization thought
using axios in React to request
the application of ECharts China map
Effect preview
The style can be ignored, let's talk about React.
Implementation steps
React's core idea is componentization. Here, the page is divided into 5 different components: root component (index.js), head component (header.js), search component (search.js), data table component (form. js), map component (map.js). Greatly improve the scalability of the project
1. Root component (index.js)
Mainly used for rendering, data transfer, and carrying various sub-components
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')
)
Note : The data source here is the requested json file (to be lazy). Real-time data can be used 反向代理and axios 请求obtained. When requesting, pay attention to the hook function to achieve complete data acquisition. Data source address: data source
2. Header component (header.js)
Mainly used to beautify the head view area (redundant, haha)
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 component (search.js)
Mainly used to realize the function of searching specific areas
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
Note : In React input输入框, it must be bound onchange事件(to achieve two-way binding)
4. Data table component (form.js)
Mainly used to implement loop rendering of data in various provinces
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 component (map.js)
Mainly used to realize the display on the data map of each province (ECharts map configuration is detailed)
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
Note : The China map example cannot be found on the ECharts official website, but the ECharts file still contains the China map. Send: ECharts official website
Write at the end
The article has come to an end. For the style of each component, admit that it is ugly (after all, time is tight, go around me once, haha). Hope to help everyone, come on.