00:00
哈喽,各位小伙伴们大家好,那接下来咱们呢,去完成销售额访问量这里的静态的组件对吧,那么它呢,是分为左右两部分。那么左部分啊,是一个柱状图对吧,一到12月是一个柱状图,而且呢,如果细心的小伙伴应该能看见他是有这种阴影的效果。对吧,那以及呢,右侧这里啊,有一个列表展示着一些数据,当然呢,也有相应的钥匙。那所以说啊,咱们的静态的部分呢,已经差不多了,那所以说啊,接下来呢,咱们的一个一个完成。那咱们呢,先把左面的这个带有阴影的柱状图啊,咱们呢先给它完成一下。但那咱们呢,去搜索一。这个呢,正常说呀,那也是看人家的官网,看人家给你的这些事例当中哪些是咱们需要的。
01:03
对吧,比如说呢,咱们呢,找一下柱状图啊,当然咱们先看第一个是不是咱们想要的,不是因为它默认就是有这个背景颜色的,这不是咱们想要的,那看一下第二个,那第二个呢,是没有这个阴影效果的,那再看下第三个。那这个呢,是咱们所要的效果对吧,那这里面呢,有相应的配置项,Option已经给你准备好了。对吧,那以及呢,也有完整的代码,那当然咱们的只要option就行了。那所以说啊,看这那咱们呢,是分为16和八对吧,其实这块呢,咱还可以再分分,比如说20和四。对吧,那咱们呢,保存一下紫砂星去看一下子。对吧,那咱们呢,就一个一个来,那首先说左侧这里,它们应该是一个柱状图,那所以说啊,咱们呢,给它准备一个容器。
02:03
那咱呢,给它起个名字,Div那类名呢,咱们就叫做charts,以及将来啊,咱们要获取到,那打个ref也叫char。当然啊,咱们呢,先给他补点样式,因为它还没有高度。那所以说咱们在这儿呢,给他来点样式对吧,第2CHARTS。那么它的宽度啊,那就和它的附加一边宽。高度呢,咱们呢,可以给它来一个300像素对吧,那咱们的刷新去审它其实都能看见了,因为它的高度已经变化了。对吧,那么容器准备好了,那就得去写咱们的一叉了,对吧,那你说引入,那这里老师就不再拆分组件了,对吧,在这搞就行了,引入啊引入一。Charles。那就是IMPORT1CHARS from咱们的谁呀,这个ecs。
03:05
对吧,那么当组件挂载完毕之后,Monkey,那咱们呢,就要初始化咱们的E叉实力。初始化,哎,一叉实例。那这个呢,应该就是1CHARS,打点in need initt应该是咱们的z.Dollar res.char对吧?当然啊,咱们呢,要接收1CHARS的实例,那咱们还叫my chars吧,当然你叫什么都行。对吧,那接下来呢,去设置配置数据。那就是my char.set o op set oceans。当然啊,配置对象啊,咱们呢,就直接拿人家的这个就行了,对吧,那咱们呢,给他带走,当然他多了一个,刚刚看见多了一个这个分号,对吧,这里是不需要的。
04:01
那咱们呢,给它格式化一下,稍微呢,去看一下咱们的这里有没有相应的这样的一个效果,那咱们先看哪里出错了,Set options没有S。对吧?Set option单词千万别错了。那咱们呢,格式化一下子,先看一下子有没有相应的这样的一个效果,对吧,那这不就出来了对吧,当然呢,咱们呢,还是得调试数据。那首先说你看一下子。人家是分多少份,分12份,一月到12月,当然咱们的X轴啊也要变一下,就这你不能这么写了。对吧,那咱们搞一下这个呢,是一月。那这个呢,是二月,哎,二月以及三月。四月。哎,四月以及五月。这个呢,数据咱们慢慢调一下,以及六月。
05:03
对吧,以及七月。八月。以及九月。对吧,十月。以及11月。哎,11月以及最后一个月份,12月。对吧,12月当然啊,数据呢,应该也是12个,但是咱们这里呢,是2467个,那咱们呢再补五个对吧,比如说110。啊,这个再来个98。呃,这是多少个了?24689缺仨,呃,再来个167。对吧,再来个123,最后再来一个44,那所以说咱们呢,保存一下的刷新,去看一下咱们的这样的一个效果是不是就出来了,对吧,当然这个颜色呢,咱们呢可以调啊,就是调它的color。
06:01
Color呢,咱们呢,可以来一个比如说哎,Yellow。Green,对吧,当然你喜欢什么颜色都可以调对吧?那所以说咱们左侧的这个柱状图,那不就完事了对吧?当然它这块呢是有呃是有这个标题的对吧,那么那咱们呢,先给他写死叫做销售额趋势,那也就说这里的数据咱们呢,看一下有没有抬头啊,没有没有咱们的先给他补一个叫做tle title。对吧,那咱们呢,给他来一个test,那咱们先写叫做销售额趋势。那咱们呢,刷一个心去看一下的,对吧,这不就有了嘛,那以及啊,还有右侧的这里,那这里的结构呢,咱们把静态呢也给它搭建好对吧,那右侧这里呢,咱们也去搞一下,就这。那首先说啊,他呢在这边呢,有一个叫做门店销售排名啊,排排排什么玩意儿销售额排名,对吧,那咱给这文字带走。
07:04
对吧,当然呢,咱们这块呢,为了突出一些,给他来一个H3H3对吧,那咱给它扔起来,那咱们呢,先调试一下,稍微看一下。对吧,当然啊,它这个好像是有这个瞄眼啊,咱们先瞄眼大小。对吧,哎,差不多但是吧,看一下子啊,看一下右面这里。咱们啊,右边这里应该是呃,没有高度对吧,那右边这里啊,那咱们这样式的,那老师呢,给他套一个行就来个div吧。Div里面呢,咱们呢来一个H3,那这里呢,老师呢,给他来个类名class。Class class,这个咱们就叫做write吧,对吧,那这个老师呢,把文字呢,还是给你拿过来,咱们慢慢去调试一下对吧?呃,我看一下的啊,我感觉他是有拍顶的,是有拍顶撑出来的,这个老师咱确定一下,再看一下。
08:08
他好像是有拍的,所以说咱们这个样式呢,也要调一下的,看一下的。他有没有拍点?对不呃,咱们看它是有拍的对吧,那所以说啊,咱们呢,找到这个给他打个类名吧。这个给他打一个类名吧,Class测试一下子,比如说这个叫做right,老师呢,把他的这个margin啊,我给他清一下子,因为明显它是有那个,呃,那边距的第2RA jt right这个老师呢,给他来个拍顶上下左右呢都给他来个零像素。对吧,那咱们呢,这回呢再刷新。去看一下子啊。对吧,其实也差不多,以及呢,咱们也可以调一下位置啊,这个咱们还是来一个16和八吧,感觉这个20跟四有点儿呃不搭,对吧,还是来个16和八刷新看一下。
09:04
对吧,那这样是差不多的,或者再调到18和六。对吧,那这块老师给他来个18这块呢,给他来一个六,当然这个样式啊,你可以自己去呃,慢慢调一下子,调到你自己喜欢的位置就行了。对吧,12和六再看一下的对吧,那这样是差不多的,呃,以及他这个拍ing其实是可以干掉对吧,咱们试一下的啊,这个老师呢,给他搞一下的点EL点扣,我看一下给他干掉一下子就是点他。点它我试一下。对吧,行老师呢,刷新去看一下的,其实也差不多。对吧,啊也差不多,因为它这里是也是有拍顶对吧,那这边咱就不去掉了,对吧,好了,那之后呢,底下呢,是有一个列表。对不是不是有相应的ul和力,这个老师给他干掉,有相应的U和力几个呢?12345677个,那所以说啊,咱们在这里呢,给它来一个列表,Ul套谁呢?套利几个呢?七个。
10:07
对吧,呃,那咱们呢,得调试一下子样式了,对吧,那首先说ul。其他样式,Ul。月儿呢,老师呢,给他来个list style为now,之后呢,宽度我让他是100%,高度呢,老师呢也给他来一个300像素,跟左边的这个,呃,左边图表是一样高的。对吧,这样是看不见了,真的ul下的这个力,Ul下的这个力老师呢,给他们的高度啊,是来个百分比吧,比如说8%,对吧,每个人8%。对吧,那就说七八五十六了,差不多了,对吧,那接下来呢,咱们呢,先一点点搞这个,咱们搞一下子,它呢是有那个相应的索引值,那咱放个死半,比如说这叫零,还有相应的标题啊,咱们呢,抄一下子这个叫什么呢?叫做肯德基。
11:01
对吧,那咱给他拿过来肯德基。以及呢,还有右侧还有相应的一个数字,那咱随便来个吧,123456对吧,当然这里的样式呢,咱们呢得搞搞了对吧,这里的样式你得搞搞了,嗯,那首先说啊,咱们先看一下子。走,你看一下子这个ul好像是有拍顶冲出来了。对吧,这ul明显有pading了,所以说呢,咱们呢,给ul的pading啊,给它变为0p pading为零。对吧,那咱们呢,保存一下刷新啊去看一下。对吧,哎,那这回是差不多的,那这回呢,咱们得搞搞,那首先说这个零,那咱们呢,得给它加一个类名了。对吧,Class,那这个咱们就叫做r index吧,可以吧,那咱们呢,去写一下它的样式,就是点右侧的这个索引值。那么老师呢?给他来宽度15,小组高度15。
12:02
对吧,15像素以及呢,咱呢给它加一个border radiOS50%。以及呢,给它来一个背景颜色,背景颜色呢,来一个黑色,那以及呢,文字的颜色呢,咱给他来一个白色对吧,以及文字居中center。对吧,那咱们呢,去稍微的去看一下,当然这个大小可能说呃不够对吧,那咱们再调调,那这个老师呢,给他调成25。对吧,这个也给来一个25,以及让它往右侧浮动吧,Float为啥呀,为left对吧,往左侧浮动一下。对吧,哎,这样式的,那其实这个大小有点大了,咱们再调调,那这个老师还是给他来个十五十五,再看一下十五十五。对不刷新看一下,呃,有一丢丢的小,咱们再调到二十二十吧。这个数据自己慢慢去调一下就行了,对吧,哎,只是它。
13:02
行,那也就大概是这个样子,那以及啊,肯德基这里,那咱们的左右呢,给它来点外边距其实已经有了,对吧,只是把右侧的这个呢,给它浮动到右面就行了,对吧?那所以说这个呢,咱们也去搞一下子,也就是说给它也打个类名class这个叫RY6吧。对吧,把它浮动到右面去,那这个咱也搞一下,点r value,那这个呢,给它来一个float为right,让它去右边去,对吧,那这样的大概的一个样式不就出来了吗。对吧,那当然还有剩下的七个,那这七个呢,咱们要搞一下子,那剩下就复制粘贴CTRLC。对吧,CTRLV,但那这个呢,不应该是零了,应该是一。对吧,数据叠数据老师就不调了,对吧,那以及呢,咱们让每一个力之间啊,有点这个上下的这个边距吧,啊找一下就这个marin。
14:02
上下呢,老师给他来个十左右零对吧,也调一下子力之间的这个距离对吧,那之后呢,还有相应的第三个,那这个肯德基和这个数据咱就不换了好吧,那这个呢,咱们再接下来这是第三个,那索引值为三。对吧,那以及还有相应的第四个,那第四个这里呢,老师呢,就呃不给它加类名了。对吧,那这个是四。对吧,那咱们呢,保存一下子刷新去看一下。对吧,哎,那以及呢,还有什么呢,咱们呢,再接着搞搞五啊567对吧,这个再来一个五。这是五,咱们调一下,当然咱们格式化小五,这呢还有相应的六。这个是六,以及最后一个是七。对吧,那老师呢,还是给它隔着化一下,那这块呢是七对吧,当然这样式呢,你还是可以再调调,但老师这里就不再去微调了,好吧,那所以说咱们的这块的一个结构,那大概是不是就完事儿了,对吧?当然这里呢要注意我点击访问量,那这应该是访问量,我点击销售额,那这块是销售额,那咱们呢,目前呢,只不过把相应的静态的组件给它完成了。
15:25
好吧。
我来说两句