当前位置：首页 > news >正文

第十五届蓝桥杯国赛题代码量统计-困难解题思路

news 来源：原创 2025/5/18 2:00:18

欢迎来到我的博客希望我的文章能给您带来帮助！
Github
个人博客网站

文章目录

1.解题思路
- 目标1
- 目标2
- 目标3
2.知识点

原题链接链接

1.解题思路

目标1

请在 js/index.js 文件中补全 TODO 部分代码，实现以下目标：
在 fetchCodeData 函数中获取数据的代码，完成数据请求（请求地址必须使用提供的常量 MockUrl）并将请求获取到的数据中的数组作为函数的返回值。在 lib 目录下已经提供了 axios，考生可自行选择是否使用。
解题：

async function fetchCodeData() {
// TODO：待补充代码 目标 1
	const res = await axios.get(MockUrl);
	return res.data
}

题目提供了axios 直接调用axios发送网络请求获取数据再根据题目要求将数据返回即可。

目标2

在 window.onload 中补充数据转换的代码，将原始数据 rawData 以 / 作为分隔符的文件夹层级结构转化为用于 echarts 渲染的树状数据结构，将最终转化完成的数据赋值给 processedData 。转换过程参考下文 “原始数据说明” 一节。
解题：

window.onload = async () => {
    const dom = document.querySelector("#canvasContainer");
    const chart = echarts.init(dom);
 
    // 获取原始数据
    const rawData = await fetchCodeData();

    // 处理后的数据
    const processedData = [];
    // TODO：待补充代码 目标 2 
    rawData.forEach(data=>{
        const name = data[0]
        const value = data[1]
        let currentData = processedData
        for(let s of name.split('/')){
            let existingNode = currentData.find(node => node.name === s);
            if(!existingNode){
                existingNode = {
                    name:s,
                    value,
                    children:[]
                }
                currentData.push(existingNode)
            }
            currentData = existingNode.children
        }
    })
    console.log(processedData);
    // TODO：END
    // 绘制图表
    setChart(chart, processedData)
};

代码解释：
假如processedData = ["components/base/path",6412]。
则第一次循环name的值是components/base/path
value的值是6412
currentData每次循环时都会指向根（processedData)

for(let s of name.split('/')){
	// s = components
    let existingNode = currentData.find(node => node.name === s);
    // 第一次循环 数组为空 existingNode找不到值 = undefined
        if(!existingNode){
        // 将当前数据添加到数组中
            existingNode = {
                name:s,
                value:s === name.split('/').pop() ? value : null, // 只有最后一个数据才会赋value值
                children:[]
            }
            currentData.push(existingNode)
        }
        // 并将当前的数据对象指向上面新增后的
        currentData = existingNode.children
    }
    /**
     此时数组 processedData = [
	     name:"components",
	     value:"6412",
	     children:[]
     ]
     第二次循环后数组将变成 [
	     name:"components",
	     value:"null",
	     children:[
		     name:'base',
		     value:null,
		     children:[]
	     ]
     ]
     第三次循环后数组将变成 [
	     name:"components",
	     value:"null",
	     children:[
		     name:'base',
		     value:null,
		     children:[
			     name:'path',
			     value:6412
		     ]
	     ]
     ]
     最后退出了循环 完成了当前数据（components/base/path）的数据添加
    **/

目标3

通过 formatter 设置矩形树图中每个矩形的标签，其值格式为: {路径文件夹名称}\n{代码量}行，并隐藏图中面积小于 6400 (单位：平方像素) 的矩形。

值	类型	说明
type	String	图表类型, `本题固定为 treemap` ,表示矩形树图。
data	Array	树状结构的数组，见 “原始数据说明”。
visibleMin	Number	如果某个节点的矩形的面积，小于这个数值（单位：px平方），这个节点就不显示。
label	Object	本题中只关注 `label` 的 `formatter` 属性，`formatter` 为标签内容格式器，它可以是一个字符串模板，也可以是一个回调函数；支持用 `\n` 换行。本题目需要使用的字符串模板变量有： `{b}`：数据名，`{c}`：数据值。
解题：

series: [
            {
                name: "Code Counter",
                type: "treemap",
                data,
                itemStyle: {
                    gapWidth: 5,
                },
                visibleMin:6400,
                // TODO：待补充代码 目标 3
                label: {
                     // TODO：待补充代码 目标 3 
                     formatter:"{b}\n{c}行"
                 },
                levels: [
                    {
                        color: ["#FCB944", "#80B7C2", "#C48483", "#F0663B", "#75D180"],
                    },
                    {
                        colorSaturation: [0.35, 0.5],
                    },
                ],
            },
        ],