00:00
哈喽,各位小伙伴们大家好,那接下来啊,咱们呢,去完成底部这里的数据可视化的业务。那首先说啊,咱们先看一下子已经完成的这个结构啊。那首先说啊,老师呢,可以把底部这里啊定义为一个组件,就是把整体定义为一个组件。那么再拆分左右两个组件。对吧,那先看一下左边的这个组件,那左边的这个组件啊,它的静态组件当中呢,应该是用了一个EL-card。对吧,跟上面是一样的。那头部这里呢,有一个叫做线上热门搜索。以及呢,右侧这里啊,有三个小点点。对吧,那么鼠标一上啊,哎,它会有这样的一个下拉框。那以及啊,在这儿呢,又出现了一些折线图,而这个折线图啊,其实跟咱们咱们上边的业务啊,几乎是差不多的。
01:06
对吧,那这块呢,咱们呢也可以进行拆分,因为这两个组件啊,它展示的结构几乎是差不多的。只不过填充的数据啊是不同的。对吧,那以及这呢,有一个table。对吧,以及底下呢,有一个分页,那右侧这里呢,咱们也看一下子,它用的呢,也是一个EL-card。叫做销售额类别占比,以及右侧呢放了一些radio啊,这其实是用radio单选按钮去做的,以及底部呢放置了一个饼图。只不过这个饼图和咱们以前所做的不一样。咱们以前所做的饼图啊,中间部分呢,它是实心的,而这个呢,中间部分呢是空心的。对吧,那所以说啊,咱们接下来呢,去把相应的静态的组件,咱们呢,去给它完成。
02:04
那所以说啊,回到咱们这里,那咱们呢,去把相应的静态的组件给它完成。那还是回到咱们的首页这里,那咱们呢,先把这些没用的先给它关掉。对吧,那咱一个一个来。那首先说啊老师呢,再来一个组件,就是整个底部最大的组件。咱呢,给它起个名吧,就叫做观察OB啊,Serve observe。当然啊,这个组件你叫什么名字都行,对吧,那老师呢,起个名字就叫观察index,点谁呀,第2VIEW。那咱们呢,来一个模板,模板这里呢,老师先写上一个字,就是底部的数据可视化。当然啊,你这个组件呢,需要回到咱们的首页当中去引入注册以及使用。那咱们呢,引入一下子叫做OB observe ober VE。
03:02
From谁呢?咱们的点杠我不做了,当然你也是需要注册的。那以及这里啊,咱们呢,也使用一下子observe ober VE对吧,当然得闭合。那咱们呢,保存一下的刷新去看一下那底部这里不就出来了吗。对吧,那要注意那整个这个组件啊,老师呢,把它拆分为两个组件,左右对称,而且各占一半。那所以说observe当中啊,老师呢,在新建两个子组件,一个叫做搜索吧,另外一个叫做类别category。那这里呢,咱们呢,再给他来两个子组件,一个是谁呢?一个叫做呃,叫做搜索,那咱就叫色。另外一个呢,叫做分类,那分类呢,咱们呢,就叫做category。对吧,那这块咱也来一个cat category。
04:04
当然啊,它呢得有两个子组件啊,得有组件,那咱们去写一下子index点。当然模板呢,咱们呢也给它生成,那这个呢,咱们先写个汉字叫搜索。对吧,搜搜啊都行,照到这里面呢,咱们也得来一个祖先。这个咱们就叫做类别index.will对吧?写静态的无非就耐住性子慢慢去调就可以了。再呢是分类。当然这两个呀,是作为observe组件的子组件,所以说老师先把这边给它关了。那所以说啊,这两个子组件呢,在咱们的observe当中啊,去引入注册一下import,那这个呢,叫做search。那咱们写一下路径点杠,这是咱们的色质,以及还有个分类。Inmport,那这个呢,叫做category,咱们的第个啊,Category。
05:05
当然,你也需要注册components。那这个呢叫做search,以及还有一个叫做category,当然那这里咱们就得用了。那这里呢,要注意他用到了两个EL card,而且是均粉,那咱们在这里呢,那就简单了,那就给他来一个EL-card,当然你这个div就可以不要或者留着吧。对吧,它呢分为两个card,那一个呢,是咱们的这个色。那咱给他来一个。对吧,当然啊,他俩呢是各占一半,所以说咱们先写个一杠肉。对吧,那么间距呢,这两个扣老师间距给他来个30吧,之后呢,各占一半,那也就是说十二十二。对吧,那这块呢,咱也给他来一个,这个呢,也是占12分均分。正的左边呢,有一个是色尺,那咱搞一下色尺。
06:03
以及呢,右边呢,是有一个叫做category,那这咱也搞一下子catry category。当然啊,得是标签,那咱们呢,就给它闭合一下对吧,那慢慢调试,那刷新去看一下子对吧,那整体的这样的一个结构大概是出来了,但是他们外面应该放个car。对吧,所以这块呢,老师呢,给他来个EL-card,那当然咱们的一个是search,这个老师给他扔进来,以及还有个是category,那这个咱给它剪切一下。对吧,EL-car,那这里呢,是咱们的这样的一个category,那咱们的格式化一下。对吧,刷新去看一下,那分别就是搜索和分类。对吧,当然这两个距离有点远远的,咱可以调一下子,比如说来个十十像素。对吧,那刷新去看一下大概的结构是不是就有了。
07:01
那接下来呢,咱们就得开发什么呢,开心开发左侧搜索这里对吧,那左侧搜索这里呢,咱们呢,找到那一点点的去搞一下子,那看这吧。那首先说啊,它的搜索这儿啊,咱们其实也可以用一个card。对吧,其实这个card在这里用也行。对吧,那咱们呢,先给他搞一下吧,这块咱先不用看在内部去用吧,因为它有个标题。对吧,这个看老师先给他干掉。对吧,那这块咱也给他干掉,在组件内部咱们去用啊,对吧,因为他有头部嘛,那咱们先看现在是没有car。对吧,那咱们先去完成咱们的搜索这里那找到搜索。对吧,那咱们呢,先看一下他们是有头部的,那咱就来一个呗,那这块老师就可以来一个EL杠。EL-car,当然它呢是有头部的,那这块的布局咱就得一点点来了。
08:03
对吧,那咱们看一下子,那首先说头部这里呢,有个叫做线上热门搜索,那咱来一个SPA。对吧,那这个呢叫什么呢,叫做线上热门搜索。来搜索,这样呢,咱们先刷刷新,先看一下呢,有没有相应的文字,OK,是有的,以及呢,在右侧这里啊,是有这三个点的,这三个点呢,其实呢,咱们呢可以自己去做,当然呢,咱们呢去看一下饿了么UI当中有没有搜一下,因为SVG咱们已经会用了。对吧,SVD也是可以的,当然咱们看饿了么UI当中有没有找他的这个icon图标。找一下艾考这儿。对吧,这不是有吗?以及怎么用,那咱们可以看一下就是I。对不,那当然啊,它的类名呢,叫做EL-I杠帽,那这块改一下就行了,那这块老师给他拿过来。
09:00
这块给它换成谁呢?换成咱们的这个叫做猫对吧,那咱们的刷新去看一下的是不是就有了,大家要注意它俩呢,是左右左右排布啊排列的,所以说啊,咱们呢,可以用flex布局给它套个D位。那这个呢,咱们呢,给它来一个类名吧,那这个呢,咱们就叫做class。叫做search的这个header吧。当然咱们呢,是需要补一下样式的,那就是点。Search杠。He DR。让他们呢,D斯类为Lex啊,左右对齐,Just content with space比特这样呢,咱们的保存一下的刷新看一下大概的这样的一个结构是不是就有了,对吧,再呢,是咱们的一个头部,那以及这块流能看这儿。这块呢,就是身体部分了,那么身体部分咱们看下这块的啊,其实啊,这两个组这两个结构差不多,所以说完全的可以用一个组件去搞定,为啥呢?因为只要数据给他不同,那展示不同的数据不就完事了。
10:11
对吧,所以说这块啊,老师呢,给它拆分为一个组件啊,共用的组件用两次对吧,数据不同,那展示的就不同对吧,当然咱们先把它的静态先给他完成。那老师啊,在设置当中,我再给他新建一个子组件,就叫做LA折线图吧,Learn char。那这块呢,咱们呢也给它来一个组件,找到learn char,那这块咱给他来个index,点谁呀,View,当然那咱们得有模板,这里面老师先写上一句话,折线图。对吧,那么回到咱们的search组件当中,回到这儿,那咱们引入一下in part,这呢咱们就叫做LA charts。From谁呢?咱们的点杠叫Le charts,当然你得注册。
11:00
Complements。那注册呢,就叫做learn charts对吧,那以及咱们看一下的,他们应该是在色的身体部分,这是不是得用两次。对吧,那所以说不应该是头部这儿了,头部这老师就给他合上了,就这。对吧,那这一块呢,咱们呢,就使用呃,这个折线图,但是它是左右对称的。各占一半,所以说咱给他来个EL杠肉对吧,每个人占12份,那这个咱也来一个,这个咱直接复制吧。对吧,这咱给他复制一下。稍微呢,给他格式化一下。OK吧,哎,没问题,那之后啊,咱们在这呢,给它来一个这个呢,就叫做learn啊charts。对吧,当然得是标签各占一半。那这个咱也给他来一个,那底下这儿呢,也是一样,也给他来一个。对吧,那咱们的格式化一下走,你刷新去看一下。
12:01
对吧,这不就是有相应的这样的一个折线图嘛,对吧,那当然那咱们的这个折啊,当然这块有一条线啊,线这个呢,应该是咱们这个hier本身就应该自带的,对吧,咱们找一下这个card啊,找一下这个card本身应该是自带的card card。对吧,卡片它本身应该是自带的,咱们看一下子,对它有个类名叫做class维。对吧,那当然咱们呢,也给它拿过来啊,就在这儿,我看它是加在哪儿啊,它是加在了这个slot we hier,就这啊这儿给它加了相应的类面对吧,那这样的这条线就是有了。对吧,咱刷新看一下。对吧,这个线还是没有,没有呢,那咱们可以怎么办呢?你就直接把人家的这个结构给他带走。对吧,那咱就直接把他人家的这个给他带走对吧,以及咱们对一下子吧,其实这块就还有个类名叫做box car,对吧,那咱给这car加上。
13:03
叫做bookscard。对吧,那咱们再保存一下,剩下应该跟它是一模一样的了,刷新。呃,这条线还是没有没有,应该是咱当年是不是设置过这个,咱们得调一下,呃,得调一下这样的吧。呃,老师呢,先把这个头部这里先把那条线给它整出来。对吧,那咱们呢,找到这儿,我先给他替换一下,就先把这条线先给它整出来啊,咱们找一下子老师呢,先看一下,我先给他直接拿过来。对吧,那这块这个看老师先给他注上,先给他住了啊,先给他住了,或者先给他干掉,我先给这条线先给他整。对吧,那当然这块的结构呢,咱们一会再说先看看啊去了一条线,咱们先给线先整出来。对吧,线是没有的,那咱们当年应该是调过。对不,它类名叫啥啊,叫EL杠,呃,Carder,我当年应该是调过。
14:05
对吧,Border bottom为nu,那这样的吧,咱还是给它加上吧,胰酵素solid来一个黑色。对吧,那咱们呢,刷新去看一下子有没有,当然顶上这就出来了。对吧,呃,那老师想想那是这样的吧,那咱呢,给他重新起一个类名。好老师知道怎么搞了这个呢,该为闹为闹,咱们这里呢,该回退就回退。对吧,啊,该回退就回退啊,回退到咱们最开起始的位置。对吧,那咱们呢,就自己再给它加一个类名,对吧,就给这再给他加一个类名,找一下咱们这个hier吧,应该是这对吧,Class咱们就叫做hier。对吧,那咱们呢,给他补一个样式啊点。Hier之后呢,老师呢,给他加一个border杠,Bottle胰像素solid先来一个黑色,先看一下能不能看到那条线。
15:02
对吧,那这样不就有了吗?也不影响别人对吧,别人开没有还是没有对吧,所以这条线呢,老师呢,给它加上吧,加个颜色井号EE吧,井号eee,其实咱们呢还可以怎么呢,还可以给它称一下子啊,当然就没必要这个样式老师就不再搞了。对吧,所以说咱们的这条线就出来了啊,当然你可以撑一下子拍点。上下呢,老师给他来个五像素左右为零啊,这个样式还是得调的对吧,这样称一下它也行,对吧,行吧,样式老师就不调了,这样呢,咱们再看一下折线这里啊,折线这里啊,它已经出来了。对吧,那咱们得一点一点的来,先把相应的静态先给它完成。那折线图这里呢,咱们在搞之前啊,先看一下这吧,这其实还有个业务。对吧,鼠标一上它是不是有这样的一个下拉框。对吧,以及咱们这块的结构也对称出来了,那咱们呢,先把这先给他搞定,对吧,鼠标一上有一个这个下拉框,那咱们还是找一下饿了么UI的一个组件,它有个下拉框叫做照什么的。
16:11
第二。找一下就这个对吧,鼠标一一上是不是有下拉框对吧,而且数据都是一样,那咱们看一下怎么用。对吧,那就是这个组件呗。对吧,那咱们先看啊,它是鼠标放到这个下拉菜单,下拉菜单应该就是这个挨这对吧,那当然那咱们就给他拿过来。直接复制。找到咱们的先这先折上吧,这个折线这小先先不管了,这个老师先给他折上,就这。这块的呢,咱们应该有一个下拉框。对吧,当然这个I先留着这个咱给他再拿过来,对吧,咱给它格式化一下。那当然啊,你这块呢,鼠标移上去的应该是这个I,就是这个小点点嘛,对吧,那咱们把咱的这个小点点儿给他拿过来。
17:01
对吧,那咱们的格式化一下,这块老师也给他往上提一下。对吧,咱们呢,刷新去看一下鼠标仪上有没有相应的下拉菜单。对吧,当然有的同学可能会想,老师,为什么咱们的下拉菜单是冲上的啊,这是因为底下的这个高度不够对吧,将来有数据给撑起来就冲下了,当然啊,它这里呢,还有一些样式,那样式咱这儿呢应该是有类名。咱们呢,把相应的类名给他干掉,对吧,看一下子可不可以。对吧,刷新去看一下。对吧。那这样的一个下拉菜单,那咱们呢,再看它还有没有别的类名啊,别的类名应该是没有了disable的应该是这。对吧,那disable的这咱也给它去掉。对吧,咱不需要这些样式刷新看一下。对吧,那这样的一个结构不就出来了吗?当然现在是冲上弹的,将来底下高度够了,它就是冲下。OK吧,那接下来咱们呢,去完成折线图这里,那折线图这里呢,咱们看一下子刚刚拆分为一个组件,被复用了两次。
18:09
那么这个组件呢,咱们呢,可以拆分一下子为上中下对吧?上面是这个文字加这个小logo,中间是这个数字带,从上冲下小箭头,以及呢,还有是这样的一个曲线对吧?那找到咱们的这个组件,因为咱们刚刚这个折线图,这个组件被封了两次对吧?找到咱们这个Le char,那咱们去写一下它相应的静态。对吧,这块都给它关掉,那咱们呢,就分为上中下三部分,那这块老师搞一下子。那这块呢,咱们给他来个类名吧,Div点咱们就叫做hier吧,对吧,这样再来div.M吧,这再来一个div点福特。第2FO,那么剩下的活啊,那无非呢,就是把这些数据给他搞定对吧,搜索用户数还有什么人均搜索次数,当然咱们现在只考虑静态数据,将来你给他不同的东西暂时就不同的,咱们先把静态先完成对吧,那这里呢,老师呢,来一个SPA,放的是它,那搜索用户数,那咱们看一下应该就是它。
19:20
对吧,那以及呢,还有一个就是这样的一个小图标ii,咱们曾经用过,就在这儿嘛。对吧,那咱们就直接找一下当年的这块料,当年应该是在在哪儿呢,在他这。对吧,这个I想想是不是这来的啊,咱找一下这个是谁来SVG日同比,这应该是上升与下降的日同比嘛,日同比看一下子对吧,上升下降应该是这个N叉子里面。啊,不是,他应该是底太。对吧,应该是这标题到旁边嘛,标题到旁边对吧,那咱们呢,把这个SVG呢给他带走。
20:01
这个老师给他CTRLC一下,那扔到咱们这里,那咱们把右侧全关了。省着看着闹心对吧,这样呢,咱们呢把咱们的SVG呢给它拿过来,那咱们呢得稍微格式化一下,稍微好看一些啊当然也行,现在那咱们呢刷新去看一下子,这不就出来了吗?当然大小呢咱们呢要调一下子。大小它是可以调的,对吧,比如说调成26,那这块老师也给他来个26。对吧,那咱们呢,保存刷新去看一下对吧,当然他俩应该是垂直居中。对吧,垂直居中,那所以说啊,咱们这块的呢,可以怎么办呢,可以给这个海德。点。He DR老师呢?让他进行呃flex布局,让他们呢?呃,Items为center,垂直居中。那咱们的刷新去看一下有没有垂直居中。
21:01
对吧,哎,差不多之后呢,他们呢,应该是有一个距离,那咱们呢,给它加一个margin class,那这个咱们就叫做。呃,Search的这个海吧。对吧,这样呢,咱们补一下钥匙点search杠。Hi,老师的,给他来一个margin gun right。这个咱给他来个20像素去看一下它好不好看。对吧,像大概就这样对吧,当然其他的颜色什么的,老师就不调颜色调一下吧。这个颜色呢,老师呢,给它来一个井号意义吧,来一个灰色。对吧,当然这个灰色它不好看,拉倒吧,那咱样是这个就不调了,就来黑色吧,好吧,当然样,当然这个颜色你想调,那当然也是可以调的,这里咱们就不调了,对吧,那以及底下这儿呢,还有相应的中间部分还有数字。对吧,以及还有冲上冲下这个箭头,那这块呢也好搞,那这块是中间部分来个SPA。
22:05
那这个呢,咱们先写上一个固定的值吧,1232112321对吧,以及呢,还有一个数字,那看下这个数字是多少,咱们先先全都写死。17.1,那咱也写个17.1。对吧,但是你要注意啊,这个组件就是这块的位置,它可能是冲上的,也可能是冲下的,取决于你这个数字是正数还是负数。对吧,那当然,那咱们呢,先把它这先搞定,因为这块它可能是冲上,也有可能是冲下,所以得有两个对吧,那咱们找一下冲上冲下的这两个图标。那应该是谁呢?我看啊,冲上冲下应该一个就是这个SVG。对吧,CTRLC。那咱们呢,给他带走,这是冲上的。还有一个呢,是冲下的,那这咱们也找一下。应该就是这里。
23:01
对吧,那当然咱们呢得找到底下这找一下应该是到这儿。对吧,CTRL位,当然你自己重新下一个它也行,这个呢,就是冲上冲下的这两个SVG,当然将来看二者只能存一个。对吧,还是得看数据是正数还是负数,所以说呢,咱们先不管,咱们呢,先把这两个图标都给它展示出来。对吧,但是呢,你要注意将来他二者呢,只能存一个,当然咱们呢还是得调样式,那这块老师呢,给他来一个叫做class吧,叫做M杠,呃,Title。那这块呢,咱给他来个class,这个叫做mean girl content吧。行,那咱们呢,去补一下样式,点me-title头tle,那这里啊,老师呢,给他来个marin-right来个30像素对吧,咱们保存一下刷新去看一下,OK之后呢,这个数字看一下,它跟顶上也有点距离,那咱们给它加上一个给它这儿吧这儿吧,给这个面加一个margin top吧。
24:09
所以咱给min来一个吧,Min对吧,Marin上下呢,老师来个十要素左右为零,那咱们也去看一下啊,刷新看一下对吧,这样差不多,呃,之后呢,这个数字和这个图标还是有点距离,那咱也给他来个margin right。这个老师也给他来一个C。那这块呢,就是点它。对吧,这个咱给他来个margin-right,这个老师也给他来个30像素吧,对吧,这个钥匙呢,你可以自己去慢慢去调,当然咱这个margin-RIGHT30可能有点大,那咱来个十像素。好吧,样式这些东西老师就不想再去提了,好吧,这个看一下了,大概就这个位置对吧,那以及呢,底下这里呢,有相应的这样的一个折线图,折线图咱当年写过。对吧,那所以说这块老师给他合并上,那这这呢咱们呢需要来一个容器div,咱们就叫chars了,以及将来ref呢,要获取到,那咱们也叫char。
25:09
当然这个容器呢,得有一定的宽和高,那咱们补一下样式。再呢,就是点点叉。宽度呢,就直接是100%,高度呢,老师给他来个50对吧,那接下来就初始化咱们的这个折线图了,折线图咱当年做过,就在这儿。对吧,把该捞进来都捞进来,因为跟顶上那个是一样。对吧,那所以说跟顶这是一样的,所以说咱就直接捞回来对吧,那找到咱的这个棱char这。那第一个引入咱的char。对吧。第二个mounted给他带走。数据呢,咱们先全都一样先写死对吧,好,那这样呢,咱们呢,保存一下刷新去看一下咱们的基本的静态是不是就已经有了。
26:00
对吧,当然这个静态呢,你可以再去调调啊,这里老师就不再去调了,OK吧啊,这个咱就不再去调了,当然这个颜色呢,咱们是可以调的,对吧,比如说人家这个是什么色,人家这个是绿色,那咱这个也是可以调的,这个颜色是可以调的啊,这个千万可别忘记了,就这咱可以改成,比如说改成一个blue对吧,或者是2D,它都可以。对吧,但是这块老师也给他换成补录。对吧,或者是这个这个这个审查这个呃,颜色你都可以对吧,这个颜色老师也就不再搞了。那么之后呢,咱们再看一下底下这里,底下这里呢,应该是有一个table。对吧,完以及还有个分页,那table这里面呢,它带有排序的功能。对吧,那咱们看一下,找一下相应的element UI,有没有这样的带有排序的table。那咱们呢,去找一下相应的组件,搜一下table。对吧,那咱们看一下有没有类似的带这种排序的瞄眼。
27:05
看一下有没有,应该是有的。对吧,你看这不就有了对吧,那所以说咱们就用它就行了,那咱们的直接带走EL table。当然这个数据啊,你得去调调,当然你别给我带多了EL table就这从这到哎AA过了对吧。这样老师圈一下就是从这到这。哎,又没全对。哎呀。对吧,这个手还不好使,行,咱们再重新找一下,这手还不好使。咱们把这个table给他带走。就这。对吧,啊,那咱们呢,给他带走,就从这儿到这儿。是吧,看到这。这样的,把咱们的这个table看下,Table应该放哪啊?Table就不应该放在这个LA Cha组件里面了,应该放在search里面。
28:02
对吧,咱找一下应该是放在search里面。对吧,应该是在这个这两个的底下,对吧,那咱们在这呢写一下这是什么呢?是table表格。这块老师呢,给他带过来。当然那咱们的格式化一下,数据还没有对吧,数据没有呢,咱们的可以先写,先写一个假的对吧,比如这咱来个date。之后呢,咱当然得返回一个对象一个对象。它呢得是一个数组,数组里面的老师呢,先放一个空对象,让他至少有一条数据。对吧,那这样呢,它的这个defa的扫的这个排序方式呢,咱们先不要。对吧,动态先全都不要,咱们呢,只要什么,只要这个静态布局。对吧,那这块呢,咱也给他拿上来。对吧,那剩下的咱们得改改对吧,咱们得改改,虽然说它这个table是有包底的,那咱们给它加一个包底。
29:05
对吧,之后呢,Prop因为咱数据还没有先不管。数据都没有的,你哪知道要展示哪个字段?对吧,当然他的这个label咱们得改改label分别叫做排名啊,搜索关键字,那这个呢是排名。再有呢是搜索关键字,搜索关键字。那以及还有什么呢?以及还有这个用户数和周涨幅用户数写一下。用户。数和周涨幅,那当然咱们还需要有一个color。这个呢,咱直接给他带走,这个呢,叫做这个叫周涨幅对吧,那咱写一下叫周。涨幅。涨幅浮动对吧,周。涨幅对吧,当然呢,咱们的刷新去看一下咱们这样的一个结构对吧,这不就是有了吗?但是你要注意啊,是后面这两者才有什么,才有这个这个这个这个这个这这个小箭头对吧?那是谁呢?就是这个salt啊,但是在咱这个form动态的数据咱们先不要。
30:17
这也不要,就是先把它的近代性的完成。并不是前面这两个要排序,是后面这两者要排序,对吧,所以说咱给他拿过来这儿呢,给它加个sot。这儿呢,给它来个salt,那当然顶这俩咱就不要了。对吧,那这块咱给他干掉一下。对吧,那咱们呢,刷新去看一下,那这样的一个结构是不是应该就有了。对吧,呃,当然啊,这个大小可以调调,比如说排序,排序这里其实展示的就是索引值,可以让它小一点,比如说80。对吧,展示索引值,那不就是type等于index。对吧,后面那两个是均分。对吧,那所以说呢,咱们的刷新去看一下对吧,那这样的一个小效果不就出来了。
31:05
对吧,当然这个字的大小老师这个颜色咱就不调了,好吧,那以及底下这儿呢,还有一个就是这个这个这个飞儿器,那飞儿器呢,这个组件呢,咱也有叫page nation。哎,各种各样都有page。对吧,那当然它的分页器呢,有各种各样的,那咱随便找一个吧,就找它吧,第几个呢,咱就找第二个吧,对吧,第二个那这个是看一下的大于七应该是这。对吧,那咱们呢,给他带走。CTRLCCTRV,那这块呢,就是咱的一个分页器,这个老师做一下笔记分页器。对吧,那这个呢,咱给他拿过来,那咱呢先就默认是1000条数据静态嘛,对吧,先看一下相应的结构。对吧,当然你这个分行器啊,应该是居用,那所以说咱们呢,给它打一个类名class,那咱们的就叫做page nation。
32:02
对吧,让它浮动到右面,那这个老师给他保存一下。对吧,补个钥匙。让它浮动到哪呢?浮动到咱们的右面,那咱们刷新去看一下,那这样的一个静态,那大概是不是就完事了,对吧,当然这个样式呢,你还可以精美化。那以及呢,还有哪还有右侧这里,那右侧这里其实也是一个就是category是不是也有开和这个柱状图。那所以说啊,找到咱们的这个category这。那这里啊,老师呢,先把没用的先给它关掉,右侧全都关掉。对吧,那这块呢,咱们也给他来个EL-card。对吧,头部这儿呢,是得有数据的,头部的这个数据咱们看一下叫做销售额类别占比。这咱就直接复制吧。对吧,CTRLC。这个呢,咱给它放到SPA里SPA。对吧,给它提上来,那以及右侧这里呢,是有这个单选按钮的,其实这块用单选按钮去做。
33:04
就是谁呢?就是这个radio啊,这一定要注意,一定要对饿了么UI比较熟悉。对吧,你看他的radio当中是不是就有像样的这样的一个结构,对吧,那咱就直接带走radio,随便找一个找他。对吧,CTRLC,那这个呢,咱给它拿过来CTRLV对吧,而且呢,要注意它俩呢,也是左右对称的,那所以说给他们外层也套一个div,那这个呢,咱们就叫什么呢,来个类名吧,叫做cat,咱们叫做header。对吧,那把刚刚的结果再拿过来,咱们呢,先看一下相应的一个结构啊,先看一下。对吧,哎,没问题,但是呢,他们俩应该是左右对称,那所以说咱们的category header那也是一样。对吧,那咱们调一下点它。对吧,第次play为Lex,以及just content just content为呃,Space between,对吧,那咱们运行保存运行一下看一下对吧,但是他俩的这个有点有点这个不在一条线上,那咱们的可以让他们的items with center,那咱们呢,去看一下。
34:21
对吧,那这样的一个结构大概是差不多的对吧,以及呢,应该有一条线,那线呢,咱们呢也是一样,就是呃,打一个类名class,这个呢,咱们也叫。对吧,那这个呢,咱也补一个钥匙点。老师呢,给它加一个border bottom移像素啊移像素solid来一个井号一对吧,那之后呢,咱们的刷新去看一下,大概的这样的一个结构是不是有了对吧?当然啊,它这个header应该是有拍顶的,我感觉咱们看一下的。看一下的啊,他的这个应该是有拍顶的,拍顶咱们可以调一下来调一下。
35:05
看看这个叫hier,找一下这个,当然这块其实可调可不调啊,这块老师不想调这个样式,调这个恶心,当然你要想调,你看看他明显是有拍顶的。对吧,这明显是有拍顶的拍定的,你可以去调它的数据啊,这个咱就不调。对吧,这个这个这个是可以调的,对吧?当然了,那咱们这块的呃,样式咱就不调了,好吧,那这块呢,咱们看一下的,比如说啊老师点击上海,那就上海当然不叫上海,这是啥全部渠道线上门店仨,那咱这块也留仨。那分别是什么呢?分别是全部渠道。还有线上。线上还有一个是啥,看一下子啊,叫做门店。哎,门门门门。店对吧,当然呢,咱们呢,可以刷新去看一下子啊咱。
36:04
对吧,当然了,这块呢,要进行数据的双向绑定,对吧,它绑定的叫做radio,那咱们给它换个名吧,咱们就叫做value。对吧,那咱们呢,给他先来一个Y6,先来个值date。对吧,Date return。那咱们的Y6呢,先给它来一个值,我看看是不是全部渠道全部取到,那咱们呢,去看一下,那默认应该是全部取道点亮。对吧,那咱们呢,也可以审查一下子开发者工具,去看一下相应的组件。这个呢,应该是咱们的category对吧,看一下。Observe下的这个category。对吧,那你看嘛,这不就是数据双向绑定嘛,就绑上了对吧,那以及底下这里啊,有一个是一个饼图。对吧,应该是一个饼图,那这里呢,咱们得去找一下子一看一下有没有类似的这样的一个,呃,图表咱们找一下。
37:07
那这里面呢,咱们呢就不能瞎蒙了,你去事例当中找这个丙图看一下有没有相同的对吧,其实这个第二个差不多,为什么呢?因为它有缝隙。你看嘛。对吧,那咱的这个第二个横向。对吧,那所以说啊,咱们呢,把他的option直接带走。Can I think。对吧,那当然这里面呢,咱们呢还是一样,你这呢应该打个啥div对吧,比如说来个类名叫做chars,以及呢,打一个ref等于什么呢?咱们也叫chars。当然那它呢,得有相应的这个样式补样式抛合高嘛。对吧,宽度100%高度呢,老师呢,给他来一个300吧。对吧,那当然咱们的时候那引下的import。A e from。对吧,当mount的时候,那你得显示相应的这个,呃,这个饼图。
38:06
对吧,那就是lie的一个MY。等于E叉s.in应该是咱们的Z点到了2EFS点叉。TS对吧,以及咱们的MYs.side option op option把咱们刚刚拿到的配置对象往里一扔,当然多了一个分号对吧,那咱们的格式化一下子稍微呢,去看一下子,是不是咱们想要的一个效果啊,刷新看一下。对吧,呃,当然有的同学可能是老师啊,左右的这个高度不一样,将来左边这块呢,会有数据的,会撑起来的,对吧,这个样式咱们到时候都可以调,那首先说咱一个来顶上的这个这个legend咱们是不需要的,那所以说呢,咱们呢,给它去掉一下legend legend啊legend切换不同类型系列。
39:03
对吧,看他写没写,他应该是写了,不写他不可能有对吧,这咱给他干掉。对吧,那保存一下刷新去看一下,OK,没问题。对吧,接下来呢,你要注意啊,人家的这个显示的文字是在外面。对吧,而咱们现在显示文字在哪呢?在里面,你看啊在里面。对吧,那所以说啊,咱们呢,得搞一下子,得搞一下子这个label对吧,这个label要不要要。对吧,Label是true,我们先看一下子,Label是true,但是它呢,现在是在哪呢?在它的这个,呃,在它的里面,应该在外面,它先放在C是中间嘛,所以说咱们呢,还是得看一下人家的这个配置项。找一下配置项。对吧,那应该找的是丙图,找一下系列。找一下系列,Serious系列。
40:05
找一下咱们的这个系列这找一下咱们的这个饼图这,呃,找一下子label。找一下子label这的它的position现在呢它呢是在中间的位置,除了有中间还有outside是外部对吧,所以说咱们呢,给它调一下叫做outside。O,那咱们先看一下相应的一个效果啊,刷新去看一下对吧,那这样是不是就在外面了。但是它这个文字啊,有放大的效果,咱们是不需要放大的,放大谁其实就是烫。对吧,咱们可以看一下配置项。配置项当中呢,也告诉你了em开头的那个。找一下em开头这。对吧,高亮状态的扇形区域,还有什么什么标签样式,你看它其中用到了一个谁用到了一个叫做呃兽,还有什么放size对吧,其实这里啊就是什么呢?就是那个放大的那个效果,咱可以给他干掉。
41:10
对吧,那咱们的刷新去看一下的啊,OK,这是没问题的,但是你会发现跟人家比呢,是少了那个线对吧,那咱们呢,也可以把线给它展示出来,就这个其实就是label烂,Label烂就是那个线给它变为处。对吧,那咱们呢,保存一下刷新去看一下,那这样的线是不是就出来了。对吧,那以及呢,还有一件事就是这个文字,那咱们呢就不改了,文字就用这些了,对吧,那以及呢,还有一件事就是什么呢?中间它会把相应你选中的那个数据它的名字。对吧,它的这个value和这个name给它显示出来,就是你鼠标移上谁,那它就显示谁。对吧,其实这块怎么做呢?就是可以用咱们的这个title去做title。
42:00
Title呢,你看比如说老师先给他写死,比如说test主标题咱们叫啥呢?咱就叫做咱先随便写一个吧,这数据咱调下这个,比如叫视频。对吧,哎,视频那这块老师先写死一个,比如说这块咱就要视频。对吧,数值是多少呢?咱们可以用子标题sub test。对吧,子标题呢,咱们看它是多少,它是1048。对吧,10481048,那咱们看一下在左上角呢,是应该是有这个标题的。对吧,那咱们这个标题呢,是可以挪位置的,挪到整个图表的正中心对吧,就是让它的left。为多少呢?为零啊为。对吧,Top呢,也让他居中。那这样呢,咱们的标题和子标题就居中了。对吧,但是你鼠标以上谁应该显示。
43:01
对不对,你鼠标一上谁应该显示谁。那所以说这个怎么办呢?就需要给他加事件了。而咱们的E叉S啊,是可以加事件的,就是。他呢有一个事件叫做什么叫做鼠标一上,那这不就有moover对吧,那咱们呢给他带走,那也就是说啊,咱们呢,可以给咱们的图表啊,绑定事件这块写一下绑定事件。那这个呢,咱们叫啥叫MY。My char对吧,当然你这个事件的名字叫做貌似木鼠标接入,当然这块咱不要。那以及为了以防上下文的问题啊,咱们的这个参数呢,你可以传什么呢?传相应的这个箭头函数,因为防止有这个上下文问题。对吧,那这里呢,他呢会给咱们注入一个参数,咱们可以打印一下。这个就是什么,就是你鼠标移上去的那条数据,你是可以拿到的。
44:02
您可以看一下。对吧。呃,当然这里包错了,My char is not DeFine my char,看咱这玩意叫啥,My chart,没有S。对吧,多了一个S。那么这里啊,咱们呢,可以看一下,当你鼠标移上某一个数据的时候,可以拿到相应的数据。对吧,就是在这个date当中,帕当中这个date,这不value和name,那所以说啊,咱们呢,可以怎么的获取。鼠标移上去的那条数据。咱们呢,可以把相应的内和Y流结构出来,这不这吗?这不有相应的内和Y流。对吧,那这块应该是谁,是咱们的para they date,当然咱们需要重新。设置标题。当然样式的,你想调可是可以调的,对吧,应该是,呃,是是是是谁来的,是MY chart.set op option。
45:01
把咱们的标题title对吧,它的test重新设置一下,Test为,啊,应该是name对吧?Sub test应该是为value。对吧,那咱们呢,保存一下刷新去看一下相应的这样的一个结构是不是就完事了。对吧,所以说相应的咱们的静态的布局,那就完事了,对吧,所以说呢,咱们完成了相应的静态布局,接下来呢,老师呢,会模拟一些数据啊,就是整一些接口,那咱们呢,去看一下如果获取服务器的数据该如何操作。
我来说两句