Agent Cloud Resource Observatory

技能资源需求
产品决策看板

基于 500 条 Agent skill 标注记录，观察工作负载主类型、资源维度、三方依赖与真实需求热度之间的关系。应用分类仅使用标注中的「工作负载·主类型 / 次类型」。

样本范围500
当前指标数量
当前主类型全部

图表聚焦工作负载、资源与依赖需求；全部使用 ECharts 官方支持的 series 类型。

筛选后技能0当前条件下的技能记录数
指标总量0数量加总
最高主类型-按当前指标排序
依赖覆盖0%存在三方软件诉求的技能占比

Workload Structure

工作负载结构与资源入口

树图聚合主类型与次类型，资源甜甜圈随「资源维度」切换，帮助判断云主机产品应该先优化哪类技能需求。

主类型 / 次类型树图

面积按当前指标加权

资源分布

圆环展示当前资源维度的需求占比

Resource Demand

资源需求矩阵

堆叠条形图与热力图都使用当前指标口径；中文标签保持横排，避免长标签旋转造成阅读成本。

主类型资源堆叠

每行是一类工作负载内部的资源分布

主类型 × 资源热力图

颜色深浅仅辅助，数值以 tooltip 为准

Dependency Topology

三方依赖与资源耦合

桑基图、依赖图和依赖热力图共同呈现从工作负载到软件生态的迁移路径，适合识别镜像预装、运行时和 API 密钥能力的产品优先级。

主类型 → 依赖类型 → 必要性

桑基链路按当前指标加权

依赖类型关系图

节点大小表示需求热度

主类型 × 依赖类型热力图

观察不同工作负载的生态依赖差异

Market Signal

需求热度与 Top 技能

气泡图定位安装、下载与 Star 的市场信号；表格为纯 HTML，支持本地搜索，不依赖外部表格库。

下载量 / 安装量 / Star 气泡图

气泡大小随当前指标变化，颜色表示主类型

Top 技能清单

按当前指标排序，搜索名称、主类型、次类型或依赖

排名Skill主类型次类型资源摘要依赖下载安装Stars
function setMainFilter(main) { if (!main || !allMains.includes(main)) return; state.main = main; mainSelect.value = main; renderAll(); } function bindChartFilters() { charts.treemap.on('click', params => { const pathNames = (params.treePathInfo || []).map(item => item.name); const main = pathNames.find(name => allMains.includes(name)) || (allMains.includes(params.name) ? params.name : ''); setMainFilter(main); }); charts.stacked.on('click', params => setMainFilter(params.name)); charts.resourceHeatmap.on('click', params => setMainFilter(renderedAxes.resourceMains[params.value && params.value[1]])); charts.depHeatmap.on('click', params => setMainFilter(renderedAxes.dependencyMains[params.value && params.value[1]])); charts.sankey.on('click', params => { const name = params.data && params.data.name; if (typeof name === 'string' && name.startsWith('主类型：')) setMainFilter(name.replace('主类型：', '')); }); charts.graph.on('click', params => { const name = params.data && params.data.name; if (typeof name === 'string' && name.startsWith('主类型：')) setMainFilter(name.replace('主类型：', '')); }); charts.scatter.on('click', params => setMainFilter(params.data && params.data.raw && params.data.raw.main)); } function renderAll() { const rows = filteredRows(); renderKpis(rows); renderTreemap(rows); renderDonut(rows); renderStackedAndHeatmap(rows); renderDependencyCharts(rows); renderScatter(rows); renderTable(rows); } mainSelect.addEventListener('change', event => { state.main = event.target.value; renderAll(); }); document.getElementById('metricToggle').addEventListener('change', event => { state.metric = event.target.value; renderAll(); }); document.getElementById('resourceToggle').addEventListener('change', event => { state.resource = event.target.value; renderAll(); }); document.getElementById('tableSearch').addEventListener('input', event => { state.search = event.target.value; renderTable(filteredRows()); }); document.querySelectorAll('th.sortable').forEach(th => { th.addEventListener('click', () => { const key = th.dataset.sort; if (state.sort.key === key) { state.sort.dir = state.sort.dir === 'asc' ? 'desc' : 'asc'; } else { state.sort.key = key; state.sort.dir = key === 'rank' ? 'asc' : 'desc'; } renderTable(filteredRows()); }); }); document.getElementById('resetBtn').addEventListener('click', () => { state.main='__all__'; state.metric='count'; state.resource='cpu'; state.search=''; state.sort={ key:'metric', dir:'desc' }; mainSelect.value=state.main; document.getElementById('metricToggle').value=state.metric; document.getElementById('resourceToggle').value=state.resource; document.getElementById('tableSearch').value=''; renderAll(); }); window.addEventListener('resize', () => Object.values(charts).forEach(chart => chart.resize())); bindChartFilters(); if (window.echarts) renderAll();