粒粒皆辛苦-JZTXT

习题链接

课程列表

一道Echart题目
我们要做两件事情
第一件 就是获取数据
第二件 将数据转换成我们所需要的结构

关键点

axios请求数据的
1. axios中最常用的就是get与post，axios是基于promise的异步操作，所以是可以是使用then,catch方法来处理结果的，在本题里面就是一个简单的请求
2. axios.get(地址)
  .then(res=>{当请求成功，返回的结果在此处操作})
  .catch(err=>{执行失败的操作})
  .finally(()=>{成功或失败都将执行的操作})
3. 一点点的扩展知识（不看并不影响本次解题）
  1. 可以通过axios.interceptors对象来添加请求拦截器和响应拦截器
  2. axios是支持并发操作，可以使用axios.all，axios.spread方法来实现并发操作
初步了解Echart
1. Echart所有的配置项就是在option对象当中
2. 本地所存的数据是在option.dataset.source数组当中
3. 只需要将返回的数据结构，经过遍历得到该source数组所需要的结构即可
4. 修改配置之后是需要调用myChart.setOption(option); 进行重新加载图形
5. 注意事项：在option这个配置对象当中，一会数组一会对象的，很容易进行调用属性的时候出错，可能是数组但你是用的点，是对象却用的[]进行调用
这个地方使用了with语句并不是关键点，但可以说一下
1. with语句其实就是替你写了属性前面的所有点
2. 举个简单的例子就明白了
```
let obj = {name:"孙悟空",age:age};
with(obj){
    console.log(name); // 孙悟空
    console.log(age);  // age
}
```

代码实现 && 完整的代码

获取数据

axios.get("./data.json").then(res=>{console.log(res.data.data)});

转换数据格式，这个地方有点暴力，但简单

axios.get("./data.json")
   .then(res=>{ 
     let all = ["全部"];
     let wheats = ["小麦"];
     let soybeans = ["大豆"];
     let potatos = ["马铃薯"];
     let corns = ["玉米"];
     for (const key in res.data.data) { 
       with(res.data.data[key]){
         all.push(key);        // 存入年份
         wheats.push(wheat);   // 存入数据
         soybeans.push(soybean);  // 存入数据
         potatos.push(potato);    // 存入数据
         corns.push(corn);        // 存入数据
       }
     }
   })

修改option配置并进行调用setOption方法 && 完成code

axios.get("./data.json")
   .then(res=>{     // 若想偷懒可以只保留第一个let和corns最后的一个分号，这中间的let删除，分好换逗号    
     let all = ["全部"];
     let wheats = ["小麦"];
     let soybeans = ["大豆"];
     let potatos = ["马铃薯"];
     let corns = ["玉米"];
     for (const key in res.data.data) { 
       with(res.data.data[key]){
         all.push(key);        // 存入年份
         wheats.push(wheat);   // 存入数据
         soybeans.push(soybean);  // 存入数据
         potatos.push(potato);    // 存入数据
         corns.push(corn);        // 存入数据
       }
     } 
     option.dataset.source = [
       all,
       wheats,
       soybeans,
       potatos,
       corns
     ];
     myChart.setOption(option);
   })