【Html.js——ECharts 图表】粒粒皆辛苦（蓝桥杯真题-2324）【合集】

Rossy Yan

发布于 2025-02-02 22:18:25

5300

代码可运行

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

运行总次数：0

代码可运行

准备步骤

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

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

其中：

index.html 是主页面。
js/echarts.min.js 是 ECharts 文件。
js/axios.min.js 是 axios 文件。
data.json 是对应年份的粮食产量数据，单位为万吨。

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

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

目标效果

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

完成数据请求（数据来源 ./data.json）。
data.json 中的数据中英文对照如下：

英文名称中文名称wheat小麦soybean大豆potato马铃薯corn玉米 3. 在页面的折线图和饼形图中正确显示粮食产量数据。其中折线图为五年数据，饼图只显示 2022 年数据。完成后，最终页面效果如下：

要求规定

请勿修改已经提供的代码，以免造成判题无法通过。
请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分

判分标准

本题完全实现题目目标得满分，否则得 0 分。

通关代码✔️

<!DOCTYPE html>
<html style="height: 100%">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>粒粒皆辛苦</title>
    <script type="text/javascript" src="./js/echarts.min.js"></script>
    <script src="./js/axios.min.js"></script>
  </head>

  <body style="height: 100%; margin: 0; overflow: hidden">
    <div id="container" style="height: 80%; width: 80%; margin: 5% auto"></div>
    <script>
      var dom = document.getElementById("container");
      var option;
      var myChart = echarts.init(dom, null, {
        renderer: "canvas",
        useDirtyRect: false,
      });
      let initCharts = () => {
        option = {
          title: {
            text: "近五年 x 市粮食总产量分布以及 2022 年粮食产量比例",
            subtext: "单位（万吨）",
          },
          dataset: {
            //source -> 图表显示所需的数据格式（饼形图和折线图共用），请勿手动修改此行
            source: [
              ["全部", "2017", "2018", "2019", "2020", "2021", "2022"],
              ["小麦", 1, 1, 1, 1, 1, 1],
              ["大豆", 9, 9, 9, 9, 9, 9],
              ["马铃薯", 13, 13, 13, 13, 13, 13],
              ["玉米", 23, 23, 23, 23, 23, 23],
            ],
          },
          xAxis: { type: "category" },
          yAxis: { gridIndex: 0 },
          grid: { top: "55%" },
          series: [
            {
              type: "line",
              seriesLayoutBy: "row",
            },
            {
              type: "line",
              seriesLayoutBy: "row",
            },
            {
              type: "line",
              seriesLayoutBy: "row",
            },
            {
              type: "line",
              seriesLayoutBy: "row",
            },
            {
              type: "pie",
              id: "pie",
              radius: "30%",
              center: ["50%", "25%"],
              label: {
                // 2022 数据的百分比
                formatter: "{b} {@2022} ({d}%)",
              },
              encode: {
                itemName: "全部",
                value: "2022",
                tooltip: "2022",
              },
            },
          ],
        };
        if (option && typeof option === "object") {
          // myChart.setOption -> 设置 echarts 数据的方法
          myChart.setOption(option);
        }
        window.addEventListener("resize", myChart.resize);
      };
      initCharts();

      // TODO: 待补充代码
      axios.get('./data.json').then(res=>{
        let data = res.data.data;
        let source=[
              ["全部", "2017", "2018", "2019", "2020", "2021", "2022"],
              ["小麦"],
              ["大豆"],
              ["马铃薯"],
              ["玉米"],
            ]
        for(let item in data){
          source[1].push(data[item].wheat);
          source[2].push(data[item].soybean);
          source[3].push(data[item].potato);
          source[4].push(data[item].corn);
        }
        option.dataset.source= source;
        myChart.setOption(option);
      })
    </script>
  </body>
</html>

代码解析📑

一、Html 部分

<!DOCTYPE html>
<html style="height: 100%">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>粒粒皆辛苦</title>
    <script type="text/javascript" src="./js/echarts.min.js"></script>
    <script src="./js/axios.min.js"></script>
  </head>

  <body style="height: 100%; margin: 0; overflow: hidden">
    <div id="container" style="height: 80%; width: 80%; margin: 5% auto"></div>
  </body>
</html>

文档声明与根元素 (<!DOCTYPE html> 到 <html style="height: 100%">)
- <!DOCTYPE html>：声明文档类型为 HTML5。
- <html style="height: 100%">：设置 HTML 根元素的高度为 100%，确保页面能够占满整个浏览器窗口高度。
头部信息 (<head> 到 </head>)
- <meta charset="utf-8" />：设置字符编码为 UTF - 8，确保页面能够正确显示各种字符。
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />：确保在 Internet Explorer 中以最新的渲染模式显示页面。
- <title>粒粒皆辛苦</title>：设置页面标题，会显示在浏览器的标签栏上。
- <script type="text/javascript" src="./js/echarts.min.js"></script>：引入 ECharts 库，用于绘制图表。
- <script src="./js/axios.min.js"></script>：引入 Axios 库，用于发起 HTTP 请求，从服务器获取数据。
主体内容 (<body> 到 </body>)
- <body style="height: 100%; margin: 0; overflow: hidden">：设置 body 元素的高度为 100%，去除默认的外边距，并且隐藏溢出的内容。
- <div id="container" style="height: 80%; width: 80%; margin: 5% auto"></div>：创建一个具有 id 为 container 的 div 元素，用于容纳 ECharts 图表。设置其高度为父元素的 80%，宽度为 80%，并且水平居中显示。

二、JavaScript 部分

<script>
  var dom = document.getElementById("container");
  var option;
  var myChart = echarts.init(dom, null, {
    renderer: "canvas",
    useDirtyRect: false,
  });

  let initCharts = () => {
    option = {
      title: {
        text: "近五年 x 市粮食总产量分布以及 2022 年粮食产量比例",
        subtext: "单位（万吨）",
      },
      dataset: {
        source: [
          ["全部", "2017", "2018", "2019", "2020", "2021", "2022"],
          ["小麦", 1, 1, 1, 1, 1, 1],
          ["大豆", 9, 9, 9, 9, 9, 9],
          ["马铃薯", 13, 13, 13, 13, 13, 13],
          ["玉米", 23, 23, 23, 23, 23, 23],
        ],
      },
      xAxis: { type: "category" },
      yAxis: { gridIndex: 0 },
      grid: { top: "55%" },
      series: [
        {
          type: "line",
          seriesLayoutBy: "row",
        },
        {
          type: "line",
          seriesLayoutBy: "row",
        },
        {
          type: "line",
          seriesLayoutBy: "row",
        },
        {
          type: "line",
          seriesLayoutBy: "row",
        },
        {
          type: "pie",
          id: "pie",
          radius: "30%",
          center: ["50%", "25%"],
          label: {
            formatter: "{b} {@2022} ({d}%)",
          },
          encode: {
            itemName: "全部",
            value: "2022",
            tooltip: "2022",
          },
        },
      ],
    };
    if (option && typeof option === "object") {
      myChart.setOption(option);
    }
    window.addEventListener("resize", myChart.resize);
  };

  initCharts();

  axios.get('./data.json').then(res => {
    let data = res.data.data;
    let source = [
      ["全部", "2017", "2018", "2019", "2020", "2021", "2022"],
      ["小麦"],
      ["大豆"],
      ["马铃薯"],
      ["玉米"],
    ];
    for (let item in data) {
      source[1].push(data[item].wheat);
      source[2].push(data[item].soybean);
      source[3].push(data[item].potato);
      source[4].push(data[item].corn);
    }
    option.dataset.source = source;
    myChart.setOption(option);
  });
</script>

初始化 ECharts 实例
- var dom = document.getElementById("container");：获取 id 为 container 的 div 元素，作为 ECharts 图表的容器。
- var option;：声明一个变量 option，用于存储 ECharts 图表的配置项。
- var myChart = echarts.init(dom, null, { renderer: "canvas", useDirtyRect: false });：使用 echarts.init 方法初始化一个 ECharts 实例，指定渲染器为 canvas，并且不使用脏矩形优化。
initCharts 函数
- 定义一个箭头函数 initCharts，用于初始化图表的配置项。
- option 对象：
  - title：设置图表的标题和副标题。
  - dataset：设置图表所需的数据，包含年份和不同粮食的产量。
  - xAxis：设置 x 轴为分类轴。
  - yAxis：设置 y 轴，指定网格索引为 0。
  - grid：设置网格的位置，顶部距离为 55%。
  - series：设置图表的系列，包含 4 个折线图和 1 个饼图。
- if (option && typeof option === "object") { myChart.setOption(option); }：如果 option 是一个有效的对象，则使用 myChart.setOption 方法将配置项应用到 ECharts 实例上。
- window.addEventListener("resize", myChart.resize);：监听窗口大小变化事件，当窗口大小改变时，自动调整图表的大小。
调用 initCharts 函数
- initCharts();：调用 initCharts 函数，初始化并绘制图表。
从服务器获取数据并更新图表
- axios.get('./data.json').then(res => { ... })：使用 Axios 库发起一个 GET 请求，从 data.json 文件中获取数据。
- let data = res.data.data;：从响应数据中提取实际的数据。
- 创建一个新的 source 数组，用于存储更新后的数据。
- 使用 for...in 循环遍历 data 对象，将不同粮食的产量添加到 source 数组中。
- option.dataset.source = source;：更新 option 对象中的 dataset.source 属性，使用新的数据。
- myChart.setOption(option);：再次调用 myChart.setOption 方法，将更新后的配置项应用到 ECharts 实例上，从而更新图表。

三、工作流程 ▶️

页面加载
- 浏览器解析 HTML 文档，加载 ECharts 和 Axios 库。
- 执行 JavaScript 代码，获取 id 为 container 的 div 元素，并初始化 ECharts 实例。
- 调用 initCharts 函数，设置图表的初始配置项，使用默认的示例数据绘制图表。同时监听窗口大小变化事件，以便在窗口大小改变时自动调整图表大小。
数据获取与更新
- 使用 Axios 发起一个 GET 请求，从 data.json 文件中获取实际的粮食产量数据。
- 处理响应数据，将其转换为 ECharts 所需的格式，并更新 option 对象中的 dataset.source 属性。
- 再次调用 myChart.setOption 方法，将更新后的配置项应用到 ECharts 实例上，从而更新图表显示实际的数据。