蓝桥杯 web 学海无涯(axios、ecahrts)版本二

答案:

javascript 复制代码
// 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].dataoption.xAxis.data
    • 这是 ECharts 图表的核心数据部分。
    • series[0].data 表示 y 轴数据(如每周的学习时长)。
    • xAxis.data 表示 x 轴数据(如每周的时间段)。
    • 在这里,我们设置了初始的周视图数据。
2. 定义变量
  • xMonthSeriesyMonthSeries
    • 这两个变量用于存储月视图的数据。
    • 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);
}
  • xMonthSeriesyMonthSeries 是两个变量,分别用于存储"月"维度的横轴标签和纵轴数据。
  • 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)判断用户选择了"月"还是"周":
    • 如果选择"月",则更新图表数据为"月"维度的数据(xMonthSeriesyMonthSeries)。
    • 如果选择"周",则更新图表数据为"周"维度的原始数据。
  • 最后调用 myChart.setOption(option) 更新图表。

5. 总结

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

  • 初始显示"周"维度的数据。

  • 当用户点击"月"按钮时,显示每个月的总和。

  • 当用户点击"周"按钮时,恢复显示每周的原始数据。


    版本一文章的链接:蓝桥杯 web 学海无涯(echarts、axios)

相关推荐
腾讯TNTWeb前端团队32 分钟前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom5 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom6 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试