优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。
优维低代码实践连载第⑩期
《统计视图》
▽
Visual Builder内部提供了很多图标类型的构件，方便在用户做一些数据统计，同样在大屏项目中也可以得到很广泛地使用，下面我们简单地修改我们的编排，做一个建议的数据统计图表出来吧～
一、新增图表构件
定位到任务详情路由页面的 general-card 构件，将其子构件都删除，并添加我们新的图表构件： chart-v2.bar-chart，效果如下图：
下面我们收到一个需求，在这个图标中，我们要现实任务卡片的状态还在处理中，或者未处理的情况，并进行展示，这里我们的修改如下：
二、对接后台数据
数据名称: taskList
类型: Provider
Provider: providers-of-cmdb.instance-api-post-search-v3
Args:
- TASK_FOR_VB_LESSON
- fields:
- assignee
- state
page: 1
pageSize: 3000三、图表编排修改
属性面板-属性:
data: <% FN.computedTaskList(CTX.taskList) %>
height: 450
legends: false
xField: assignee
yField: unFinishTask四、新增 computedTaskList 微应用函数
function 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;
}在处理完这些后，我们的图标就可以预期工作啦～看下预览图：
五、页面样式优化，加入图片
我们模拟一个需求，这个页面太过单调了，我们想增加点图片让内容丰富一些，那么我们要怎么做呢？
首先在左侧侧边栏菜单选中图片tab，进入页面，点击右上角的 upload 按钮，上传图片，最后点击build & push，我们即可以对我们上传的图片进行使用了～详细请查看 《图片》章节
然后回到我们的任务详情页面，修改编排，具体如下图：
其中img的src，每个项目，每张图片都将不一样，请各位结合自己的项目使用相应的url。
