蓝桥杯 web 粒粒皆辛苦（axios)

大致思路：

目的是将从data.json获取的年份数据填充到ECharts的dataset.source中，最终更新图表。

核心逻辑是通过遍历数据对象、使用计数器k控制列索引，将不同作物的产量数据写入对应的行和列。

答案

axios.get('./data.json').then((res) => { //发送GET请求获取JSON数据
    const data = res.data.data; // 从响应中提取数据（假设数据结构为 { data: { ... } }）
    let k = 0; // 移动到作用域内部，避免污染全局变量

    // 提取年份并排序（确保顺序正确）
    const years = Object.keys(data).sort(); // 按年份排序（如"2017", "2018"...）

    for (const year of years) {
        k++;
        if (k > 6) break; // 用break代替return，避免退出函数

        // ✅ 核心赋值逻辑：将数据填充到图表的dataset.source中 填充数据到对应行和列
        // 1. 小麦数据（source的第二行，索引1）
        option.dataset.source[1][k] = data[i].wheat; // 小麦产量填入对应年份的列
        
        // 2. 大豆数据（source的第三行，索引2）
        option.dataset.source[2][k] = data[i].soybean; // 大豆产量
        
        // 3. 马铃薯数据（source的第四行，索引3）
        option.dataset.source[3][k] = data[i].potato; // 马铃薯产量
        
        // 4. 玉米数据（source的第五行，索引4）
        option.dataset.source[4][k] = data[i].corn; // 玉米产量
    }

    myChart.setOption(option); // 更新图表配置（将新数据应用到图表）
});

关键点解释：

1. 数据结构与索引

• option.dataset.source的结构：

  [
    ["全部", "2017", "2018", "2019", "2020", "2021", "2022"], // 第0行：标题和年份列
    ["小麦", 1, 1, 1, 1, 1, 1],       // 第1行：小麦的产量数据
    ["大豆", 9, 9, 9, 9, 9, 9],       // 第2行：大豆的产量数据
    ["马铃薯", 13, 13, 13, 13, 13, 13], // 第3行：马铃薯的产量数据
    ["玉米", 23, 23, 23, 23, 23, 23], // 第4行：玉米的产量数据
  ]

  • source[1][k]：
    • 第1行是小麦的数据行，k表示年份列的索引（k=1对应2017，k=6对应2022）。
    • data[i].wheat是当前年份（如2017）的小麦产量，填入对应年份的列。

2. for...in循环的逻辑

• i的含义：
  data是一个对象，i是它的属性名（如"2017"、"2018"等年份字符串）。
• data[i]的结构：
  假设data的结构为：

  data = {
    "2017": { wheat: 10, soybean: 20, potato: 30, corn: 40 },
    "2018": { wheat: 15, soybean: 25, potato: 35, corn: 45 },
    // ...其他年份
  };

3. k计数器的作用

• 初始值为0：
  第一次循环时，k自增为1，对应2017年的列（source的第二列）。
• k>6时终止：
  当k=7时退出循环，确保最多处理2017到2022年（共6年数据）。

4. return的潜在问题

• return的作用域：
  如果这段代码在函数内部，return会直接退出函数，可能导致后续代码（如setOption）未执行。
  建议改用 break：

  if (k > 6) { 
      break; // 仅退出循环，不终止函数
  }