2024/06/21/第三天

liulovesong2026-02-07 23:10

HTTP

http：全称 HyperText transfer protocol 译文是超文本传输协议。

协议：保障双方利益

哪双方：服务器和客户端

什么利益：传输超文本，给出去，能收到

1· 双方在确保通信的基础：请求连接

2· 开始通信

请求 ==> 请求报文

请求行

请求头：一堆键值对

请求空行：空格和换行，用于分割请求头和请求主体，可以让后端更好的获取请求主体

请求主体：这次请求携带的信息

响应 ==> 响应报文

响应行

协议和版本响应状态码响应的状态描述

响应头

响应主体

3· 断开连接：4次挥手

http是无状态协议，每次通信之间是完全没有关联的。

ECharts 柱状图

创建div

复制代码

 <div className="ele-water" ref={eleWaterChart}></div>

定义数据

复制代码

const eleWaterChart=useRef(null)

引入 echarts图表

复制代码

import * as echarts from 'echarts';

封装水电数据

复制代码

// 水电用量
export const getEleWater = () => {
 return axios({
 url: "/v1.0/api/intelligentDetection/dataTop",
 method: "GET"
    })
}

引入请求函数

复制代码

import {getEleWater} from "../../request/home";

定义option

复制代码

 const [option,setOption]=useState({
 tooltip: {},
 legend: {
 data: ['教学用水', '安防设备机电', '生态用水', '生活用水'],
 icon:'circle',
 textStyle:{color:'#fff'}
        },
 xAxis: {
 type: 'category',
 data: ['八月', '七月']
        },
 yAxis: {
 type: 'value'
        },
 series: [
          {
 name: '教学用水',
 type: 'bar',
 data: [120, 132, 101, 134]
          },
          {
 name: '安防设备机电',
 type: 'bar',
 data: [220, 182, 191, 234]
          },
          {
 name: '生态用水',
 type: 'bar',
 data: [150, 232, 201, 154]
          },
          {
 name: '生活用水',
 type: 'bar',
 data: [320, 332, 301, 334]
          }
        ]
    })

模拟生命周期

复制代码

 useEffect(()=>{
 //console.log(eleWaterChart.current);
 //  初始化
 const myChart = echarts.init(eleWaterChart.current);
 // 发请求
 getEleWater().then(res=>{
 console.log(555,res);
 // res.data.data.result[0].series[0].data
 option.legend.data = res.data.data.result[0].series.data
 option.series = res.data.data.result[0].series.map(item => {
 return {
 ...item
                }
            })
 //  将数据 赋值到前端页面 
 setOption(option);
 myChart.setOption(option);
          })
 // 设置option
 myChart.setOption(option);
    },[option])

ECharts 柱状图就出来了