粒粒皆辛苦

标签：axios res 粒粒皆辛苦 存入 let push data

习题链接

粒粒皆辛苦

课程列表

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

关键点

1. 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方法来实现并发操作
2. 初步了解Echart
   1. Echart所有的配置项就是在option对象当中
   2. 本地所存的数据是在option.dataset.source数组当中
   3. 只需要将返回的数据结构，经过遍历得到该source数组所需要的结构即可
   4. 修改配置之后是需要调用myChart.setOption(option); 进行重新加载图形
   5. 注意事项：在option这个配置对象当中，一会数组一会对象的，很容易进行调用属性的时候出错，可能是数组但你是用的点，是对象却用的[]进行调用
3. 这个地方使用了with语句并不是关键点，但可以说一下
   1. with语句其实就是替你写了属性前面的所有点
   2. 举个简单的例子就明白了

   let obj = {name:"孙悟空",age:age};
   with(obj){
       console.log(name); // 孙悟空
       console.log(age);  // age
   }
   

代码实现 && 完整的代码

1. 获取数据

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

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

   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);        // 存入数据
          }
        }
      })
   

3. 修改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);
      })    
   

标签：axios,res,粒粒皆辛苦,存入,let,push,data
From： https://www.cnblogs.com/DnmyCourage/p/17450866.html