Day08地图下钻

1.页面

地图下钻：
·给地图绑定单击事件
·重新渲染地图：依赖地图名称、jso数据、学生分布情况的展示
重新渲染地图的过程和上次渲染地图的过程是一样的，可以将渲染地图的过程封装为一个函数，点击后再次调用即
可=>类似与递归
渲染了地图：
1.在useEffect中初始化echarts
2.发请求，获取地图数据
3.注册地图，设置了地图名称和地图的son数据
4.修改option
5.给地图放入学生分布情况数据

• 发请求，获取分布情况数据
• 修改option

6.设置option

7.给echarts绑定单击事件

• 将上面渲染地图的代码封装在一个函数中
• 调用这个函数，地图名称、json数据需要修改
• 修改这个函数，给函数传入两个参数，地图名称，获取地图数据需要adcode,第一次调用就需要传递参

数

• 再次调用，需要获取地图名称和adcode,在修改option的时候，给data中设置adcode数据，通过事件函数ata获取到没置好的数据，作为参数传递进去下钻后的回退
• 解绑单击事件

下钻后的回退

1. 给图表绑定右击事件
   。修改之前单击事件代码，需要在外面定义数组模拟栈数据结构，每次渲染地图后都将当前地图需要的地图
   名称以及地图请求路径中需要的adocde存储在栈中
   。从栈中扔出去一个数据，从栈中拿到最后一个数据（包含地图名称和adcode)用于渲染新地图
   。解绑右击事件
   ES6提供的Promise专门用于解决回调地狱的语法：

        let p1 new Promise((rseolve,reject)=>
        执行代码
                成功了==>调用reso1ve(1)处理响应数据的代码不在这里写
                失败了=>调用reject(2)
                })
                p1.then(数据=>{
                处理响应数据的代码在这里，这里的参数数据就是响应回来的数据
                })
                外面的promise的then方法中如果返回一个里面的promise对象，那么里面的promise对象的then方法就可以跟外面promisel的then方法形成链式操作了

let p1= new Promise((rseolve,reject)=>{
执行代码
成功了==>调用reso1ve(1)处理响应数据的代码不在这里写
失败了==>调用reject(2)
})
p1.then(数据=>{
处理响应数据的代码在这里，这里的参数数据就是响应回来的数据
let p2 =new Promise((resolve,reject)=>{
resolve(3)
})
//本来应该写在这里的then
return p2
})
.then(res=>{//这里里面p2的then方法
//当这个then执行的时候，上面那个then执行结束了
//当下面这个then执行的时候，这两次请求都响应成功了
})
.catch(err=>{//这个cateh并不属于任意一个promise对象
//当上面的promise对象们，其中的任意一个只要错误了就会执行
3)