蓝桥杯 web 学海无涯（axios、ecahrts）版本二

答案：

// TODO: 待补充代码

// 初始化图表的数据，设置周视图的初始数据
option.series[0].data = [180, 274, 253, 324, 277, 240, 332, 378, 101]; // 周数据（每周的总学习时长）
option.xAxis.data = ["2月第1周", "2月第2周", "2月第3周", "2月第4周", "3月第1周", "3月第2周", "3月第3周", "3月第4周", "3月第5周"]; // 周标签（每周的时间段）
myChart.setOption(option); // 将配置应用到图表，初始化为周视图

// 定义变量用于存储月视图的数据
let xMonthSeries; // 存储月份标签（如 ["2月", "3月"]）
let yMonthSeries; // 存储每月的总学习时长（如 [总时长1, 总时长2]）

// 定义一个求和函数，用于计算数组中所有元素的总和
function sum(arr) {
  return arr.reduce((total, value) => total += value, 0); // 使用 reduce 方法对数组进行累加，初始值为 0
}

// 获取数据：从 data.json 文件中加载数据
axios.get('./data.json').then(({ data: { data } }) => {
  console.log(data); // 打印从 data.json 中获取的数据，便于调试

  // 提取月份标签（即对象的键，如 "2月"、"3月"）
  xMonthSeries = Object.keys(data); // 获取对象的所有键，形成月份标签数组

  // 计算每个月的学习总时长
  yMonthSeries = [
    sum(Object.values(data)[0]), // 第一个月（如 "2月"）的学习时长总和
    sum(Object.values(data)[1])  // 第二个月（如 "3月"）的学习时长总和
  ];
});

// 监听 Tab 切换事件：实现“周”和“月”视图的切换
let tabs = document.getElementsByClassName('tab'); // 获取所有的 tab 元素
for (let index = 0; index < tabs.length; index++) {
  tabs[index].addEventListener('click', (e) => {
    console.log(e.target.textContent); // 打印当前点击的 Tab 标签内容（"周" 或 "月"）

    if (e.target.textContent === '月') {
      // 如果点击的是“月”Tab，则切换为月视图
      option.series[0].data = yMonthSeries; // 设置月视图的 y 轴数据（每月的总学习时长）
      option.xAxis.data = xMonthSeries;   // 设置月视图的 x 轴数据（月份标签）
      myChart.setOption(option);          // 应用新的配置到图表
    } else if (e.target.textContent === '周') {
      // 如果点击的是“周”Tab，则切换为周视图
      option.series[0].data = [180, 274, 253, 324, 277, 240, 332, 378, 101]; // 恢复周视图的 y 轴数据
      option.xAxis.data = ["2月第1周", "2月第2周", "2月第3周", "2月第4周", "3月第1周", "3月第2周", "3月第3周", "3月第4周", "3月第5周"]; // 恢复周视图的 x 轴数据
      myChart.setOption(option); // 应用新的配置到图表
    }
  });
}

详细注释说明

1. 初始化图表数据

• option.series[0].data 和 option.xAxis.data：
  • 这是 ECharts 图表的核心数据部分。
  • series[0].data 表示 y 轴数据（如每周的学习时长）。
  • xAxis.data 表示 x 轴数据（如每周的时间段）。
  • 在这里，我们设置了初始的周视图数据。

2. 定义变量

• xMonthSeries 和 yMonthSeries：
  • 这两个变量用于存储月视图的数据。
  • xMonthSeries 是月份标签（如 ["2月", "3月"]）。
  • yMonthSeries 是每月的学习时长总和（通过 sum 函数计算得出）。

3. 求和函数

• sum(arr)：
  • 使用 reduce 方法对数组中的所有元素进行累加。
  • reduce 的回调函数接收两个参数：累积值 total 和当前值 value。
  • 初始值为 0，确保即使数组为空，返回值也是 0。

4. 获取数据

• axios.get('./data.json')：
  • 使用 Axios 发起 HTTP GET 请求，从 data.json 文件中加载数据。
  • { data: { data } } 是解构赋值，直接提取响应中的 data 部分。
  • Object.keys(data) 获取对象的所有键，形成月份标签数组。
  • Object.values(data) 获取对象的所有值（即每月的学习时长数组），并调用 sum 函数计算总和。

5. 监听 Tab 切换

• document.getElementsByClassName('tab')：
  • 获取页面中所有的 tab 元素（即“周”和“月”按钮）。
• addEventListener('click', ...)：
  • 为每个 tab 添加点击事件监听器。
  • 当用户点击某个 Tab 时，根据其内容（e.target.textContent）判断是“周”还是“月”。
  • 根据判断结果，动态更新 option 的数据，并调用 myChart.setOption(option) 更新图表。

    ---

1. 初始化图表数据

option.series[0].data = [180, 274, 253, 324, 277, 240, 332, 378, 101];
option.xAxis.data = ["2月第1周", "2月第2周", ..., "3月第5周"];
myChart.setOption(option);

• option 是一个配置对象，用于设置图表的数据和样式。
• series[0].data 是图表的数值数据（如柱状图的高度）。
• xAxis.data 是图表的横轴标签（如时间周期）。
• myChart.setOption(option) 将这些配置应用到图表中，初始显示的是“周”维度的数据。

2. 定义变量和函数

let xMonthSeries;
let yMonthSeries;

function sum(arr) {
  return arr.reduce((total, value) => total += value, 0);
}

• xMonthSeries 和 yMonthSeries 是两个变量，分别用于存储“月”维度的横轴标签和纵轴数据。
• sum 函数用于计算数组中所有元素的总和（例如 [1, 2, 3] 的总和是 6）。

3. 获取数据并处理

axios.get('./data.json').then(({ data: { data } }) => {
  console.log(data);
  xMonthSeries = Object.keys(data);
  yMonthSeries = [
    sum(Object.values(data)[0]),
    sum(Object.values(data)[1])
  ];
});

• 使用 axios.get 从文件 data.json 中获取数据。
• 假设 data.json 的内容如下：

  {
    "2月": [180, 274, 253, 324],
    "3月": [277, 240, 332, 378, 101]
  }

• Object.keys(data) 提取键（即月份），结果为 ["2月", "3月"]，赋值给 xMonthSeries。
• Object.values(data) 提取值（即每个月对应的数组），然后用 sum 函数计算每个数组的总和，结果为 [1031, 1328]，赋值给 yMonthSeries。

4. 监听 Tabs 点击事件

let tabs = document.getElementsByClassName('tab');
for (let index = 0; index < tabs.length; index++) {
  tabs[index].addEventListener('click', (e) => {
    console.log(e.target.textContent);
    if (e.target.textContent === '月') {
      option.series[0].data = yMonthSeries;
      option.xAxis.data = xMonthSeries;
      myChart.setOption(option);
    } else if (e.target.textContent === '周') {
      option.series[0].data = [180, 274, 253, 324, 277, 240, 332, 378, 101];
      option.xAxis.data = ["2月第1周", "2月第2周", ..., "3月第5周"];
      myChart.setOption(option);
    }
  });
}

• tabs 是页面上所有的 Tab 按钮（假设有两个按钮：一个是“月”，另一个是“周”）。
• 给每个 Tab 按钮添加点击事件监听器，当用户点击时触发回调函数。
• 回调函数根据点击的按钮内容（e.target.textContent）判断用户选择了“月”还是“周”：
  • 如果选择“月”，则更新图表数据为“月”维度的数据（xMonthSeries 和 yMonthSeries）。
  • 如果选择“周”，则更新图表数据为“周”维度的原始数据。
• 最后调用 myChart.setOption(option) 更新图表。

5. 总结

这段代码的核心功能是通过切换“周”和“月”的视图来动态更新图表数据：

• 初始显示“周”维度的数据。
• 当用户点击“月”按钮时，显示每个月的总和。
• 当用户点击“周”按钮时，恢复显示每周的原始数据。

  ---

  版本一文章的链接：蓝桥杯 web 学海无涯（echarts、axios）