导语 优维低代码实践连载第⑩期 《统计视图》 ▽ Visual Builder内部提供了很多图标类型的构件，方便在用户做一些数据统计，同样在大屏项目中也可以得到很广泛地使用，下面我们简单地修改我们的编排，做一个建议的数据统计图表出来吧～ 一、新增图表构件 定位到任务详情路由页面的 general-card 构件，将其子构件都删除，并添加我们新的图表构件： chart-v2.bar-chart，效果如下图： 二、对接后台数据 三、图表编排修改 四、新增 computedTaskList 微应用函数 在处理完这些后，我们的图标就可以预期工作啦～看下预览图： 五、页面样式优化，加入图片 我们模拟一个需求，这个页面太过单调了，我们想增加点图片让内容丰富一些，那么我们要怎么做呢？ 首先在左侧侧边栏菜单选中图片tab，进入页面，点击右上角的 upload 按钮，上传图片，最后点击build & push，我们即可以对我们上传的图片进行使用了～详细请查看 《图片》章节 然后回到我们的任务详情页面，修改编排，具体如下图： 其中img的src，每个项目，每张图片都将不一样，请各位结合自己的项目使用相应的url。
下面我们收到一个需求，在这个图标中，我们要现实任务卡片的状态还在处理中，或者未处理的情况，并进行展示，这里我们的修改如下：数据名称: taskList类型: ProviderProvider: providers-of-cmdb.instance-api-post-search-v3Args: - TASK_FOR_VB_LESSON - fields: - assignee - state page: 1 pageSize: 3000属性面板-属性: data: <% FN.computedTaskList(CTX.taskList) %> height: 450 legends: false xField: assignee yField: unFinishTaskfunction computedTaskList({ list }: Params): ResultItem[] { const obj = {}; list.forEach((item) => { if (item.state === "研发完成") return; if (obj[item.assignee]) { obj[item.assignee]++; } else { obj[item.assignee] = 1; } });
const arr: ResultItem[] = [];
Object.entries(obj).forEach(([key, value]) => { arr.push({ assignee: key, unFinishTask: value as number, }); });
return arr;}
interface Params { list: Array<any>;}
interface ResultItem { assignee: string; unFinishTask: number;}
