00:00
哈喽,各位小伙伴们大家好,那接下来咱们呢,去完成首页当中第四个卡当中这个图表。那咱们呢,去看下这个图表该怎么制作啊,那首先说啊,它是一个什么呢?它呢是一个柱状图。只不过不是竖着排列的,是横着排列的。对吧,以及呢,在柱状图的前面这里啊,它呢有一个竖杠,那咱们看一下子这一块的业务怎么去完成。那当然回到咱们的项目当中,那找到这儿,那找到咱们的第四个card,对不?那咱们找一下位置是不是就这里,当然那这里呢,还是需要有一个座位插槽template。对吧,那么名字啊,咱们的叫做chart,那当然咱们先写上一个文字,先给它占上位对吧,当然名字呢,Lo叫做char子。那咱们这里呢,先给他来一个,比如说叫做柱状图,哎,保存一下,回手刷新,看一下咱的文字有没有占上位。
01:07
OK吧,那接下来呢,那咱们呢,在这里呢,还得写个组件给你传过去。那所以说啊,咱们呢,再新建一个文件夹,比如说啊,咱们就叫做进度进度条吧,Pros char。对吧,那当然啊,那这里呢,这个组件呢,就把咱们的这个柱状图啊,老师呢,就直接拿过来了,直接用了好吧,那所以说回到这里呢,也是一样,你也是需要引入相应的组件,那咱们引入一下import。Pros对吧?From咱们的点杠应该叫做process char,那当然这里呢也需要注册。对吧,那这样呢,咱们呢,给他的这个插槽啊,传了这样的一个组件,就是这样一个柱状图,那咱写一下子pro啊pros char charts。
02:08
对吧,当然闭合,那么咱们呢,先刷新,先看一下子是不是也有相应的柱状图对吧?那所以说啊,在咱们的这个组件内啊,咱们呢去调调数据,那这里老师呢,把没用的先给它关掉啊。那首先说第一个提示的这个咱们就不要了,那以及数据呢,不需要这么多,只需要有一个。对吧,你看他这块展示的是78%,那咱们就给他来个数字78。对吧,保存一下刷新去看一下子。当然目前咱们的这个柱状图啊,是竖着排列的,那怎么样让它横着排列的,很简单,就是啊让它的均分别在X轴均分在哪呢?在Y轴上给它均分。对吧,那么咱们呢,刷机保存一下,看一下那是不是横着排列。
03:00
对吧,当然它有点怎么有点大了,因为你比如说总共是78%,那你应该只占它的一百分之七十八,你不应该占满整个整个这个容器的宽度。对吧,那这个呢,咱们呢,可以设置一下子X轴的最大值和最小值,最小值与最大值的设置。对吧,比如说呢,最小值是零,哎,最大值呢,咱给他来个100,那咱们这回看一下子,它是不是占满整个容器了,那应该不是。对吧,那以及咱们的这个柱状图啊,它这个宽度有点宽啊,因为它有点粗嘛,虽然咱让它变细一些。那咱们呢,还是得找一下咱们相应的这个手册,找咱们的系列,找咱们的这个柱状图。对吧,它这里呢,有一个属性叫做八外。找一下这儿。对吧,这个呢,是柱条的宽度啊,可以设置的对吧,那所以说咱们呢,去设置一下子这个柱状图的宽度,柱状图的啊,这个宽度的设置。
04:09
叫做棒。咱给它来个十像素,那看一下子它的这个宽度是不是应该变小了,对吧,那咱们刷新看一下,OK是没问题的。对吧,那以及这个线条的颜色啊,咱们呢,也可以去调一调,其实调color是可以的,对吧,你看咱可以调一下color,比如说color来个什么色呢?来一个yellow吧,哎,Yellow green吧。对吧,那咱们的刷新去看一下这个条的颜色。对吧,哎,这是没问题的,那以及咱们再看一下子,你看它呢,是有背景颜色的,你看嘛,底下有一个这个应该说上像这个灰色的,那咱们也可以去调。找谁呢?找这个柱状图当中啊,有个叫做background style。对吧,这玩意儿呢,可以设置背景的颜色,但是人家说的很准,很明确,每一个柱条的背景样式需要将受background为true才有效,那所以说啊,咱们呢,给它添加上吧,这个咱给他来一个就是这个呃,背景颜色。
05:19
背景颜色的设置,那当然先把它先改成处。那这样咱们的背景颜色呢,设置起来才会生效对吧,它这里面不有个color嘛,柱状图的这个颜色对吧,那这个咱可以给它来一个啊,这个咱给他带走,哎,走指他。那这个呢,咱们呢,给它格式化一下,稍微好看一些啊,那这个呢,应该是它的color color呢,老师呢,给它来个井号一一吧。那咱们的刷新去看一下子,有没有相应的这样的一个小效果啊。对吧,这是有的。但是呢,要注意一件事,这个柱状图啊,在右侧支持有个竖杠,那这玩意儿怎么做呢?其实利用的是这个柱状图当中的这个label去做的,对吧?Label是什么?是图形上的文本标签。
06:10
对吧,那咱们都可以看一下的,它呢有一个label的属性,要不要展示,它默认是false,所以咱给他展示出来,您可以看一下。对吧,哎,文本设置label。咱们呢,让文本呢,给它显示出来就是瘦,为什么呀,为触,那咱们先看一下效果,有什么样的一个效果。对吧,你会看见一个文字居中对不?当然咱要的不是文字,咱要的是一个竖线,你就说这个文本标签啊,你可以设置它的这个文字内容叫format。对吧,标签内容器啊,标签内容格式器form,它支持呢字符串,所以说咱们呢,可以把这个文字啊,给它换成一个竖杠。对不,那这咱可以给他来一个就这。对吧,叫form,咱给它来一个竖杠,那这样呢,它显示的就不是这个呃文字了,而是一个竖杠,对吧,但是它的位置是需要调的,它应该是在右侧,那这个呢,它呢也有一个label,也有一个相应的一个属性,咱们看一下啊,应该叫做position在这儿。
07:20
对吧,默认是在inside是在内部的,它也支持右侧,对吧,所以说去调试咱们的这个文本的一个位置叫做position POS啊posion为什么呢,为right。那这样咱们的这样的一个效果不就出来了吗?咱们呢,可以刷新去看一下对吧?当然这个颜色啊,你可以调成别的颜色,你喜欢什么颜色都可以对吧?那所以说咱们完成了这样的一个进度条啊,说白了就是柱状图所做的这样的一个效果,对吧?当然这里面呢,咱们做一下笔记,那这个呢,是设置呃设置呃,设置背景的一个颜色。
08:04
那这个呢,是文本标签。对吧,哎,那这个呢是呃,文本标签的位置的调试,文本标签位置的调试,那以及呢,这个呢,是改变文本内容。改变文本的内容对吧,因为它默认的是那个数字对吧,那所以说咱们完成的第四个car当中,这个图表的业务。
我来说两句