00:00
哈喽,各位小伙伴们大家好,那接下来啊,咱们去完成首页当中第二个card当中啊,这个折线图的这样的一个业务。那首先说咱们在学习ears使用的时候啊,其实这种类似的折线图呢,咱们呢是开发过的。只不过当年咱们所绘制的折线图比较生硬。而我们现在所看见的这个折线图啊,它比较圆润。对吧,那所以说接下来呢,咱们呢,去开发这一部分业务,以及看一下子像这种圆润的折线图,该如何的去实现。那咱们呢,回到咱们的项目当中,那当然咱们呢,是需要在这里去展示一个折线图。但是你想想,你是不是需要使用ears这样的库啊?那所以说你得需要下载相应的依赖包,而且E叉的使用咱们也说过,第一步引包,第二步准备一个容器,第三步初始化ear实例。
01:11
对吧,那所以说啊,咱们的先去把咱们的依赖呢,去给他安上。对吧,那这里呢,要注意一件事,那当然咱们的第一件事一定是需要把依赖给装上,那咱们安装一下CNPM,因此的杠杠save咱们的一叉。对吧,稍微等待一下,让他安装上,OK,安装成功。那接下来呢,应该是在咱们的第二个卡这里。对不,那也就是说它这里呢,留有两个插槽,一个是底部的,一个是显示图表的。那所以说啊,它这个插槽呢,叫叉子,那咱们呢,可以给他再来一个插槽叫template。对吧,那当然它是有名字的,那这块呢,别忘记有一个叫做slot。
02:05
啊,Lo。为什么呢,咱们的这个呢,叫做chart对吧,当然咱们在这里呢,先写上一个文字,比如说折线图。对吧,那咱们呢,回到咱们的项目当中刷新看一下子是不是咱们的折线图就出来了,当然这个高度咱们可以调调,这个老师看一下子默认我给的是40,咱给他来个50吧,让他稍微高一些。对吧,那所以说接下来呢,咱们呢,就可以准备一个折线图这样的一个组件,把这个位置给他占上不就行了吗。对不,那所以说到咱们的card,这,那老师呢,再新建一个文件夹,它们是折线的图表,那咱们就叫做LA chart。对吧,那当然咱们呢,得去写一下这个相应的组件,折线图组件。
03:01
Index will。那这里呢,当然需要咱们的模板,那模板这里呢,那不就有了吗。对不,那所以说咱们呢,需要在这个组件当中搞出一个折线图。那第一步,那一定是要引入ears。对吧,哎,引入S,那咱们引入一下import。1CHAR from谁呀?咱们的一。那第二步呢,需要准备一个带有宽高的这样的一个容器。那咱们呢,给它打一个类名,比如说啊,咱们呢,就叫做charts。对吧,那这咱们搞一下点。Char让它呢和副元素一边宽也是呢一边高,对吧,那这个height也得来个100%。那接下来呢,就得初始化咱们的这样的一叉实例了,那要注意那在组建的哪个地方去初始化咱们一实例呢。
04:06
对不?咱们的E叉实力是一叉点in ne,以及拿到容器的节点初始化一个一叉实力。那所以说啊,咱们呢,可以在组件挂载完毕之后获取到节点。对,不去初始化咱们的E叉实力,所以说啊,咱们呢,可以在market当中初始化咱们的E叉实力。那为什么呢?因为咱们在这里可以获取到。比如说打个ref就叫你别给我打ID了,对吧,这是组件了。那所以说啊,咱们呢,就可以初始化咱们的E叉S这样的一个实例了,那咱来呗,那就是e char打点in need,谁呢,this.dollar哎,Res,点这个char。那咱们呢,需要接收ES实例对吧,比如说咱们这个叫learn啊chart。
05:04
好了,那接下来呢,就得配置咱们的配置,对于项目对吧,哎,配置数据。那就是learn char对吧?呃,打点side op side option。对吧,那这个呢,咱们呢就得一点点来了,那得看人家的了,对吧,那当然那咱们这里呢,不要文字了,要的是这个相应的这个组件了,所以说在这儿啊,咱们呢,给他替换一下,找到咱们card就这。对吧,那咱引入咱们的折线的这个组件叫。Chart对吧?For wrong从谁那儿引呢?从咱们的这个点杠啊点杠chart。对不,那当然那这块呢,就得替换成咱们相应的组件了,就这。对吧,不要这个文字了,那所以说啊,咱们在这呢,给它来个标签。Chart。
06:00
对吧,那咱们的刷新,哎,现在什么都没有,那就是对的了,那以及打开控制台看一下子有没有相应的警告,对吧?哎,这个咱们呢,给它来一个双标签吧,Learn chart对吧?那以及呢,你是没有注册的。对吧,那所以说咱们这回刷新看一下相应有没有错误,也没有对吧,那在这里呢,咱们就得准备咱们的折线图了,老师呢,把没用的地儿都给它关了。对吧,就找到他,那咱们一样来,那首先是说看一下的,他需要标题吗。不需要。对吧,那所以说它得有X轴xa叉is X轴以及还有什么呢?Y轴y X is。对不,那咱们呢,刷新去看一下子,那这是不是相应有X轴和Y轴对吧?当然这个大小可能有问题,但没关系,咱们一会儿给它整出来看一下子,那以及呢,咱们的系列。
07:01
对不系列,那系列呢,应该是折线图ers数组对吧,放咱们的折线图typeb,为什么呢,为烂那以及啊咱们的这个date呀,Date呢,随便来一个吧,十啊七三十三十二,呃,88,最后再来一个九吧。这了,咱们先看一下折线图,现在能不能看见,就是可以看见的,对吧,但是你会发现啊,这个整个这个图表啊和这个容器啊,它有点大小好像有点不合适,对不?咱们呢,只是想让这个图表在整个这个容器当中显示,那这个呢,咱们的可以调一下它的布局。对吧,就是布局的调试。就是这个叫做GRGR让他的life咱先给他来个零,Top呢,也给他来个零。Right,咱也给它来个零,以及bottom BOM bottom也来一个零,那咱们看一下子现在整个图表。
08:04
哎,这个咱们呢,当然啊,登录一下,登录一下对吧,整个图表是不是在咱的这个容器当中差不多对吧,但是还是要调调,比如left,咱给他来个十吧,这上下左右都给他来个十像素。对吧,那咱们的刷新看一下子对吧?啊,当然十可能有的不够啊,但是没关系,因为首先说啊,咱们还是给它归零,因为X轴和Y轴人家是不要的。对吧,那所以说这个咱们还是给它归零啊,就是让它,呃,整个这个这个图表在这个容器当中显示就行了,因为它是不需要X轴和Y轴的。对吧,它是不需要X轴和Y轴的,那你要注意那这块呢,你不能把它给它注释掉。对不,你注释掉,确确实实是没有X轴和Y轴了,对吧,但是你也啥都没有了,而且还报错了对吧?那你可以怎么办呢?可以这么办,来老师呢,给它倒退一下,就是把X轴啊,你可以给它隐藏了,就是受。
09:05
为什么呢,为false这个呢,是隐藏X轴隐藏。对吧,这是隐藏咱们的X轴啊X轴。啊轴以及呢,这个呢,轴咱也给它隐藏受,为什么为false。Al SE这个呢是隐藏Y轴隐藏。Y轴,那咱们看一下子这两个X轴Y轴是不是隐藏掉了,对吧,但是你会发现咱们这个折线它就是,哎,就是这么搞的,就一条直线。对不,其实这个可以加上什么呢?给X轴加上这个type的属性,为什么呢?Catry category这样的一个属性,类似于咱们那个散点图嘛,让他有折线的这样的一个小套路。对吧,那所以说咱们的折线图,那这不就出来了吗。对吧,但是你要注意一件事,你看啊,那首先说它没有X轴Y轴咱也没有。
10:03
对吧,但是你要注意一件事,人家是没有这个拐点的。你看嘛,而咱而他的意思这个是没有的,而咱这是有拐点的。看了吧,那所以说怎么搞呢?那咱们当然得看人家的这个文档了,对吧,那咱们就去找一下ES这样的一个文档,咱们去看一下这个拐点该怎么设置。对吧,那当然咱们现在开发的是折线系列,那咱们先找一下系列serious,这这个折线系列,那咱们呢,要设置的是拐点,拐点让它没有,那咱们找一下子应该是谁呢?是这个叫做item style。它那是折线拐点标志的样式。呃,咱们找一下它们有一个透明度。对吧,图形透明度,它们可以让拐点的透明度为零,零不就没了吗?对不,那所以说在这啊,咱们呢,可以设置一下这个拐点的,哎,拐点写一下应该叫做拐。
11:06
写下GUAI拐点的样式的设置。他们应该叫做item style。对吧,只有透明度OPAC。TY让它为零,那这样拐点的样式咱是不是就看不见了?对不?哎,这是没问题的了,那以及啊,咱还有一个东西,咱也可以搞一下人家的这个呃,折线的颜色是紫色,那咱们呢,也可以设置。对吧,那咱们看它应该是谁,不应该是拐点了,应该是这个线的颜色了,L stylele他们也有color。对不线条的样式嘛,那所以说咱们也可以设置一下,就是线条的样式。叫做烂啊,看style。对吧,那咱们呢,来个color color为什么色呢?为这个紫色purple purple。
12:01
对不,那咱们呢,刷新去看一下子是不是相应的紫色对吧,而且呢,你要注意你看人家的这个区域啊,是有填充颜色的。看没看见,而且还是渐变的效果,那这个怎么做呢?其实它呢,有一个叫做a realstyle对吧,区域填充样式叫做a realstyle对吧?呃,咱们先看一下,它有一个color的属性,那咱们先试一下子叫做a realtyle。那这个咱给他带走CTRLC。对吧,那这个呢,是填充颜色填充。哎,颜色的设置叫做a style之后呢,他咱们要的是什么颜色呢?咱们要的是这个紫色PU。当然这种呢,不是咱想要的。对吧,因为人家这玩意儿是有渐变的,你看嘛,这不是由白的到紫的嘛,而且是渐变的效果。那其实style它这个color是可以写渐变,它支持,呃支持渐变你看嘛。
13:03
对吧,填充的颜色也支持设置为渐渐变色或者是纹理填充,对吧,那咱们可以试一下子。看他有没有相应的这样的一个代码,咱们看下这对吧,完了具体见见哪渐这那咱点进来看一下,那这个是人家的渐变色,那咱的其实直接可以给他带走。对不?那咱们呢,把咱们的这个color填成颜色,这个color给它替换一下,咱们呢,给它变成这种渐变的颜色,对不?那咱们的颜色呢,应该是由白色变成这个紫色,那就是FF白色,那紫色呢,应该是purple啊P啊,Purple对吧,紫色,那咱们看一下有没有相应的这样的一个渐变的颜色,是不是就有了。对吧,当然咱们的这个数据跟人家这是不一样的,这个数据咱们可以调调对吧,比如说咱们找到咱们这个数据啊,比如说咱再来一个吧,比如这个来个四十八九对吧,29再来个19,呃十对吧,再来个44对吧,当然咱这个数据跟人家是不一样的。
14:11
对吧,那所以说你看嘛,这不也有那些相应的渐变的颜色,对吧,那所以说咱们完成了这个折线图的这样的一个业务,那这里呢,要注意一件事,X轴和Y轴是可以不要的。对吧,那咱们呢,可以看一下的,你看啊,就比如说X轴你看嘛。对不展不展示X轴对吧,你可以呃变为false隐藏嘛。对吧,啊,那以及拐点要不要那都可以设置。对吧,啊,以及填充的颜色啊,渐变的颜色这些都是可以设置的。对吧,好了,那这个呢,是咱们完成了相应的这样的一个折线图的一个业务。
我来说两句