【Vue.js——ECharts图表】学海无涯（蓝桥杯真题-2280）【合集】

Rossy Yan

发布于 2025-01-27 00:02:23

4600

代码可运行

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

运行总次数：0

代码可运行

背景介绍

小蓝最近一直在云课平台学习，为了更好的督促自己，于是将每天的学习时间都记录了下来，但是如何更加直观的显示学习时间让小蓝很是苦恼。本题需要你使用 ECharts 帮助小蓝实现统计学习时间图表。

准备步骤

本题已经内置了初始代码，打开实验环境，目录结构如下：

├── css
│   └── style.css
├── data.json
├── index.html
└── js
    ├── axios.min.js
    └── echarts.min.js

其中：

index.html 是主页面。
js/echarts.min.js 是 ECharts 文件。
js/axios.min.js 是 axios 文件。
css/style.css 是样式文件。
data.json 是学习时长数据。

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。

接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：

目标效果

请完成 index.html 文件中的 TODO 部分。

完成数据请求（数据来源 ./data.json），data.json 中存放的数据为对应月份中小蓝每天的学习时长，单位为分钟（在项目目录下已经提供了 axios，考生可自行选择是否使用）。
页面加载完成后，默认显示周统计数据。点击周和月，x 轴对应显示正确的周数(格式为:"x 月 x 周")和月份，Y 轴显示小蓝对应周和对应月学习的总时长。

完成后，最终页面效果如下：

要求规定

请勿修改 js/echarts.min.js 文件中的任何内容。
请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等，以免造成无法判题通过。

判分标准

完成数据请求，得 5 分。
初始化数据显示正确，得 5 分。
点击周和月切换后，数据显示正确，得 5 分。

通关代码✔️

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>学海无涯</title>
    <!-- <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script> -->
    <script src="./js/echarts.min.js"></script>
    <link rel="stylesheet" href="./css/style.css" />
    <script src="./js/axios.min.js"></script>
  </head>

  <body style="height: 100%; margin: 0">
    <!-- tab 栏 -->
    <div class="container">
      <div class="tabs">
        <input type="radio" id="week" name="tabs" checked />
        <label class="tab" for="week">周</label>
        <input type="radio" id="month" name="tabs" />
        <label class="tab" for="month">月</label>
        <span class="glider"></span>
      </div>
    </div>
    <div
      id="container"
      style="width: 80%; height: 80%; margin: 40px auto 0"
    ></div>
    <script type="text/javascript">
      var dom = document.getElementById("container");
      var myChart = echarts.init(dom, null, {
        renderer: "canvas",
        useDirtyRect: false,
      });
      var option;
      option = {
        title: {
          text: "学习时长统计图",
        },
        legend: {},
        xAxis: {
          // x 轴数据
          type: "category",
          data: [1, 2, 3, 4, 5, 6, 7],
        },
        yAxis: {
          type: "value",
          name: "分钟",
          axisLabel: {
            formatter: "{value}",
          },
        },
        series: [
          // y 轴数据
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      };
      if (option && typeof option === "object") {
        // 设置图表
        myChart.setOption(option);
      }
      window.addEventListener("resize", myChart.resize);

      // TODO:待补充代码
      let weekx = []
    let weeky = []
    let monthx = []
    let monthy = []
    axios.get('./data.json').then(res => {
      // console.log(res.data.data);
      for (item in res.data.data) {
        // console.log(item);
        monthx.push(item)
        monthy.push(res.data.data[item].reduce((pre, cur) => pre + cur))

        let week = 1
        for (let i = 0; i < res.data.data[item].length; i += 7) {
          weekx.push(`${item}第${week++}周`)
          weeky.push(res.data.data[item].slice(i, i + 7).reduce((pre, cur) => pre + cur))
        }
      }
      option.xAxis.data = weekx
      option.series[0].data = weeky
      myChart.setOption(option)
    })
    let tabs = document.getElementsByName('tabs')
    for(let j=0;j<tabs.length;j++){
      tabs[j].onclick = function(){
        if(tabs[j].checked){
          if(tabs[j].id == 'week'){
            option.xAxis.data = weekx
            option.series[0].data = weeky
            myChart.setOption(option)
          }else{
            option.xAxis.data = monthx
            option.series[0].data = monthy
            myChart.setOption(option)
          }
        }
      }
    }
    </script>
  </body>
</html>

代码解析📑

一、Html 部分

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>学海无涯</title>
    <!-- <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script> -->
    <script src="./js/echarts.min.js"></script>
    <link rel="stylesheet" href="./css/style.css" />
    <script src="./js/axios.min.js"></script>
  </head>

  <body style="height: 100%; margin: 0">
    <!-- tab 栏 -->
    <div class="container">
      <div class="tabs">
        <input type="radio" id="week" name="tabs" checked />
        <label class="tab" for="week">周</label>
        <input type="radio" id="month" name="tabs" />
        <label class="tab" for="month">月</label>
        <span class="glider"></span>
      </div>
    </div>
    <div
      id="container"
      style="width: 80%; height: 80%; margin: 40px auto 0"
    ></div>
  </body>
</html>

文档声明与头部信息
- <!DOCTYPE html>：声明文档类型为 HTML5。
- <html lang="zh-CN" style="height: 100%">：设置文档语言为中文，并且将 HTML 元素的高度设置为 100%。
- <meta charset="UTF-8" />：设置字符编码为 UTF - 8。
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />：确保页面在 IE 浏览器中以最新的渲染模式显示。
- <title>学海无涯</title>：设置页面标题。
- <script src="./js/echarts.min.js"></script>：引入 ECharts 库，用于绘制图表。
- <link rel="stylesheet" href="./css/style.css" />：引入外部 CSS 文件，用于设置页面样式。
- <script src="./js/axios.min.js"></script>：引入 Axios 库，用于发送 HTTP 请求获取数据。
主体部分
- <div class="container"> 和 <div class="tabs">：包含一个选项卡栏，使用两个单选框 <input type="radio"> 实现 “周” 和 “月” 的切换。
- <input type="radio" id="week" name="tabs" checked /> 和 <input type="radio" id="month" name="tabs" />：两个单选框，name 属性相同表示它们是一组，只能选择一个，checked 属性表示默认选中 “周”。
- <label class="tab" for="week">周</label> 和 <label class="tab" for="month">月</label>：用于关联单选框，点击标签可以选中对应的单选框。
- <span class="glider"></span>：可能用于实现选项卡切换时的动画效果。
- <div id="container" style="width: 80%; height: 80%; margin: 40px auto 0"></div>：用于显示 ECharts 图表的容器。

二、JavaScript 部分

var dom = document.getElementById("container");
var myChart = echarts.init(dom, null, {
  renderer: "canvas",
  useDirtyRect: false,
});
var option;
option = {
  title: {
    text: "学习时长统计图",
  },
  legend: {},
  xAxis: {
    // x 轴数据
    type: "category",
    data: [1, 2, 3, 4, 5, 6, 7],
  },
  yAxis: {
    type: "value",
    name: "分钟",
    axisLabel: {
      formatter: "{value}",
    },
  },
  series: [
    // y 轴数据
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: "bar",
    },
  ],
};
if (option && typeof option === "object") {
  // 设置图表
  myChart.setOption(option);
}
window.addEventListener("resize", myChart.resize);

// TODO:待补充代码
let weekx = []
let weeky = []
let monthx = []
let monthy = []
axios.get('./data.json').then(res => {
  // console.log(res.data.data);
  for (item in res.data.data) {
    // console.log(item);
    monthx.push(item)
    monthy.push(res.data.data[item].reduce((pre, cur) => pre + cur))

    let week = 1
    for (let i = 0; i < res.data.data[item].length; i += 7) {
      weekx.push(`${item}第${week++}周`)
      weeky.push(res.data.data[item].slice(i, i + 7).reduce((pre, cur) => pre + cur))
    }
  }
  option.xAxis.data = weekx
  option.series[0].data = weeky
  myChart.setOption(option)
})
let tabs = document.getElementsByName('tabs')
for(let j=0;j<tabs.length;j++){
  tabs[j].onclick = function(){
    if(tabs[j].checked){
      if(tabs[j].id == 'week'){
        option.xAxis.data = weekx
        option.series[0].data = weeky
        myChart.setOption(option)
      }else{
        option.xAxis.data = monthx
        option.series[0].data = monthy
        myChart.setOption(option)
      }
    }
  }
}

初始化 ECharts 图表
- var dom = document.getElementById("container");：获取用于显示图表的 DOM 元素。
- var myChart = echarts.init(dom, null, { renderer: "canvas", useDirtyRect: false });：初始化 ECharts 实例，使用 Canvas 渲染。
- option 对象：定义图表的配置项，包括标题、图例、X 轴、Y 轴和系列数据等。
- myChart.setOption(option);：将配置项应用到图表上。
- window.addEventListener("resize", myChart.resize);：监听窗口大小变化事件，当窗口大小改变时，自动调整图表大小。
获取数据并处理
- let weekx = []、let weeky = []、let monthx = []、let monthy = []：定义用于存储周和月数据的数组。
- axios.get('./data.json').then(res => { ... })：使用 Axios 发送 GET 请求获取 data.json 文件中的数据。
- 在 then 回调函数中，遍历数据，计算每月和每周的学习时长，并将数据存储到相应的数组中。
- 更新 option 对象的 xAxis.data 和 series[0].data，并调用 myChart.setOption(option) 更新图表。
选项卡切换事件处理
- let tabs = document.getElementsByName('tabs')：获取所有 name 属性为 tabs 的单选框。
- 使用 for 循环为每个单选框添加 onclick 事件监听器。
- 当单选框被点击且被选中时，根据单选框的 id 决定显示周数据还是月数据，并更新图表。

三、工作流程 ▶️

页面加载
- 引入 ECharts 和 Axios 库，以及外部 CSS 文件。
- 创建 HTML 结构，包括选项卡栏和图表容器。
初始化图表
- 使用 ECharts 初始化图表实例，并设置初始的配置项。
- 应用初始配置项，显示初始图表。
获取数据
- 使用 Axios 发送 HTTP 请求获取 data.json 文件中的数据。
- 处理数据，计算每月和每周的学习时长，并存储到相应的数组中。
更新图表
- 根据处理后的数据更新图表的配置项。
- 应用更新后的配置项，刷新图表显示。
选项卡切换
- 为选项卡的单选框添加点击事件监听器。
- 当用户切换选项卡时，根据选中的选项更新图表的配置项，显示相应的数据。