00:00
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去学习一下子一当中的这个组件。那咱们呢,稍微看一下。那首先说啊,ES中啊,除了绘图之外其他的部分。都可以抽象为组件。比如说啊,咱们再看一下底下这张图。那在这个容器当中啊,它显示的既有柱状图又有折线图。那么除了绘图之外,其他的地方,比如说像X轴。R,那在一当中啊,你都可以给它理解为是什么呢?是相应的组件。当然啊,X轴和Y轴啊,咱们呢,只是需要在配置对象里面呢去书写即可,那当然其他的组件呢也是一样。比如说看这儿。其实啊E呢,给咱们提供的有一个组件,有这样的一个功能,就比如说鼠标一道柱状图或者是折线图的时候。
01:07
它呢,会弹出一个哎提示框,那这个小框子其实也是一个组件,叫做to keep组件。那以及比如说在咱们的这个图表当中,它既有柱状图又有折线图,那其实啊,它还有一个组件叫legend component组件,比如说我点中折线,OK,那你在容器当中啊,就应该只是展示折线。那假如说我点击的是柱状图,OK,那你这个容器当中啊,应该展示的只是柱状图。所以说啊,咱们的E也给咱们提供这样的一个组件,去筛选出你这个容器当中啊,有很多的图表,只看哪一个。对吧,那当然呢,还有一个组件叫keep啊,叫books,这个单词写错了。这个组件可以干什么呢?比如说只有下载,你点击OK,那整个图表它会进行下载下来啊,下载成一张图片。
02:09
那一集,比如说再看底部还有个就是啊,选中某一个范围进行展示数据,这样的一个组件叫data zoom组件。那所以说啊,咱们呢,接下来呢,再花点时间去研究研究一下子他的其他组件。那咱们呢,去创建一个案例,那这个呢,应该是咱们的零五起个名字就叫组件。那咱们呢,去搞一下子,那当然咱们呢就全都从头去搞了。对吧,还是要多加练习的。那当然第一件事儿呢,是需要引包。那引包呢,咱们就不再去CDN去找了,直接拿过来就行。对吧,啊,这是第一步。第二步呢,你是需要准备什么呀,准备容器。
03:01
写一个哎,叫做准备。容器就是显示你图表地方。比如说啊老师呢,来个div带有类名的叫做box,那当然咱们呢,稍微呢写点样式。清除默认样式。以及咱们的pad。美联。当然咱们的这个点box这个容器。宽度啊,老师呢,给他来一个100%。之后呢,高度呢,咱给他来一个400。啊,以及呢,咱们呢,可以给它加个边框border,比如说一像素solid,来一个黑色吧,Black。那咱们呢,先保存一下子,去页面当中去观看一下,能不能看见这个盒子,哎,这是没问题的。对吧,那接下来呢,就得初始化咱们的实例了,那咱们呢,去搞一下子。写下就是初始化一实例。
04:02
那这里啊,第一件事儿呢,你得获取咱们的这个道对吧,获取容器。那咱们呢,Light一个,比如说就叫做down吧,等于。document.query select应该是咱们的点books。那一集初始化咱们的一叉实例。那咱们呢,来一个吧,Let一个比如说叫做my char,等于那应该是啊1study.in need传入down会初始化咱们这样的一个一实例。那咱们呢,打印一下子看一下有没有,万一没有呢,对吧,或者是万一单词写错了。对吧,OK,是没有问题。那接下来啊,咱们呢,就得配置数据了,哎,配置数据。那千万别忘记了,是调用MYCH的,这个叫做set op ion方法传配置对象。
05:06
对吧。那比如说咱们来一个吧,比如说标题。那就是抬头。比如说啊,咱们的这个文本呢,给它来个名吧,叫做ear组件。那咱们呢,保存一下子,看一下子有没有是有的。对吧,当然位置是可以调的,那以及颜色也是可以调的,以及还有子标题,那这里咱就不再去做了,对吧,那以及还有咱们的X轴xa叉X轴。比如说X轴呢,老师呢,给他来一些数据吧,比如说来个什么呢,就叫做呃游戏。对吧,比如说这个电影啊,比如说再来个什么呢,再来个直播啊,再来个娱乐。哎,娱乐对吧,这是X轴那一节啊,咱们呢,也来一个Y轴。对吧,那咱们呢,去保存一下子咱们的X轴和Y轴,但是Y轴现在是不是没有出来,对吧,当然咱们呢,给咱们的这个包点给它去掉吧,感觉不是很好看。
06:10
对吧。所以说咱们的X轴是有数据的,而Y轴是没有的,但是你要注意啊,整体的这个坐标体系,X轴你看啊,它并不是呃占满的,你要因为咱们这个盒子是宽度是100%嘛,对吧,左面留有空隙,右面也留有空隙。对吧,行,那咱们一会儿再说,那咱们接着搞。那一集啊,老师呢,想来一些图表,比如说来一个柱状图和一个折线图,那就是系列ERIES,当然是数组,数组里面呢,咱们需要传递相应的配置对象type。比如说啊,咱们先来个柱状图,那就是把。对吧,被来一些数据,那数据呢,咱们呢,就给它来四个吧,20 30 40和50,那咱们呢,保存一下,先看一下能不能看到咱们的柱状图,OK,是没问题。
07:05
对吧,那一集啊,老师呢,想在这个容器当中啊,放置多个图标,那咱们再来个折线图,那就是谁啊,就是这个LA。那一集啊,咱们呢,也给他来一些数据,比如说来个比上面高出十吧,三十四十五十和60,那咱们呢,去看一下刷新看下。OK,是没问题的。对吧,那接下来呢,咱们要说的这几个组件呢,咱分别说说,首先说第一个。就是他呢,给咱们提供了一个组件,就是你鼠标啊,一移上去OK,它会给你一个提示信息啊,其实呢这呢也是一个相应的组件。那这个组件叫什么呢?叫做to PE啊,就是它。那当然了,咱们呢,可以添加一个,哎,比如说这样的一个提示组件,那这里呢,老师呢,在这儿呢,也做一下笔记,哎,比如说这个是提示组件。
08:01
叫做呃,叫做to keep。它右侧的值呢,应该是一个对象,那咱们先看一下有没有相应的提示。对吧,看到了吧,是不是就有相应的这个提示了。对不?当然提示你还可以,比如说设置一下背景颜色啊,对吧,这些都可以的,那当然咱们得看人家相应的文档,比如说第1CHAR搜一下。那咱们去看一下官网,那当然这个呢,就是属于提示的这样的一个组件了,那咱们去看一下配置项。咱们找一下,就这叫做to keep。对吧,那以及是不是显示,呃,是否显示提示框组件,它默认就是显示。对吧,当然啊,它的选项有很多,比如说呢,咱们可以看到咱找一些比如说啊,你看比如说文字的这个颜色,就是test这里。Text style,这里面有color,它可以干什么,咱们可以看一下,就是设置文字的颜色,你看咱们呢,去设置一下,比如说设置一下这个提示框,哎,提示框文字的颜色那叫做test的style,它是一个对象,里面呢有文字的颜色,比如说来一个红色。
09:20
那咱们呢,保存一下子去看一下子,那你看文字是不是就变成了红色。对不?所以说这个提示框组件呢,也有相应的自己的配置的东西,当然配置的东西呢,还有很多啊,这里咱们就不再一个一个去看了。对吧,所以说这块呢,要注意这是有一个相应的提示的这样的一个组件。那么除此之外还有什么呢?还有个叫做legend的这样的一个组件,它是可以干什么呢?你要举个例子,比如说现在咱们这个容器当中啊,有两个图表,一个是柱状图,一个是折线图。那比如说有的时候我只想看柱状图对吧,有的时候我只想看折线图,而柱状图不看,那你就可以通过legend的这样的一个组件呢,去完成相应的业务,叫legend啊,咱们可以看一下。
10:12
对吧,就是图例组件展示了不同系列的标记啊,说白了就是展示不同的图表。但是这玩意儿怎么用呢,那这里呢,老师说一下。那首先说啊,它呢也是一个组件,那当然你也需要写Le啊,叫做G。那咱们先看你这么写有意义吗?咱们先看这么些,有意义吗?没有任何意义。对吧,因为你会发现整个页面没有任何变化。那这玩意儿怎么用呢?老师说一下。首先说将来啊,比如说这两个系列柱状图或者是折线图,我只想看一个,OK,你先给它起个名字,Name。比如name呢,咱们呢,可以来个呃,中英文都可以,比如说这个叫做柱状图。
11:02
对吧,那这块呢,你也给他来一个内,这个呢,咱们叫做折线图。当然那咱们的微整的这个组件,那将来呢,它可能点击两个按钮啊,我要么看柱状图,要么看折线图对吧,那这里呢,老师写一下就是系列啊切换组件。那这里呢,你可以给他来一个date date当中呢有什么呢,要么是柱状图。哎,柱状的要么是折线的。那这样呢,咱们的保存呢,去看一下,那咱们呢,看一下能不能切换相应的系列。比如说你看啊,现在老师只是看折线图对吧,折线图我也不想看了,那是不是全没了对吧?或者我只想看柱状图。对吧,或者两个都想看。那所以说呢,这是也是ears给咱们提供的一个组件,用于切换系列的展示。对吧,当然呢,还有一些其他的组件,比如说叫做two books啊,可以进行下载这个图片的,这个也是有的,咱们可以找一下叫什么呢?叫做to啊,叫做two books,这。
12:12
你看嘛,人家这儿也举了一个例子,你看咱可以预览一下。对不,你看比如说区域缩放。你看嘛,对吧,比如说这是还原以及数据视图对吧,用这种文本去进行展示,那以及还有什么呢?比如说还有这个什么折线图啊,柱状图对吧,还原以及还可以下载。对吧,那所以说呢,这个呢,也是一个工具栏啊,人家这个组件叫做工具栏,那所以说咱们也来一个,比如说这个呢,叫做工具栏。按工具栏组建。当然啊,这里呢,其实你都不用去写了,你可以直接把人家的这里的东西啊,你直接给他带走,他应该是谁呢?是two tips,这不叫叫叫叫two books。
13:01
它这里面这些东西啊,其实你就可以给他带走啊,当然咱们呢,还是呢,稍微去看一下子,对吧,你给我复制准了对吧,就是two tips。对吧,那咱就直接给他带走。对不?哎,到这儿,那咱们的就给他带走。那这里呢,老师呢,直接给他拿过来了啊,这个单就直接拿过来了,所以说呢,每一个它都有自己相应的一个作用啊,那咱们呢,可以看一下刷新。当然啊,那这个呢,咱是不是有复制错的地方了啊,这个复制应该是有出现错误的地方,那咱们的瞄眼应该是少了一个大花括号。应该是少了个大话括号对吧,那所以说啊,回到咱们这儿,咱们刷新你看一下这不就来了吗。对吧,比如说区域缩放。对不?哎,咱们可以看一下,你看吧。对不啊,以及这个zoo res还原对吧,以及下载你看这样的功能它不就出来了。
14:04
对吧,所以说这都是人家给你提供的内置的组件,这些呢,没有什么技术,当然啊,这个顺序呢,你可以先后可以进行调整,比如下载我想放在最前面,那这个呢,就是保存图片嘛,你看老师呢,如果给它放在最上面,那你看这个下载的按钮,它跑到哪去了。对吧,那你可以看一下是不是跑在最前面,所以说呢,这个谁先谁后呢,你也可以通过位置去进行调的。对吧,其实像这个呢,就是保存图片,那这个呢,应该是缩放。对吧,还有一些其他的,比如说这个还原对吧,哎,所以说这个工具栏组件的,也是人家给你提供的一个内饰组件,这个也没什么难度。对吧,那当然呢,还有一些组件,比如说像这个叫data zoom啊zoom就筛选某一个区域去进行观看。那它呢,也是有相应的这个组件,咱们找一下子叫做data zoom,咱们找一下找date开头的。
15:01
这不在这儿呢?对不?Data zoom对不,那data zoom呢,咱们也给他写一个,你看这个呢,咱也给他搞再顶着吧,Data zoom,哎,Data zm纵它要的应该是一个数组,对吧,那咱们先看一下它有没有出来。对吧,啊,那应该是对象。对吧,应该是对象,那咱们呢,可以看一下它这个缩放的这个功能有没有出来,你看嘛,也不是缩放,就是观看某一个区域的。对吧,你看这不就出来了吗?所以说这些东西呢,都是人家给你内置的一些组件,当然呢,里边呢,也有相应的配置项,都可以进行详细的去查看。对吧,那当然了,以及呢,咱们呢,还想去做一件事,什么事呢,你会发现啊。老师的这个容器啊,是100%宽,但是你会发现这个图表吧,它左面留了一部分,右面留了一部分。其实这个东西呢,也可以进行调整,就是GR的进行布局啊,就是进行直角坐标系的一个网格布局,对吧?它呢有相应的什么呢?比如说有调调什么调left呀,Top呀,哎看这吗,Lefttop right bottom都可以调的。
16:17
对吧,你看这块呢,咱们呢,也给他来一个,比如说调整咱们的这个布局。这个老师呢,给他这样替换一下这啊,那这块呢,老师呢,给他折上,那你看比如说这块咱也写一下笔记,比如说就是这个调整。哎,咱们的这个图表的布局叫做GRGRGR对吧,你看比如说老师left left呢,老师呢,让他来个多,让我们来个20像素。对吧,那咱们先看有没有往左边移留20像素。是过来了对吧,当然啊,他这个有点不够,那咱可以给来个30对吧,因为它旁边还有文字。所以你看嘛,是可以调的,以及右面你也可以调,比如说你看它有什么的right。
17:02
It right right,比如老师来个零,那你看右面是不是也过去了?对不,所以说呢,它呢也可以调整什么,调整相应的布局,对吧,比如说还有什么放top啊top。是吧,比如淘宝老是来个400,那你看吧,应该啥都没,因为总共就400高。对,不是top也可以调,比如说top咱给他来个20。对吧,当然还有bottom这些都可以调的,对吧?20不够,其实不用调刚刚好。对吧,以及还有包头这些东西都可以进行调整的。对吧,所以说呢,咱们的这个E,它使用起来呢,确实确实很方便。对不啊,当然他没有实现什么,是不是并没有实现想式。对不啊,因为咱们那个容器它就是固定宽固定高嘛。对吧,那所以说呢,咱们又学习了一下子这个E叉当中所提供的一些内置的组件,那这里呢,一定要给他搞到。
18:02
好吧。
我来说两句