day16【统计分析功能】/12-尚硅谷-谷粒学院-统计分析-图表显示（页面整合）

就是下面呢，咱们先用ears做一个简单的入门，然后咱们在咱们的功能中整合进去这个一叉S啊，咱看怎么来做啊，那我们来做入门，那怎么入门呢？第一个我现在啊，我就直接下载一个ES文件。这个文件呢，你可以到这里下载，而我在这个资料中给大家应该听出来了，我们来找一下啊。在前端相关资源中这个东西。叫E叉s men.js，再用它来实现我们的功能啊，这个我已经听出来了，就是这个东西啊，那咱们写一个简单入门啊，咱看怎么做啊，首先第一个我就在这里边，你先关掉啊，我先建这么一个页面，就am页面，咱做一个简单测试，我把页面就放到这位置啊，在里边我先建个文件夹，比如叫ears。DEMO，然后在DEMO里边咱建这么一个文件，呃，这里啊建一个文件，比如文件就是零一.htl把这个创建啊，在里边来写个入门，然后我把这代码加个感叹号生出来啊，这是一个结构，生成之后呢，第一部分在页面中引入这个E叉文件，我把这个JS文件就先复制到我们这个文件夹中来啊，然后咱给他引入进来。

那我来复制啊，在我1010。这里边E叉S这个把它拿过来，拿过来之后在页面中咱们把它就引进来，拿回来引入一下啊，加一个script。然后加个S2C里边加这个一叉S问点S这个咱最后引入这是它的第一步啊，需要有这个，也就是咱用项目中用NPM因死豆下载一代就可以做到，然后第二部分在页面中呢，咱需要加上一个div，加div的目的是为了能够让你这个就是图表在这个位置进行显示，就是指定图表显示的位置。

然后div里边咱需要给它起一个ID的这么一个名字，让它用于显示，那这个我就从这个官方文档中你就复制了，比如现在我就把这个复过来啊，咱们加上这么一个代码，就是一个div里边写一个ID，然后你可以设置它的样式，比如它的宽，还有它的高，然后写完之后，下面咱就写这么一段，然此代码在里边写它那个图表，这个代码是一个固定的一个结构，那我从这里边咱复制这代码，不需要各位敲边，但是要求能看懂这个结构啊，那我把它。复制就是这个代码。把这个啊，咱拿过来。到我们这里边，然后咱们看一下这个结构，它该怎么去做，我们要做的话，就根据结构给它做个修改就可以了，咱们看啊，它的做法啊，首先在扎中的第一句话这句话。可以看到啊，这句话什么意思呢，这个咱应该见过。

document.get I白地是不是取到你的标签呀，通过do操作，而它表示什么意思，就是取到你这个div这个标签在里边做个显示啊，这是第一步，然后第二部分有一个单词叫option，就是选项目设置你显示这些内容，比如里边这些内容主要是两个地方，一个是X轴，一个是Y轴，就是它的坐标，X轴显示这些，Y轴显示数量，然后最终用这个买差的，就咱定义的这个地方向里边设置这些就是这些选项，这个就是一个基本结构啊，咱用它就能有一个效果，而我们要做的话，那咱就是把。这些数据改成咱数据库的内容，包括这标题改成我们的标题结构是不变的，那这个我们就快速做到了啊，然后做到之后咱们把它执行，看一下它的效果什么样的，这个执行。右键啊，到里边大家看。这个图是不是就是一个柱状图效果，你看里边啊，有X轴有Y轴啊，包括这个这叫图例嘛，就是红色显示这些东西，包括它有一些自带的效果，比如说你看啊，我光标移到上边。

这里边是不是有这个显示，包括它会变亮，包括点这个就隐藏，再点就打开，这些都是由一叉S给咱们封装样式，所以这是一个最基本的一个效果，用它我们做了一个简单的柱状图啊，就这么一个结构，所以各位啊，把这知道啊，不需要你去记，用的话用这个改就可以了，因为结构是固定的。那这个是一个柱状图，比如说咱们再演一个效果，咱再做另外一个图，比如咱来一个折线图。我再写一个啊，折线图零二也是TL把代码生成，然后在里边结构跟它类似，它里边也是引入这个JS文件啊，这步不变。引入之后下面写一个。Div。然后在div下面写那个Java代码，这些代码我也复制一下啊，我就从我的课件中直接复制了啊，就是前面这个图来做了，然后有个折线图，在他官方有这文档。

然后咱就把这一段铺过来啊，是一个折线图。就是这里。这咱们。拿到这个下边啊，然后大家看啊，跟刚才差不多，只是换成叫折线图，它里面也是有X轴，还有它的Y轴。然后这个拿回来之后，把它咱也是直行看一下，结果各位看是不是折线图啊，就是这么一种形式啊，就这是柱状图，这是折线图，所以咱们把这个简单入门就做到了，各位按照它能改就可以了，比如说咱们一会儿在我们这里边，你做个柱状图线图都可以啊，那我就做个折线图，能把效果做到，也就说在咱们那个日期，然后对应你这个，比如你的注册人数还是什么这个数量用折线图咱做个显示。啊，这个啊，关于一一个来入门，咱做到了，在他的关文档中这些例子全都有啊，就各种例子里边都包含进去啊。

给各位啊，给他指导一下啊，然后这个做到之后，咱下面在我们的项目中就来整合一下，这个一查，那怎么整合，咱先做一个最基本的一个准备啊，就是先把页面的效果咱先给它弄出来，然后咱再写接口做一个完整整合，那我说一下怎么来做啊。这个给大家写到我们这个图上啊，因为刚才是一个入门，咱现在写核心部分，在我们的项目中整合这个ear。那怎么做呢？给大家说明啊，首先第一步呢，你需要在我们项目中先下载这个E叉S的这么一个依赖，把这依赖需要先下下来，那怎么下载用咱们之前都学过那个命令叫做NPM，因此的。加上你这个一叉用这个可以做到啊，Npmme下载我这个在课件中给大家也写出来了啊，只是我这个指定了一个它那个版本啊，包是一个局部安装啊，所以咱们用这个把它做安装，也就是这个命令，你在这里边的终端中把它执行就可以了，我这个应该是提前装过了啊，如果各位没有装，按照这个执行。

那做法各位应该都知道啊，你用终端打开，然后用这命令一回车，它就会联网把这个下载下来。这是咱要做的第一步啊，有依赖才能往下来做，那我这里边检查一下啊，我应该之前下载过，咱找到那个叫E叉，就是E开头的。E叉往下看啊，Ec那个。C。就是这个啊，这是我提前下载好的，这刚才刚看到哪去了ec这里啊，这个下载好，如果没有各位需要给他下载一下，因为这里边我们要用到啊，这是第一部分，然后这个下载之后，咱下面把这个页面的效果先弄出来，然后咱们再写那个接口，就是先做一个页面的一个效果，那页面该怎么做，给大家来分析一下哈。

第一步下载依赖，然后第二步咱弄那个页面。啊，就是整合页面，那页面怎么做，看我这个就是项目中啊，咱打开啊，在我们项目中的各位看啊，在统计分析中的这位置是不是叫图表显示哦，也就是说我们点图表显示要这样的功能，那这功能该怎么做，给到各位做一个分享啊，就是我们点这个地方。图标显示咱要怎么去做。那我来画一下啊。当然这个做法呢，有不同的实现方式啊，我们这里边采用新的一种方式来做，在实际公司中，这个过程肯定是由你公司那个产品他给你去设计，然后根据他这个设计出来的结果进行开发，那我们说一下我们这里边想怎么来做啊，给大家来说一下啊，就是现在呢，我们要做图表显示。

因为在我们这个就是表里边存的数据，包含它的日期，是包含这些数量，包你的注册人数，登录人数，什么视频数等等，所以我们现在咱这么来做啊，就是现在当我点击图标显示在我页面中，它要显示这么一个地方，就是一个输入框啊，有一个输入框。然后再输入框中有这么几个内容。我画一下啊，首先第一个。第一个内容，第一个是什么呢？就是我们现在要显示哪个数据，什么叫哪个数据呢？大家看啊，我这里边有注册人数，有登录人数，有视频数量，那我们可以怎么做呢？在这里边我们就写个下拉列表，然后选择，比如现在我想显示登录人数那个图表，那我选择登录人数，我想显示注册人数，就选择注册人数，咱就写一个叫下拉列表。

然后来显示你这个内容，就是你要统计那个数据，而统计这些数据呢，就是在我们这个术语中有一种说法，它叫什么呢？叫做统计因子，就是你是根据注册人数统计，还是登录人数还是视频数啊，所以我们第一个就选择它那个统计因子。然后除了他之外，咱后面还要有两竖框，就这两竖框。这两输入框干什么呢？各位看到啊，因为我这里边是不是有这个日期，而我现在表里边，你这表中可能存了1万条数据，而1万条数据咱不可能都给他在表中显示，肯定显示不下，所以大家给他来一个什么显示的日期范围，第一个就是我们那个开始日期。然后第二个是我们那个结束日期啊，结束日期，比如现在我想显示3月1号到3月10号这个范围中的注册人数，这就叫开始和接入日期，这个叫统计因子，就你要显示哪个值，你是注册人数还是登录人数，还是什么其他数量，所以咱现在这么来做啊，当都选择之后，我们最后加个按钮，比如叫显示它就把这值最终显示出来。

啊，就里面有一个显示按钮，当我们选择条件之后，一点显示，那这些值最终就可以显示出来，所以咱现在这么来做，然后显示之后在咱们的页面下边，根据你的这个。条件显示成我们想的一个结果，比如我们最后显示成就是一个折线图效果，或者一个柱状图啊，咱就做个折线图了，假如说折线图是这个样子。那咱们给他就做这么一个显示。所以这个啊，是咱们要实现的这么一个效果。当点图标显示进入到一个输入框地方，在输入框里边的第一个我们可以用下拉列表选择要统计哪个内容，是登录还是注册，第二个选择你的开始时间，第三个选择你的结束时间，当咱们一点显示，它根据这个时间和你的统计因子，把这个数据用个图表形式就检出来。

这个啊，是咱们要这样一个过程啊，所以咱们一会儿就这么来做的，各位啊，把这需求给他要知道。这个啊，我们做这个说明，然后这个说完之后，咱下面把这页面给他来弄一下啊，就来整一下页面，在页面中咱找到点击我们这个图标显示，它进入到的肯定是这个叫。ST中这个受这个页面，在页面中咱就写上这么一个输入框，这输入框不需要各位敲一遍，我就从课件中直接就输入过来了，就是里边的。这个地方我把这个啊，咱们复制过来。然后放到里面去。复制之后在下面我们加一段扎这个结构。先写它的初始值，先不让他报错，然后咱们再看一个效果啊，我写个date。

然后加上一个。瑞吞，在瑞吞里边咱们看啊，这个过程中有一个V-model叫色值OBD，里边就是三个值，一个是你的统一因子，你看我这里用的是一个加列表，第二个是开始时间，就是这个比例，第三个结束时间是按的这两个里边用都是日期那个数框，所以咱们用search o BG，我们做封装，咱就先来个对象。这样的话啊，把这个页面我们就给它做了一个出整合，就是有一个数框啊，包括这个值默认啊，先让他来一个。False。这个啊，整出来了，整合之后咱们把效果先看一下啊，目前是什么样的，我们来试一下啊，各位注意，比如现在点击图表显示到我们的这个界面，在这个界面中的第一个选择你的统一因子，比如我现在想统计注册人数，这是第一个，第二个选择你的开始时间，假如我们统计3月1号开始时间，结束时间，统计3月30号，这是它的一个条件，最后我点这个查询或者生成一点。

他根据这些条件，把我们的数据用个折线图做个显示，这是我们写的一个立面部分，咱们就是这么来做的啊，所以大家把这个给他知道啊。就是咱们做的。这么一个效果。我把这个截过来啊。然后这个做到之后啊，咱下面继续往下来弄啊，就是下面咱们把这个，就是现在我先把这个静态页面先整出来，就是我现在我想实现一点查询，咱先有个折线图，咱先做个静态效果，然后一会儿咱再查数据管做到就是先做成这个样子啊，那咱们看怎么做啊，过程刚才我们都写过了，那我就快速整合一下啊这个过程。那怎么做呢？首先第一个啊，因为咱要用到这个E叉E叉S呢，刚才我已经下载过了，所以我们首先在页面中先把E叉S先给他引进来啊，这是必须的啊，引一叉S才能做它的这些操作啊，这是第一部分，然后第二部分，当咱点这个查询，他要调咱这个方法叫收chart。

那我在下面把这方法我们就做这么一个创建。我先来一个。啊，就create到。这么一个方法啊，然后可以写在下面，再写一个叫methods。麦里边写一下，我那方法叫这个收char，在收叉的里边，咱把那结构来写一下啊，包括这位置也有一个点，然后结构就是咱们刚才写的代码，我把这个啊直接复制过来。就这段代码，把这个拿过来，再让它先有这么一个静态效果，然后一会儿咱再慢慢去完善。这个啊先。复制过来啊这段，所以这样的话呢，目前里边应该是有一个折线图的效果。

这个啊，我们就出做到了，然后里边各位注意，这个必须要引入，不引入它下面会报错，说这个没有定义啊，因为你没有一里面的一个相关的一个依赖。这个啊做到了啊，然后做到之后效果咱先试一下啊，一会儿咱再查数据库。那我现在来到里边啊，比如现在我点图标显示。啊，其实这是我目前没有做啊，咱先这么看，我选择一个注册人数，开始时间，结束时间，然后点查询，下面是线图，咱们要做的就这个效果，只是说现在数据是写固定，而咱们马上做的事情就是把这个图上这数据通过数据库查询，做一个图标显示宝贝这个条件做到这个啊，是咱们静态页面的整合，我们就做到了啊。然后做到之后，下面咱们重点要写的是什么呢？就是接口，因为前端并不复杂，就这么一个东西，咱写接口，而接口中要干什么？

大家看一下这个数据中啊，咱仔细看。因为在我们数据中呢，有两部分数据，一个是X轴，一个是Y轴，在X轴中是什么，大家看这些值是不是就是星期啊，或者说就是你的日期。所以这个日期咱要换成什么。就是咱们表中的是不是这个日期，比如3月3号，3月5号，3月9号，这是表日期，所以咱把它换成我们这个日期，然后它还有这个Y轴，Y轴是不是这个数量，而数量换成什么，是不是我们的数量，假如现在我想统计这个注册人数，大家把这几个值是不是给它写到这位置，生成一个这个折线图啊，这是我们要做的事情，把日期换成我们表中日期，把数量换成我们那个数量，这个来写接口。但是日期和数量里边有个特点，各位仔细看啊，你看啊日期数量。都是什么结构？就这部分是日期，这部分数量，这是什么结构？

是不是一个数组，所以说我们现在要通过接口返回一个Jason的数组形式，然后它才能显示，因为它现在默认只认数组形式，它不认别的形式，你给他反映别的形式，他不认识，只能反映这个形式，它才能进行一个解析，然后最终做显示，所以这个啊是咱做了分析。其实这个过程啊，如果说各位啊，在大学学一门课，这门课。离散数学，它就是一种离散的方式进行显示啊，主要是这种结构啊，也就是说我们做程序，其实写代码写程序核心就是在学数学，它这个过程就是学数学过程啊，所以说如果说你在程序中将有一个更好的发展，那就考验你的数学功底啊，这数学很重要。啊，那咱回到主题上来啊，所以下面咱就写这接口，让接口把我这个条件中的日期和数量用数组形式返回，然后在里边一显示就可以了，这个啊，咱们把页面整出来了，包过程做了分析。