粒粒皆辛苦

合集 - 蓝桥杯(21)

1.逃离二向箔2023-06-022.偷梁换柱2023-06-023.课程列表2023-06-02

4.粒粒皆辛苦2023-06-02

5.成语学习2023-06-026.消失的 Token2023-06-027.芝麻开门2023-06-028.资讯接口2023-06-029.防抖函数2023-06-0310.element-ui 组件二次封装2023-06-0411.心愿便利贴2023-06-0412.购物车2023-06-0413.绝美宋词2023-06-0414.布局切换2023-06-0515.和手机相处的时光2023-06-0516.天气趋势2023-06-0517.阅读吧2023-06-0518.宝贵的一票2023-06-0819.大电影2023-06-0820.封装 Promisefy 函数2023-06-0821.权限管理2023-06-08

收起

习题链接

粒粒皆辛苦

任务

一道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);
      })    
   

__EOF__

本文作者：GTK
本文链接：https://www.cnblogs.com/DnmyCourage/p/17450866.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！