欢迎来到我的博客 希望我的文章能给您带来帮助！
Github
个人博客网站
文章目录
- 1.解题思路
- 目标1
- 目标2
- 目标3
- 2.知识点
原题链接 链接
1.解题思路
目标1
请在 js/index.js 文件中补全 TODO 部分代码，实现以下目标：
在 fetchCodeData 函数中获取数据的代码 ，完成数据请求（请求地址必须使用提供的常量 MockUrl）并将请求获取到的数据中的数组作为函数的返回值。在 lib 目录下已经提供了 axios，考生可自行选择是否使用。
解题：
async function fetchCodeData() {
// TODO：待补充代码 目标 1const 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 = processedDatafor(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 = componentslet existingNode = currentData.find(node => node.name === s);// 第一次循环 数组为空 existingNode找不到值 = undefinedif(!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：待补充代码 目标 3label: {// TODO：待补充代码 目标 3 formatter:"{b}\n{c}行"},levels: [{color: ["#FCB944", "#80B7C2", "#C48483", "#F0663B", "#75D180"],},{colorSaturation: [0.35, 0.5],},],},],
2.知识点
echarts,axios,vue3以及还有简单的数据结构和算法。
