少儿免费学编程的网站短视频营销成功的案例

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

原题链接 链接

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以及还有简单的数据结构和算法。