3.4 仪表盘构建原创

大家好，欢迎大家来到腾讯云开发者社区，腾讯云V团队共同打造的V低代码平台，一人构建企业级应用实战训练营第三章第4节，我将为大家讲解仪表盘的打建，我是腾讯云微R团队成品经理陈尚平。啊，我开始给大家讲解一下我们的仪表盘，仪表盘的一个搭建，这里我们可能有一个空旷的页面，所以我们先把它制空，然后我们现在在插槽里边我们添加。我们的图表组件，这里我们提供的统计卡片还有几种折线图图表的方式，首先我们可以先用卡片去做一些数据展示，比如说这里我希望展示的是客户。短数。那么我就可以选择我们的客户信息表，然后做统计，然后这里我们需要做什么数据筛选的，首先我们是需要它不是拉黑的，所以我把收和拉黑改为false，这时候他就可以统计出来所有总数，但是数据查出来之后，他要怎么去，他要根据什么去做统计。

这个我们可以根据所有人去做个基数。这个时候他就可以回来所有数据。那么一样的，如果说我需要。如果说我需要统计一下。公海客户数。那么我我们就把这个查询条件多加一条，也就是我们的所属员工。等于空。它都成了公海客户数，那么这个。黑名单。

客户总数，我们相当于就把这个产品条件再做一下调整，改为初即可，那么现在这个数据出来了，我们怎么把它的样式再做调整一下呢？我们这里可以去添加一个网格布局。然后把每一个统计卡片。拖到对应的猎手。然后每个列我们选择。三六。如果说在移动端，我们希望它就直接展示满，如果在PC端，我希望它展示的是1/3。好的，这时候我们看一下样式，它已经按1/3的比例使用了，但是发现它没有完全拉伸开，就我们可以手动给他一个样式，让它的宽。

变成百分百。这个时候它的宽就是正常的了，就是说我们觉得它的边框还有问题，所以我们还是可以再继续做一些调整，比如说我们给它加一个普通容器。然后把网格布局放在普通容器里边，我们给普通容器加上一个内边距16。我们把4边多加上。这个时候它就离旁边是有一些编制，就看起来会自然一些，那么卡片我们处理完了，我们还可以加一些什么，比如说我现在可以加一个折线图。我可以加个折线图，这个折线图目的是什么？是为了统计我们的客户创建每天创建数，所以这个标题我们可以先不用展示了。

我们选择它的数据源，数据模型，然后选择客户信息表。然后数据筛选的话，一样的，我们只看新增的，所以我们也把拉黑人给去掉。然后我们选择X轴，X轴是创建时间，因为它是时间，所以这里会直接提供这个统计维度，我们选择日，然后Y轴的话，我们一样的还是按所有人来做一个计数。可以看到它这里展示的就是今天1。对，所以这个图表相当于就可以了，那如果说我们把这个图表的样式再优化一下，我们可以添加个图卡片。然后把这个。折线图放到卡片内容中。把默认卡片的样式调整一下。然后我们把这个label改成。客户新增取舍。

这样就可以了，然后这个图标一样的，我们给它加上一个外边距。可以看下效果。它现在的图表形式就是这样，我们可以在下边儿再继续加一些额外的功能，额外的图表都可以。那么在这里你就可以把这个数据给他展示出来，我们现在可以把数据做一下编辑，让他看一下是否能够完全生效，比如说我把这两个移出。好的，那这里它就会有3条数据，这3条数据，那么在我们的。首页中就会发现客户总数变成了3。然后黑名单总数比较2，那为什么12月5号也有两条数据呢？因为这个数据是昨天建的，我昨天建立的，所以他就会把所有数据都展示出来，刚才是因为昨天加加的那两条数据在黑名单，所以他就没有展示出来，所以我们可以通过这种方式去做处理。

那如果说我现在。要把数据放在公海池里去呢，比如说我现在新加一个数据。然后所属员工我没有选。我没有选所属员工，然后我可以把这个客户阶段其他的补充上。提交。啊，这里我们需要把那个条件加上。好的，这里它就不会展示刚才那条数据了，而在公海池里边，它会把所属员工的空数据给展示出来。而在这里，它也是正常展示的客户总数，因为这个客户总数我们是包含了公函数的。

所以这里相当于就是这3条加上这1条，而黑名单的这2条对应的就是黑名单的客户总数。这就是我们首页的一个搭建，如果说我们需要做一些其他图表的搭建，我们也可以来用柱状图、饼图，或者说用我们的更多图表。啊，这节课。我主要是给大家讲解了一下我们的仪表盘的一个搭建和使用。下节课我们将。进行我们的用户权限的管理和登录，还有发布。