172-尚硅谷-尚医通-后台系统-预约统计功能-ECharts介绍

各位同学大家好，我们继续来开发上一通项，刚才呢，咱们完成了就医提醒功能，那咱们下面呢，再来开发一个功能，这个功能叫做预约统计功能，那这个功能呢，我们要做什么事情呢？首先给各位先做分析，大家注意啊，就是我们在一个实际系统中，每天是不是有很多的医院，而每个医院在每天是不是有很多的预约情况。比如说这个时候呢，我的管理员想查看某个医院在某一个时间范围中有哪些预约的数量，那这个时候呢，如果咱用普通方式查看，肯定会特别不方便，所以咱们可以怎么做呢？我们可以把这个医院的每天的预约情况用一个图表形式显示出来，而这么显示出来之后，我们进行查看是不是更加方便，更加直观看到这个效果，那图表形式我们可以怎么显示呢？给各位自我介绍，各位同学应该都见过啊，咱们常见的图表形式有这么几种图表。

比如说第一种图表，我这里边是一个坐标，这是X轴，这是Y轴，X轴呢一般都是它的日期，Y轴是它的数量，比如现在我们把这个这么来显示，假如说咱们现在这么来做，大家注意这种图，我觉得各位应该见过，它叫什么图。是不是一个柱状图效果，比如说这里边这是3月1号，这是3月2号，这是3月3号，然后每天有不同的预约数量，这是我们的第一种图，然后这里边呢，咱也能做成这种图的效果，给大家也画一下，同样是X和YX是它那个日期Y轴数量，比如说现在我们里边这么来显示。给大家画一下啊，假如现在我们在里边呢，给它做一个显示。显示中呢，假如说我们第一天是这么多数据，第二天呢是这么多数据，第三天是这么多，然后把这个，比如咱们用个线给它连起来，这种图各位应该也见过，它叫什么，是不是一种折线图效果，咱们可以做显示，而在咱图表中还有一种图各位也看到过，就是这种效果，比如说我在里边啊，给大家画一下，假如说现在里边是。

这么一种形式。啊，我来画一下啊，咱们画一条线，我们是这个样子，然后在这里边呢，就是每个部分咱们用不同的颜色显示，假如说这部分。我们是黑色，比如这一部分是蓝色，这种图是不是叫饼状图，所以咱们现在就可以把我们这个医院的每天的预约数量用一种图表形式做个显示，用于咱们方便进行查看，所以这就是我们要做的功能，叫做预约统计功能。那这个功能怎么做呢？给大家强调，首先我们先看图表，怎么实现图表实现方式呢？我们这里边选取一个插件，或者说一个图表工具就能实现，这个工具名字叫做ears，实际中做图表不仅只有ears，指ears是一个比较常见的图表工具，那这个一给各位自我介绍，然后咱后面在项目中用它来实现图表显示，那咱来看一下啊。

我这里写到ES呢，最开始是百度的一个项目，后来百度呢把它捐给了阿帕奇，它成为阿帕奇里边一个开源项目，而它提供了强大的图表显示，比如说咱们常见的折线图，柱状图，饼状图等等，用它都能做到效果，然后这里边有一个它的官网，这个官网咱们打开看一下，就这个网站。ES阿帕起点ord里边有它的讲义信息，包括咱要学习有它的文档。文档中有详细介绍，然后里边有它的各种事例，各位看到啊，事例中呢，有各种场景，就是它里面这个图该怎么去做，然后在示例中，除了它的效果之外，大家看里边是不是有它的对应的代码部分呀，咱通过代码部分能把效果做到，其实我们做的是什么呢？前端部分都给咱做到了，咱们做的就是来开发接口，通过接口返回它的X轴和Y轴数据，最终做显示，所以这是关于一叉的一个介绍，咱们项目中选请他作为咱们的图标使用。

那一叉怎么用呢？咱们先写一个简单的入门，然后一会儿在项目中使用，那我来做个入门给大家说一下啊，然后咱们来写一下，比如说现在呢，我这么来做，我在这里边呢，我就建一个HTML文件，然后在里边给大家写一个简单的一个入脉例。那我来创建啊，比如说我建文件夹，我叫这个ears。

DEMO。然后在一叉的DEMO里边呢，咱们创建一个HTM文件，比如叫这个零一.html把这个做创建，然后创建之后在里边写上咱们相关这个内容，那内容怎么做呢？大家看我的课件中啊，或者说你看文档中，这里边有一个叫五分钟上手，也告诉我们怎么做了。第一步就是引入ES，你可以引用JS文件，或者说用n PM in install下载这个内容，咱就直接有一个文件了，文件通过这个官网可以下载到我这里边呢，在资料中给大家已经提供出来的这个E，就这个文件，那我们现在把E叉先引入进来，然后咱们自操作。那我们来看一下啊。就是目前呢，我这个工作区大，看它的位置啊，我应该是在我这个E盘的预约挂号里边，比如我找到啊E盘的预约挂号，然后里边有E查的DEMO，然后把这个JS文件给它先复制过来，然后复制之后在我这里边先引入这个文件，咱们加上一个。

Square的。杠script，然后在里边呢，我们加上一个。Src，在src里边加上咱们这个相关内容，就是里边那个E叉这个内容，也就是我们的第一步引入E叉这个JS文件，我把这个给各位直接分过来，咱们就先写一个简单的入门，也就是根据我这个。E叉这个摘S文件啊名字把它引进来，也就是里边的这个名字就不要写错，然后这个写完之后呢，我们进入到里边的第二步，第二步呢，咱们创建一个div，在div里边的用于显示你那个就是相关的图表的这个位置，就是在这div中去显示，比如大家可以定义div的ID值，包括它的高宽等信息，然后这个写完之后呢，下面咱就可以写一下它这个Java此块代码。

在Java里边写上它对应的这个内容，那这个我们来写一下啊，这个内容呢，也是一个比较固定的格式，我这个课件中给大家写了两个图，一个是折线图，一个是柱状图，那我现在先把折线图这个代码给各位先复制过来，我们来看一下啊，不需要个位记，但是要求给你这个代码，你能改成你最终的效果。那咱看代码中啊，它是这么一个结构，第一步咱们用这个一叉点init，然后里边用document.get and BYD加个men，你看什么意思啊，这是不是咱们的do操作呀，它表示取到你的div在里边显示，然后下面是option选项，就是里边一些相关参数，参数中两部分，这是它的X轴，这是它的Y轴，然后最终把它进行设置，我们就可以完成一个就是普通的图表的显示，所以这个我们就快速做整合，然后整合之后咱们把它执行看一下这个基本效果我们来看一下啊。

比如说这个文件我用浏览器打开，大家看是不是这个图，就是一个简单的折线图效果，所以咱们把它快速做了一个整合，然后整合之后，比如说咱们可以再来测试一个文件，我把这个文件我再复制一份。然后我给它改个名字，我就叫零二.hl然后在零二里边，比如说我在复制我下面这个代码，下面代码做的是一个柱状图效果，咱们把它也是拿过来，然后咱们也是测试一下里边这个效果。把这格式我稍微调整一下，然后大家看啊，这里边同样有它的X轴，有它的Y轴，然后最终进行操作，咱们把它也是用浏览器打开，大家看效果是不是一个柱状图效果，所以咱们现在就完成了一个关于一叉子入门，包括你看里边啊一些效果他都帮我们做到了，比如说你看我鼠标移到上面是不能进行显示啊，这些都是由E叉S帮我们封装的。

这就是关于它的一个基本入门，大家知道这个特点可以了，而这些特点中呢，比如咱们一会儿我们就可以用其中一种图显示的内容，比如说一会儿呢，我就用这个图吧，折线图把咱们那个功能做到。然后折线图呢，咱们看它具体点啊，它里边有X和YX轴中就是我们的日期，Y轴中是数量，而它的日期也好，数量好，你看是什么数据。是不是一个数组的数据啊，就是一个这存数组，所以咱后面我们要编写接口，返回X轴，返回Y轴，然后用数组这son的形式进行返回，在里边显示就可以了，咱后面会把它做到，这是关于基本入门，然后入门之后呢，如果说咱在项目中要用这HS，那怎么做，咱就需要做一个安装，那我给他安装一下啊，大家注意啊，咱们现在做这个预约统计功能，应该是咱们管理员用的这部分，也就是我们那个葛德in管理员用的，所以咱们需要来到我们的管理员这个系统中进行操作，在里边我们执行这个NPM，因此都把这个一叉这个依赖给它装上，我这个已经装过了，默认是没有的，各位用命令把一叉的给它装上，然后在里边才可以进行使用。

注意是在管理员的系统中安装这个E叉S，这各位给他知道啊，所以现在这个E叉S的入门给各位做了一个介绍，大家先有一个印象，然后这个入门写完之后呢，咱们下面来编写它的接口，编写接口之后再来整个前端最终实验段的功能。在接口中咱们怎么做呢？比如咱们一会儿啊，我们就建一个新的模块叫service c，然后在里边呢，因为咱做的是统计这个订单，就是这个挂号的数量，咱们调的肯定是O里面方法，所以我在O里边写上这个接口，接口中返回咱们的X日期Y轴数量。

S日期呢，大家看啊，其实就是我这个表中的。是不是就是这些日期，比如说咱们找他那个日期，我们找一下啊，就这个是不是反映这个日期，然后根据他，比如做个分组，比如说3月5号有哪些这个数量，然后3月4号哪些数量，包括它的具体值，比如说3月5号有两个挂号，3月4号比如说有十个挂号，咱们把它通过接口返回，然后通过接口返回之后在stic里边通过远程调用，调用接口中的这些方法，最终返回我们的数据，返回数据之后在前端最后进行显示，所以这是一个基本分析，那咱们马上完成接口，现在先把这一叉S给各位做了一个入门的介绍。