蓝桥杯 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)

相关推荐
编程猪猪侠29 分钟前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞33 分钟前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到111 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
风清云淡_A1 小时前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js
@大迁世界1 小时前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架