<![CDATA[Visualization tool for Memory]]>I write a Memory analyzer. Based on Echarts, Memory visualization tool

0_1619015689937_67c2f638-dc77-45a0-9735-a83c14cbca13-image.png 0_1619016618465_92a692af-96bb-4b56-b5fe-33d781c66452-image.png

]]>http://screeps.com/forum/topic/3168/visualization-tool-for-memoryRSS for NodeFri, 12 Jun 2026 17:14:40 GMTWed, 21 Apr 2021 14:37:42 GMT60<![CDATA[Reply to Visualization tool for Memory on Wed, 21 Apr 2021 14:58:46 GMT]]>I write a Memory analyzer. Based on Echarts, Memory visualization tool

0_1619015689937_67c2f638-dc77-45a0-9735-a83c14cbca13-image.png 0_1619016618465_92a692af-96bb-4b56-b5fe-33d781c66452-image.png

]]>http://screeps.com/forum/post/16354http://screeps.com/forum/post/16354Wed, 21 Apr 2021 14:58:46 GMT<![CDATA[Reply to Visualization tool for Memory on Wed, 21 Apr 2021 14:51:17 GMT]]><html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> Memory: <input type="text" name="fname" id="jsonStr" /> <button type="submit" id="btn">分析</button> 使用方法：控制台运行【JSON.stringify(Memory)】然后复制输出到这里点击分析就可以了 <div id="container" style="height: 100%"></div> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; var option; let json = "{}" myChart.showLoading(); myChart.hideLoading(); let oriData = JSON.parse(json) console.log(oriData) let diskData = [] function getType(obj){ return "" + Object.prototype.toString.call(obj).replace("[object ","")+""; } function getChildrens(data,name,len){ let out = { name: name, value: len, datas:name+":"+data, children: [] } let da = JSON.parse(data); let obj = "[" + Object.prototype.toString.call(da).replace("[object ","")+""; //Object.prototype.toString.call(da) //out.name+=obj; if(typeof(da)=='object'){ for(let k in da){ //if(!da[k])continue; let subJson = JSON.stringify(da[k]); //console.log(k,typeof(subJson),da) let keyLen = obj != "[Array]"? (""+k).length : 0; // 如果是数组不用key keyLen += getType(k) == "Number"?0:2 // 不是数字要加双引号 let namet = obj == "[Array]"? "["+k+"]":k // 数组 [ 0 ] if(da[k]==undefined)out.children.push({name:namet,value:keyLen}) else out.children.push(getChildrens(subJson,namet,keyLen+(subJson?subJson.length:0))) } }else{ out.name+=":"+data } if(out.children.length==0) delete out.children; return out; } diskData = getChildrens(json,"Memoey",json.length).children //console.log(diskData) function colorMappingChange(value) { var levelOption = getLevelOption(value); chart.setOption({ series: [{ levels: levelOption }] }); } var formatUtil = echarts.format; function getLevelOption() { return [ { itemStyle: { borderColor: '#777', borderWidth: 0, gapWidth: 1 }, upperLabel: { show: false } }, { itemStyle: { borderColor: '#555', borderWidth: 5, gapWidth: 1 }, emphasis: { itemStyle: { borderColor: '#ddd' } } }, { colorSaturation: [0.35, 0.5], itemStyle: { borderWidth: 5, gapWidth: 1, borderColorSaturation: 0.7 } } ].concat(([...Array(12).keys()]).map(e=>{ return { colorSaturation: [0.35, 0.5], itemStyle: { borderWidth: 5, gapWidth: 1, borderColorSaturation: 0.75-e*0.05 } } })); } console.log(getLevelOption()) function transform(datas){ if(datas.length>2500/2){ datas=datas.substr(0,2500/2-4)+"..." } out = "" for(let i = 0;i<datas.length;i+=50){ out+='<div class="tooltip-title">' + datas.substr(i,50) + '</div>' } return out; } function update(json){ diskData = getChildrens(""+json,"Memoey",json.length).children myChart.setOption(option = { tooltip: { formatter: function (info) { var value = info.value; var datas = info.data.datas; var treePathInfo = info.treePathInfo; var treePath = []; //if(datas.length>50)datas=datas.substr(0,50)+"..." datas=transform(datas) for (var i = 1; i < treePathInfo.length; i++) { treePath.push(treePathInfo[i].name); } return [ '<div class="tooltip-title">' + (formatUtil.encodeHTML(treePath.join('.')).replace(".[","[").replace(".[","[").replace(".[","[").replace(".[","[")) + '</div>', '<div class="tooltip-title">' + datas + '</div>', 'Memory Usage: ' + formatUtil.addCommas(value) + ' 字符占用', ].join(''); } }, // visualMap: [{ //type: 'continuous',//连续型 //dimension: 2,//对应的数组维度 //show: false,//颜色范围选择的小工具不显示 //color: ['#1710c0', '#0b9df0', '#00fea8', '#00ff0d', '#f5f811', '#f09a09', '#fe0300'].reverse(),//颜色过渡，可自选 //}], series: [ { name: 'Memory', type: 'treemap', visibleMin: 5000, label: { show: true, formatter: '{b}' }, upperLabel: { show: true, height: 30, }, itemStyle: { borderColor: '#fff' }, levels: getLevelOption(), data: diskData } ] }); if (option && typeof option === 'object') { myChart.setOption(option); } } //update(json); document.getElementById('btn').addEventListener('click', function(){ try{ update(document.getElementById('jsonStr').value) }catch(e){ //alert("代码错误,如果不是JSON问题,请联系6g3y") console.log(e) } try{ update(document.getElementById('jsonStr').value) }catch(e){ alert("代码错误,如果不是JSON问题,请联系6g3y") console.log(e) console.log(document.getElementById('jsonStr').value) } }); </script> </body> </html> ]]>http://screeps.com/forum/post/16355http://screeps.com/forum/post/16355Wed, 21 Apr 2021 14:51:17 GMT<![CDATA[Reply to Visualization tool for Memory on Invalid Date]]>Run JSON.stringify(Memory)

And Copy all to HTML , Click Button

I think this tool can check for memory leaks. And analyze which memory can be placed in the global. This will be useful.

I hope I can share it with everyone, and hope everyone can make some suggestions

]]>http://screeps.com/forum/post/16356http://screeps.com/forum/post/16356Invalid Date<![CDATA[Reply to Visualization tool for Memory on Invalid Date]]>very good to use. thanks a lot!

]]>http://screeps.com/forum/post/16590http://screeps.com/forum/post/16590Invalid Date