00:00
就是下面呢,我们要实验的效果就是当我点击图表显示,那在这一面中可以把我们表中的数据按照一种就是图表的形式显示出来,这个显示可以是个柱状图,可以是个饼状图,也可以是个折线图,那咱们下面说一下这个该怎么去做。这里边啊,看一下我的课件中,咱就来到这个地方,就是零三这个比中,这位置中呢,我们要做图表显示,咱需要用到这么一个组件才能做到显示,这组件是什么呢?这个东西叫做ear。呃,这写错了啊,Charts e叉,那我给大家做个介绍啊,E呢是前端用于图表显示一个工具,就是页面中的一个效果,而E叉呢,我强调它早期是百度的一个项目。但是他后来呢,我这里加一句话啊,就后来百度把这个ears。啊把。
01:00
一叉。怎么样给他就是捐给了这个这个组织。阿帕奇作为阿帕奇一个这么一个开源的一个东西啊,所以咱们现在再看到一叉的其实是属于阿帕奇的。这个啊是咱们的一个说明,就是它有一个历史,早期是百度的,后来百度把它捐给了阿帕奇,阿帕奇做了一个维护啊,所以现在我们再看它是阿帕奇的这么一个一叉S,那这一查可以做什么,这里写的它提供了常规的就是各种图,比如什么折线图,柱状图,饼状图等等啊里边有各种效果,那咱看一下它这个官网。这是它那个官网的地址啊,但是目前地址应该是发生了变化,我们来访问一下啊。这个地址叫E叉点百度点。com。但是大家看啊,我一访问它就变了跳转。到这个3W点1h.com啊,这是它一个地址,其它也是阿帕奇一个东西,这是它的官网啊,包括你看下面啊这个位置。
02:00
说这个阿帕奇一查,是阿帕奇里边一个项目,他现在已经由阿帕奇去维护了啊,咱就看这个网址啊,然后怎么看呢?首先我们看啊,在里边有一个叫文档,里边有个叫教程,咱们把教程先点开,在教程里边有第一个,第一个叫做五分钟上手,也就是一个快速入门,他就告诉我们这个一叉S该怎么去用,咱们快速浏览点啊用法很简单,是一个固定结构。首先咱们看第一步操作需要获取到E叉,那什么怎么获取呢?说的简单点啊,E叉本身就是一个JS文件,咱需要把JS文件拿过来引入,然后就可以操作,那你怎么引入,你可以下载,或者说可以这么做。这点应该都认识啊,N PM in到是不是下载,所以这些都可以做到,然后做到之后咱看下面怎么写啊,在页面中咱们把文件可以引入,或者用voe文件NPM下载,然后有之后咱就写这么一个结构,在结构中我们先建个div,就是指定你那个一叉图表的位置,然后下面有这么一段。
03:09
这样所有代码,这个代码是一个固定结构,不管你是做各种图代码,都是在这里边做设置。这个啊是一个快速入门,在他的官方中就给我们写出来了,里边这个过程啊,所以大家把这能看懂啊,然后一会儿咱会测试啊,然后除了它之外呢,在它的官网上还有一个地方叫这个实例,对把这个打开啊,什么叫实例呢?就是它针对我们的不同的图,在里边都有实现这种相关的例子,比如说咱们看几个常见的来看第一个。折线图就这个把这个点开大家看啊,就这个效果,包括你看在折线图中代码是不是都有,咱们把代码直接改就能改中的效果,比如说咱再看一个这个图叫做。柱状图它里边也是有各种效果,包括你看代码也都有啊,咱用代码能改出来,另外还有什么饼图,包括什么各种图都有,而它里边还有一些比较复杂的图,假如咱看这个图。
04:10
这个我也不知道是否见过啊。这成图如果你炒个股,应该知道应该叫那个什么K线图啊,就是炒股,比如什么变红变绿等等啊,它里边也是提供的代码,只是这个结构附带点啊,但是不管怎么样,他在这个一它的里边,把咱们目前用到的比较常见的各种图效果里边基本上都听出来了,所以咱们在写的话,如果你在做这种图,它的前端部分,就是页面部分,这些效果全有用它咱就可以快速改通的效果,而咱们真正要做的是什么,咱重点写的是接口。因为大家注意啊,比如咱以这个为例,你看啊,这边有个叫date date中什么意思,看这个。这是什么?就是你的X轴,这是它的Y轴。这个不知道这位是否还记得啊,应该是我们很早上学之前学到的啊,X轴Y轴这叫什么?
05:05
是不叫坐标啊,就有一个坐标,它在艾轴里边显示是这个数据,就是你的日期,在Y轴中显示你的数据,然后最终这张图,而咱要做的是什么,把你的日期和数据咱都要通过数据库查出来,因为目前它是写一个固定值,咱一会儿做的是通过数据库把这数据查出来返回,然后到里边,然后把咱的数据用这种图做个显示啊,这是我们一会要做的事情,而这个查询中有个特点啊。因为大家看他现在这个数据是一个什么格式。各位看到是不是一个带中括号的,也就是说是不是一个数组形式,所以我们再返回数据中,咱必须要给它返回一个数组格式,如果说你返应别的格式,它不认识,它只认数组格式,就是日期也好,数据也好,都必须是数组格式,这单一会重点,其实写的是接口,通过接口把这个咱可以做到。
06:02
所以这个啊是关于一叉一个简单说明,就是你记住它是百度一个项目,后来就是交给这个阿帕奇去维护了,然后它用于各种图标显示,在他的官网上,把我们能看到的比较常见效果,它的前端都有效果,咱一会儿直接复制改就可以了。而我们重点要写的是它的接口部分,因为咱的接口要返回,它要求这个数组格式,它才能做显示。啊,这个咱们一会来实现,所以各位对一叉子有个认识啊,然后一会儿咱会先做一个简单的入门,让大家感受一下,然后最后把我们的页面找出来,然后最终写它那个接口的封装,啊,所以这是关于E叉一个简单的介绍。
我来说两句