00:00
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去学习一下子一。那首先说啊,可能有的同学会想,老师,一叉子是什么呀?他又能干什么呀?哎,这不着急,咱慢慢的去介绍。那首先说啊E啊,它呢是一个开源的JS库。他能干什么呢?就是能开发这些数据可视化。比如说啊,画一个柱状图,画一个饼状图,或者是折线图,当然3D类型的,比如说B图,它甚至都可以绘制。所以说啊,一叉子是一个免费开源的关于数据可视化这样的一个库。那所以说啊,咱们呢,先去慢慢的去了解一下,一。那么会了一茬子,那咱们呢,用它的语法呢,去绘制一下子,咱当年曾经做过的这件事儿,就是绘制一个柱状的。
01:03
那当然咱们呢,在学ears之前啊,还是需要对它进行介绍。那所以说啊,咱们的可以去找到它相应的官网,你就搜一。他呢是有属于自己的官网的,那咱们呢,稍微去了解一下ears。那首先说啊一。它呢,是一个基于GS的开源可视化图表库。那虽然说它是一个库,那也就是说它底层已经把业务把逻辑已经封装好了,可以拿过来直接用。而且右侧啊,人家这里还给你放了一个小小的一个啊图表,对吧,所以说它的功能是什么呢?就是开发这种可视化图形。对吧,而且呢,还是一个GS库。当然啊,ES呢是有属于自己的特性的,那咱们呢也稍微了解一下。
02:03
那首先说啊,Ears,一个使用GS实现的开源可视化库,那这要注意啊,人家是开源的了,那就是免费的。而且呢,ES啊,可以流畅的运行在PC端和移动端的设备上。那也就是说ears它既可以在PC端用,也可以在移动端上使用。兼容呢,当前绝大部分浏览器,比如说IE9以上,以及谷歌呀,各大浏览器厂商它都兼容。那么底层依赖的是矢量图形库render,那这个呢,咱们呢,在前面的时候也提过一嘴,当然这里不是咱探讨的重心。那么一啊,它呢,可以提供直观交互丰富,可高度个化性定制数据,可视化图表。对吧,那这里面呢,咱们来看一下它的特性,比如说。
03:01
丰富的可视化类型。什么意思呢?就是一叉子,它可以绘制各种各样的图形,比如说折线图、柱状图、散点图、丙图,甚至是K线图也可以绘制等等等,还有很多。当然有的同学可能说老师什么是K线图啊,哎,就是炒股的那个图线。所以说啊,ES它能开发的这个图形还是很多的。那当然啊,它呢还有一个特性,就是多种数据格式,无需转化,直接使用。什么意思呢?就是在一叉4.0当中,它新增了一个叫做贝赛的一个属性。它可以让数据。变得更简单了,就直接转化成图表了。对吧,叫做data side。那以及啊,咱们的E叉呢,也可以展示千万数据。对不?有人说大量的数据咱们也可以用一精展示。以及像E叉在移动端上也进行了优化。
04:04
对吧,比如说一叉子你绘制的图形图表图形它呢可以在移动端上使用,比如说呢,你可以进行哎手指的这个缩放或者平移。对吧,那么一也可以实现。那以及呢,还有什么多渲染方案跨平台使用?比如说甚至咱们的ES啊,它还可以跑在no的环境上。所以要注意,一是可以跨平台使用。对不,那以及呢,像这种花里胡哨的图形图表,那都可以绘制。对吧,那以及还有多维的数据,什么叫多维的数据呢?一般呢,只有一个X轴Y轴,但你看它是不是有多个,就是叫多维数据的展示,这都可以,当然这个如果说你要自己慢慢去绘制,那这个容易真的要绘制这个出人命了,对吧,这个还是挺复杂。那以及呢,还可以动态的展示数据。
05:01
比如说啊,你的展示的数据是来自于服务器,那当然你可以通过as获取动态的去展示这些数据。对不啊,这是它,当然啊,还有一些花里胡哨绚丽的特效,就比如说像这种效果。对吧,那以及呢,还有三维的啊,比如说像地图啊,当然咱们这里呢,不把三维当做重点,对吧,如果你对于三维感兴趣,你可以了解一下three.js。对吧?啊,所以说呢,这个呢,是咱们的一个一叉的一个特性,当然咱们呢,去看一下它的视力,它都可以完成哪些。比如说折线图。对吧,以及还有像这种的柱状对吧,这是比较常用的以及饼图。对不啊,以及散点读。看这三点对吧,以及地理坐标地图,那这些呢,都可以用一叉子去完成啊,当然画了个老牛以及K线图炒股的。
06:06
对吧,哎,所以说用E叉可以简单的非常简单的就给它绘制出来,以及像什么雷达图。对,不玩游戏的应该见过啊,猥琐发育,别浪。对吧,以及还有什么何须图啊,可能有一些图你都没见过对吧?还有热力图,这些咱们大概都看一下,他能做哪些事儿,以及关系图。对不?哎,你看这种关系图他也能做,以及路径图。对吧,哎,还是挺挺好看的竖图啊,这种竖图像他曼的绘制那种的流程图对吧,以及什么矩形树图他都可以搞。所以说咱们的一叉子啊,他能开发的这个东西呢,还是很多的,对吧,那这里呢,老师呢,就不再带着你们一个看了,比如说3D的地图他都可以。对吧,甚至你可以点进来稍微看一下。
07:00
对吧,哎,当然他可能要渲染需要一段时间。那所以说一叉子他所要能完成的事儿啊,还是比较多的。那所以说啊,咱们呢,先去看一下一的一个基本的使用。对不,那所以说回到咱们的这个项目当中,老师呢,新建一个文件夹叫做什么呢?叫做一叉的一个基本的使用。那这里啊,老师呢,新建一个网页,那咱来一个啊,找你来一个叫做1CHAR的一个基本的使用,哎,基本的使用,那咱来一个叫做零一吧。对吧,那这块呢,得来一个点HTML。对吧,那么这里呢,老师说一下的,那么ears呢,是有属于自己相应的这个使用文档的。对吧,比如说你看他的首页当中,比如说快速入门这里。对吧,它是都有相应教你怎么去搞的。
08:01
对不什么快速上手,那这里啊,老师呢,就不想带着你们一个一个看了,那咱呢,还是一行一行代码的去写,这样呢,写出来之后呢,你对于他的认知呢,也会更高一些。对吧,那首先说一叉啊,它是一个GS库,那所以说你得先拿到它的GS的源码。找到它的这个库,那所以说啊,咱们呢,可以去找一下咱们的Bo c d啊去c d botc dn。对不找一下它的依赖包对吧,那应该就是这个,那咱们搜一下,你就搜谁呢一。对吧,这底下不就出来了,对吧,那咱们呢,可以找一个版本啊,就比如说随便找一个吧,5.1.21叉复制一下它的script标签。那所以说啊,咱们呢,把它扔进来,那这块是引入什么,引入咱们的ES依赖包。对吧,那当然啊,这里呢,老师呢,还是稍微的带着你们呢去看一下。
09:05
对吧,看一下子人家这个说明书,人家教你怎么整,对吧,快速上手对吧,那首先说人家告诉你了,第一步干什么,第一步呢是需要引入E。那咱是不是引了对吧,完了接下来人家告诉你啊,人家这个DEMO是绘制一个简单的图表。对不,在绘图前我们需要为ears准备一个定义了高度的,呃,倒容器,对不?那就说白了就是在包当中加了一个div,那也就是说啊,咱们需要准备一个容器,哎,准备一个容器。那这个容器啊,哎,容器就是显示图表的区域。比如说咱们呢,给他来个div。那咱们呢,也可以给这个容器啊,稍微来点宽度和高度,对吧,比如说星啊marching。
10:01
以及呢,咱们的pad为量,当然咱们的这个容器呢,老师呢,给他来个宽度,比如说800小组。高度呢,咱给他来一个400像素,OK,没问题。好了,那咱们呢,再往底下看看。你看啊,也就是说准备好容器之后看这。然后就可以通过E叉S的音译的方法初始化一个一叉实例。并通过set option方法生成一个简单的柱状图。它底下呢,有完整的代码,你看你看咱们可以看一下。首先说第一件事,引包咱已经完成了,第二个准备一个容器咱也完成了,那剩下的这部分是不是要写GS代码?对吧,你自己瞄一眼,这是不是要写JS代码?对吧,那咱们看一下,你看他顶上都做了一件什么事儿,就是基于准备好的道去初始化咱们E实力。好,那咱们去搞一下子,写下咱们的GS。
11:01
你看啊,人家要求是什么呢?是基于写下,看人家这是怎么写的吧,基于准备好的道写下就是基于。啊,基于。准备。好的,到初始化一个一的实例。那首先说你要基于准备好这个do,那你得获取这个do,咱来呗,Let一个do等于document.query select,咱们的谁呀,是不是div?那这里呢,要注意一件事,当你引入咱们的E叉依赖包的时候啊,它对外暴露了一个对象。咱们呢,可以运行一下,哎,您可以看一下copy pass一下看这。来老师呢,给他这给他呃跑一下看一下,你看虽然说就跟咱当年的GQ是一样,你引GQ他对外暴露的是Dollar,那你引进来的是ears,它对外暴露的是ES对象。
12:04
它呢有一个方法叫做阴逆的可以初始化咱们的什么呀,初始化E的实力,而它的第一个参数呢,就是咱准备好那个容器。那所以说那第二步咱就可以干什么了,就是创建咱们的一实力。比如说咱赖一个叫做my char,当然你叫啥都行,那就是1CHAR对象打点阴你的方法。传入咱准备好这个道会创建出咱们的一个一叉实例,老师呢给他叫做什么叫做my char。那咱们呢,可以刷新看一下,OK,那这个不就是一叉类的一个实例。对,不,但是他的身上呢,有一个方法叫做set option,咱们看一下有没有。对吧,哎,这是没有的,那它的原型上应该是有的,叫做set option方法,这里老师就不再找。
13:02
它是干什么呢?是初始化咱们的这个图表的就是配置项,你看人家这也说了,咱也可以看一下啊,指定图表的配置项和数据。对不,那这块咱也准备一下子,第三步干什么准备。准备图表的,指定图表的配置项和数据,那咱一想,哎,指定啊图表的。配置项与数据。啥意思呢?就是MY这个对象。它是E的一个实例啊,你看它呢,有一个方法叫做set op option方法,它里面呢,需要传至传一个配置对象。那什么是配置对象,就跟咱VE传进来那配置对象是一样的,对吧,你没有商量的余地,人家K叫什么你就得写什么,不能瞎写胡写乱写。对不,所以说这块在干什么,在指定图表,哎表。
14:04
哎,图表的配置项与数据。举个例子,你看啊,咱一点点来。比如说啊老师呢,想完成咱这样的一个案例,那首先说左上角这是不是有标题。对吧,那所以说它的配置项里面呢,你可以写个什么,写个抬头。这叫K右侧的值呢,是一个对象,说老师你咋知道是一个对象呢,它是有相应的配置文档的,咱们一会儿老师会带着你们看的,但是咱们自己先写一下,去体验一下。那这个是什么呢?老师说一下子这个呢,就是咱们的图表的标题。它里面需要什么,需要test,就是标题是什么,比如说再来一个叫做数据可视化。那咱保存一下刷新,你看一下的有没有标题。是不是有了?对不?当然还可以写什么,写子标题这块老师写下,这是主标题的设置,哎,主标题的设置。
15:04
当然呢,它还有什么呢,还有子标题。叫做子标题叫什么叫做sub test,比如说咱来一个数据可视化,叫一的一个基本的使用。那咱们看一下它有没有相应的子标题,这不也有了。对不,所以说这马上吧,很好用,很香,你会发现它不像咱当年用can瓦斯绘制的,那绘制的这个费劲,你这回你只要传进一些配置对象,它自己就生成了。对不,哎,这是他。那一集啊,你看咱们这个,咱们这个是不是要画一个X轴Y轴。对不,他也可以。那这个呢,比如说咱来一个,比如说X轴的配置项,叫做X轴。X。轴。的配置项,比如说它叫做xa X is是一个对象。
16:00
以及呢,还有Y轴,那就是Y叉啊,Y is也是一个对象。那这样咱们先看有没有X轴和Y轴。哎,你看有没有,是不是就有了,一个代表的是X轴,一个代表的是Y轴。所以说这玩意儿吧,它非常非常香。那以及你看,比如说X轴这边老师写这是啥,这是Y轴。哎,Y轴的配置项。要注意XY就不用说了,H叉S就是轴的意思,这个英文本身的意思就是轴,你看比如说你看咱这个,比如说X轴,你要显示什么,显示食品、数码,服饰、箱包,而且是均粉。对吧,那咱也可以来,你就给他传什么X轴的数据。对吧,叫贝塔,它是一个数组,为什么你想X轴显示的数据很多,那一定是数组。那比如说咱来一个叫做啥叫做衣服,对吧,咱随便写一写,比如说直播。对吧,比如说游戏。哎,比如说呃,再来个什么,再来个电影。
17:04
对不,那咱们保存一下,你刷新,你看一下咱的X轴是不是就来了。对吧,当然Y轴是没了,Y轴咱们一会来说,但你看X轴是不是就来了,而且还是均分的,而且这个刻度它都给你整出来。所以说他这玩意儿真的是很香很香的。对不,所以你会发现你这边写OK,那边就来了,当然咱的Y轴咱们先不用管。对不,而且这块呢,你要注意你要绘制的是什么样的一个图表,是不是一个柱状图。对不,那你还是得通过一个配置项,叫做S系列ER啊看一下。这个单词有点记不住了。咱们呢,去瞄一眼啊,这个单词叫serious。就是这个系列SE I esers这个呢,是系列的设置,哎,系列系列的设置,设置什么呢?比如说你要呃,绘制什么样的一个图表,绘制什么样类型的图表。
18:09
对吧,以及数据的展示,数据的展示都是在这里设置,在这里设置。对,不但是数,它是一个数组,数组里面你是要传对象。比如说举个例子,老师呢,现在呢,想画一个什么,想画一个柱状图,OK,那你就来来个叫type。那这个是什么呢?这个呢是咱图表的类型的设置写一下叫做图表。图表哎,类型。哎。行的设置。对不?比如说咱想来个什么类型的,来一个叫做柱状图,那就叫八。对不,那咱们呢,先刷新,你先看一下能看见。看不见,为啥呢?因为你柱状图,你得给人相应的数据。所以说这个是什么呢,这个呢是呃,图表的数据。
19:01
比如说咱来个date来多少呢?比如说来个十二十三十和40,那你看咱的柱状图是不是就来了。对不,那所以说要注意这块serious可以干什么,就是绘制什么样类型的图表对吧,通过type设置,以及数据是多少啊图表对吧,数据是多少,你都可以进行设置。当然,有的同学说,老师,我喜欢饼啊,饼状图那就是派。对不,你看嘛,这就是丙图。对不,那假如说你喜欢折线图,那就烂折线图那就出来了,你看吧,超快的。对不,那当然咱们想要的啥,想要的是这种呃,柱状图,那就是把。对不来bar bar那这块老师写bar是什么,是柱状。对,不烂是折线的。以及派是丙图。对吧,那所以说你看那咱这个柱状图不就来了吗。
20:03
对不对,对吧,哎,那当然有的同学可能说老师我不喜欢这个颜色,我喜欢红色,那咱来呗,比如说color。哎,Color为什么色为红色,那咱们看一下柱状图的这个颜色有没有发生变化,是不是就红色。对不?哎,小手一放,还有小手。对吧,那当然有的同学可能会说,老师,那我想让这个标题居中,能不能能。但是这些东西你得看人家的文档啊,你看。它这里面呢,有一个叫做配置项。你看配置项真的很多,你看这不是set option里面这个配置对象。它的配置降真的是好多,又成千上万了。你看举个例子,比如说你想让人家的这个标题居中,OK,那你就找找谁找title,你看嘛,这不是title标题嘛。对,我想要的文本居中,或者是文本的颜色,你都可以去搞。
21:02
对吧,比如说咱们看一下,你看这比如说test的style,你看它是干什么。Text style它呢是主标题文字的颜色,那你就可以设置text style是一个对象,对象里面有一个color属性,你可以设置颜色,你看这些都可以调。对吧,比如说这个是主标题的颜色,写一下啊,叫做主标题的颜色,那就是test的style。它里面呢,有一个咖的属性,比如说咱给他来一个青色,那咱们看一下主标题的颜色是不是变成青色。对不,所以人家这都是有相应的文档的,那举个例子,比如说咱想让咱的这个文本居中,那可不可以,可以咱找一下。它有一个叫什么呢?不是这个test是谁叫left,你看left。Title标题组件离容器左侧的距离。
22:01
啥意思,就是你这个标题距离左侧的距离,它呢,你可以写写这个值,具体的像素值也可以写left center和right。对不,你看嘛,比如说咱来一个。对吧,设置这个标题的位置,比如说来个left,为什么,那你看是不是就居中了。对不,咱刷新你看是不是就居中了。对吧,当然子标题的颜色也可以设置。啊,这里咱就不再探讨。当然,有的小伙伴可能会说,老师啊。你看咱的这个Y轴啊,它没有显示,你看嘛,咱这个Y轴这条线是不是没有显示,OK,它可以显示。但是你还是得看人家的配置项。那你得找谁,你得找外轴。对不对,那Y轴呢,咱们看一下它应该是谁呢?这个还真得找一下。啊,找一下应该是这个叫做H叉了。那这玩意儿是什么?是否显示坐标轴轴线?
23:02
那你说咱要不要显示这个Y轴的坐标轴,轴线要显示。所以说A是A叉,S烂是一个对象,对象当中有一个属性叫做受。对不,那咱给他来嘛,找到Y轴。对吧,那这是什么?显示Y轴的线显示啊Y轴的线。对吧,那也就是他他呢有一个属性叫做兽。哎,叫做受受,为什么呢?为触,那你看Y轴的这条线是不是就出来了。对不?那当然有的同学可能会说,老师啊,你看啊,咱这个Y轴上还有刻度。那X轴有刻度,它默认就Y轴没有,那能不能设置也能,你也得找人家的文档。他们有一个叫做什么,咱们这个还真得找一下子,是不是叫他。啊,叫做A叉T对吧,坐标轴刻度相关的对吧,也是一样,叫A叉t show为true,是否显示坐标轴刻度,那咱要显示你来呗。
24:03
那也是一样,显示Y轴的刻度。那就是呃,叫做H叉S叫叫叫叫叫什么T,就这玩意儿。对吧,咱给他拿回来。CTRLC对吧,里面呢有一个值叫做受受,为什么呢?为。对吧,那你看咱Y轴的这个刻度是不是就来了。对不啊,所以说你会发现一件事什么事一叉去开发这些数据,可视化图表图形还是非常快的,但是它里面的配置项很多。对不,那将来呢,你得耐住性子去看一下每个配置项,因为配置项真的是超级多的。对吧,那所以说这是咱们对于E叉的一个基本的使用,也就这几步,对不引依赖包,准备容器,初始化E叉实力以及设置它的配置项,当然配置项需要参考着人家的文档。
25:01
对吧,所以说这是一的一个基本的使用。
我来说两句