动力节点-【CRM客户管理系统】SSM框架项目实战教程-159原创

啊。那我们还是来做我们这个CR项目最后一个功能了，没有吧，交易统计图表，这是统计图表，我说啊，其实大家这种统计图表，我们前面给家说了，我们说有各种各样的统计图表，但以后也会接触各各种各的统计图表啊，因为你知他接触用什么样的统计图表，不同行业有不同行业的这些统计图表。都是你看，你看你做什么行业的软件，那不同行业的有不同行业的这种统计图，就像咱们前面说的柱状图，饼状图，折线图等等，这些以后大家都有可能会用到，知道吧，那我们这个地方统计交易表里边数据的话，我们就是漏斗图，这是销售行业或者叫贸易行业里边特有的一种图形，知啊它的特点就是说能够展示一组数据，知道吧啊，能够以更形象的形式来展示一组数据的这个大小，以及按照这个大小来进行一个排个序，叫排序，就这样，就这种图形，它主要作用在这个地，那我们这个地方就是统计什么，统计交易表中各个阶段的数据量，就用这个统计图表。

好，那我们说这种图形的做法的话，这种报表这种图形的做法的，一般来讲不让我们自己画，你说你要是你自己画，其实也能画出来，就是比较麻烦啊，当我说那麻烦的话，那我说像这些各个行业都当中，各个行业的这种软件功能中都有可能会用到，他一定有帮别人帮你下了知道吧，所以那那就是什么样的，就是些报表插件是吧？啊所以大家你这个到网上一搜一些报表插件，话多的是搜了一堆，一搜一大堆。啊，都是那些什么专门报报做报表的那些公司做出来这种软件让你用的，当然有的是收费的，有的软件有有的是什么，有的是这个免费的，当然收费的话，那肯定做得好，他收费啊，那免费的话，你其实也不一定就做的不好知吧，呃，能满足你的需求，那就是好的，满足不了需求的呢，他收费他也他也不好知道，所以这是我们是，所以大家我们在做这个，真正做这个统计交易这种表中各个阶段数据量啊，真正做我们这个交易统计图表之前呢，大家我们首先来研究一下，像他这种报表插件到底怎么怎么去用好，下面我们来看看这个报表插件，报表插件或者叫统计图表的这种插件。

知道这种插件我们说有很多，市面上也有很多很多这种插件。啊，那我们比较流行的这种，它就有这个，这个叫Jeffrey。J free这个应该用了很多年，应该说就我们原来开始做外部开发，早期的都用它叫j free的，它是个免费的，那国外国外的一个这种插件，插T就是统计图表或者报表的意思，它是么？在Java中使用的一个免费的一个这种插件。

啊，他做的其实也非常好，像那些大家平常见的那图，柱状图啊，饼状图啊，啊折线图啊，还有一些曲线图啊，啊环状图啊等等这些他都能做，而且做的是效果也非常不错，现在大家在网上看到有很多图形，因为特别是老的项目，可能都是用这种接free叉的做品，就这种报表，但这个报表就说现在现在用它了，现在用的少了，也有，当然现在些特别老项目也在用它，现在用为什么用的少了，咱说用了它都都知道他这么做的效果很好，但是它用起来不方便，怎么不方便了，我们说我们显示的那些报表，那些图形，你看什么柱状图比张图，它不是随便画的，它怎么画的，它是根据数据画。那根据谁的数据，根据我们程序里边处理好的数据化，或者我们程序从数据里边查出来数据化，那所以说那他们这种插件都属于前端插件，在显示这图表的时候，他得到底怎么显示，你得从后台把数据处理好，然后呢，把你的数据以他需要的格式的形式传给他，返回给他，这样他才能根据你的数据来显示图标。

那它这个麻烦就麻烦什么地，那麻烦在什么地方，它需要那种数据格式特别麻烦啊，所以呢，它不同的图形，它有不同的这种很复杂的这种格式，所以我们在后台上用的时候，在后台就是查完我们的数据后，处理好我们的数据之后，得拼成他需要那种格式，一大串字符串，然后传传给它，这样它才能种显示，知道吗？所以它用起来不方便，就是我们返回数据的时候，那一大串字串很难很难拼接那一块字符状，所以说这种方式，这种技术就外边用的不多了，这是我们说接水差，但是现在也有，也有一些公司在用，大家知道就行了，这是我们说这个好，这是我们说J插，嗯，还有一个，还有一个插件，我说也是做这种报表的比较流行的，还有这个叫I report。

嗯，这个也是比较流行的是吧，也有一些，特别是一些大型的，大型的公司都在用，那当然它是收费的是吧，它收费。啊，这也是国外的一个公司多，他做的非常强大是吧，他不但支持前台，也支持后台，怎么引用后台用Java代码一运行也能运出来一个报表，这个报表什么，它是以图形的形式给你展示出，而且它这种图形还是干什么呢？然后它显示出来这种图形的话，之后你可它可以什么，你的如果是他这个程序在你那个电脑上运行的时候，如果你这个电脑上安装了打印机了，它可以调你的打印机把这个报表打印出来，知道吗？把这种图形什么柱状图，饼状图这之类给你什么，如果你打印机打印什么，连着打印机正常工作的话，他能就说他能吊打印机，然后让打印机把这个图，它生成这个图表给你打印出来，知道吧，当然你要说打印机，你要支持彩色打印机的话，彩色什么都是全的话，它就打印彩色的，你知道吧。

所以这个它是收费的，当然它也有一些免费的一些项目，但是免费的项目它不能用一些特效，只能做一些最基本的这些什么这报表啊，所以这是我们说它的收费，这个大家知道它就行，但咱们不用它了啊，这个这是我们这个除了它之外还有一个，还有一个这俩都是国外的插件，还有一个国产的一个插件，就我们原来就用过哪一个，就这个。就是这个这个插件这个。瑞浪什瑞浪这是咱们国产的一个插件，哪一个叫上海的一个公司做的这插件啊，这这个插件也这个做的也非常好，它也是只既支持前端，也支持后台，在前端能给你显示这个以页面的形式来展示这种图表，在后边以运行加构代码，也能给你生成一个这么一个报表，他也是前端后台都值，而且他做的也非常好，而他也是收费的，他也是收费的，就我们以前也用过这个，就我们以前做那个，就我们说做这个叫什么税务的项目，那税务的话都是打印这个发票，那些发票其实就是报表，那你看那打印，就打印机打印发票，那些发票为什么打印的，有什么有公司的抬头，有什么什么金额啊，什么什么之类这些什么纳税人什么这些这些我们说全部都是报表，他说他设计一些模板，哪个地方显示什么数据，哪印什么显示什么数据，然后他都能用他的做。

我们原来做的是有用法，当然我们说用这个也能做出来，他们都是相通的，相通的是吧，他能做的他也能做，他能做的他也能做啊，当然用法可能不一样啊，他可能不同公司开发的当然不一样，这俩都是收费的啊。这时候我妈说这样，而且他那收费应该还挺还挺贵的，知道吧，那会他这个这差价收费，他怎么收费。对，你买它，你买它的，哎，你说这个插件，我我一掉它的插件，它它怎么就。我不买我也得能掉啊，我都把我把他加班拿到我不就能掉，我花不花钱去那都能掉啊是你花不花钱是都能掉，但是呢，你钓它的时候呢，你调它，你得给他传，你调它程序，你得传一个激活码，它给你激活码，你买那个激活码，那个激活码在他程序里边设置那个有个有效期的，有效期就假如你要买两年的，假如你花一个，假如说呃花一个假如举举个例子啊，假如花50万，我用两年是吧，你输他给你个激活码，你什么调他的代码的时候，你再传个激活码，好，他给你生成的那个报表，两年之内就就有用就可以了，两年之内可以用他这个，这个用他这个程序一运行，哎，他能给你打印出来这种报表，这种图图表知道吧，那你说打印出来两年之后呢，你再一运行它程序，他也能给你打这种这种报，只不过打印的时候呢，你的那个注册码如果是一一失效了，它上面给你给你显示个打印，那报表上面给你显示个大很大的一个什么水印，叫什么未注册。

什么之类的这些就这样吗？所其实也能给你打印出来，就是就是说是它上面有水印了，知道吧，所以你就不能用了吗？你要有说商业上面你不用你说我做练习，做练习可以，做练习可以知道吧，啊所以他都是这么收费的啊，当然他这个激活码它是有期限的，你这个不同的这个你知道。

呃，你不同的这个期限，他花的钱是不一样，当然他也有终身免费的，当然更贵的知道吧，所以这是我刚才说的这啊，当然这些差件咱们都不用啊，咱们用哪一个，咱们有个最流行的一个插件，那来讲最流行的一个插件哪一个就这个E叉这个插件。这个插件现在是最流行了，它它只支持前端，就前端的一个报表插件，这个啊，咱们昨天今着给大家讲的提了，这是百度推出来，也是国产的产件，就百度推出来，就百度这个公司，你看啊，有很多人都在网上吐槽了，是吧？啊但是他就这个技术而言嘛，应该说对于这个中国的这it公司而言，应该做一个很好的一个示范知他做的做的这个插件是非常好的，应该说在业界里边应该得到大家的这种承认了，知道吧，啊不但国内的这些成员承认了，然后呢，国外的一些成员也都挺承认了，所以现在他已经收到阿帕奇下边了，到阿帕奇上边都搜出了一知道吧。

啊，所以现在说它这种很多这个程序员只要一做报表或者前端报表基本上都用它，为什么用，它用的简单，而且做出来效果非常好知吧，然后它运行的效率也高，所以就就这样，对对对，还有免费的知道吗？这是啊，所以所以这个插件应该说现在是最火的一个插件啊，所以咱咱这个插件像咱们那个，呃，这个插件应该说，但你到网上搜索还有很多这种资料啊，啊但咱们这个正因为他火是吧，这个课咱们现在没有独立的开这门课，但然咱们有个挖挖课网上面已经录这个还没我还没录完呢，嗯，录了他把常见的那些这个用一叉做常见的报表都都列出来，能列出这是这样，因为这个技术应该是现在符合这种社会发展的一个趋势，就是软件发展的一个趋势，就是说它是小巧灵活，别看小巧，但是功能很强大。

做出来效果效率也高，效果也好，很很炫，知道吧，而且用起来很好用，把你后台的一些数据传给他，很好传，怎么传都是以杰森自符串的形式传，特别好，特别简单啊，这是我们说这个插件，所以我们就准备用它了啊好这时候我们给大家简单介绍一下我们这个报表插件，就目前这种情况，当然还有一些别的插件，别的插件不用的不多的，我就不多说了，就我们就准备大家了解这几种插件就行了，我们准备用E叉，知道吧，好这时候那我下边我们就怎么办，怎么办呢？研究一下E叉S到底怎么使用，知道吧，研究明白了再把它用到咱们这个CRM项目里边就行了，所以我们来看看E插锁使用，嗯，来一个，来一个，我们这个地方还有E插锁的使用，它的使用，那它的使用的话，我们说不管是它什么报表插件，还还是别的插件，这些都属于前端插件。就我们现。

在使用的这些插件就是外部开放，前面要显示这么一个报告，这是前端插件，它只要是前端插件，前面给大家说了都符合咱们前面给他家讲到前端插角的使用步骤，懂哪三步懂哪三步能第一步引入开发包知第二步创建容器，第三步当容器加载完中后，对容器调用工具函数，知道它的使用也是符合这三步，所以下边我们就准备这样啊，我们就准备这样，按照这三步给大家简单写一个例子，看看他这个报种到底怎么用的，知好这种啊这这这三步我就不写了，那我们来看看，那我说这三步最难的什么，就第三步掉公具函数，这公具函数到底是什么，里边有什么参数，那我怎么能知道，到官方文档上去找去，他一定给我们什么，那给一定给我们这个，这个要介绍好了，甚至给我们写了一例子，而且呢，他这种，他这是中国人写的，所以说他这种使用步骤，使用思想特别符合我们中国人的思维方式。

你一看很好看，而且它文档全全部都是简体中文的，知道吧，所以所以下边呢，我们就来看一看它的官网，去看一看他这种一叉子还者到底怎么使用的知吧，那我们来看看吧，到官网上一看一看，然后呢，这个地方来一个E叉子，你可以简单搜一下这看吧，这是这个，你看百度的E叉已经放到官网上面，这阿帕奇官网上面知道吧，点进来你可以看看，这是E叉官网放到阿帕奇上面。这是它的首页，它首页大，你看它这个有个下载你了吗？下载开发包的，你点进去可以下载开发包，它这有些特性，它这个特性什么，就是它这种插件相对于别的报表，它有什么好处。知道吧，它为什么流行起来，就是它上面介绍它很多特点，别的插件不具备的，它具备的这叫特性，你道啊，当然这个地方我就不给他读了，大家感兴趣可以课下自己看看，它这种插件为什么能留给你了，就它比别的插件好的地方知。

诶课下单你看到你可以课下自己看，当这个开发包你要想下载，点进来下载就行了，我这个项也给他下载好了，在咱们这个项目里边，我一会儿就直接用你了，我就不给他下载了啊，那下边我们准备干什么呢？真正写他这个代码之前呢，你可以看看他这个实例，那么官方实例，实例是什么意思，就是说他这个一叉子支持的这些什么报表图形。说以后我要做一个什么样的报表，到底一插是能不能做出来，它上面给你做出来例子，只要它上面列出来这种报表图形你都能做什么用它做出来，但你可以点进来看看它的实例，先看看它的实力，你看它能做什么图形，知道吧，这都是它的图形知道吧，它支持这么多图形，知道这是折线图，明白吗？折线图有各种各样的折线图，还有什么，你看这柱状图的，看柱状图，当然还有一些复杂的柱状图，有对比数据关系的，你看这些啊，当然他这些图不是随便画的，都是根据数据画，你把你的数据给他，他按照你的数据来什么给他这种显示包装，还有什么你看饼状图。

饼状图，环状图，这些都是通过这些插件来根据数据画出，还有什么，你看还有散点图，散点图一般这些都是么？做些气象相关的那些项目，你看这种温度湿度的一些分布，分布情况知道吧，还有人口的分布情况。啊，这些大看这些都能看完知道这种是吧，大家看它这是炮，它这个什么散点，这点的大小就代表数据量的大小知道吧，它不是随便画的，所以哪个点大哪个点小都是根据数据画的，知道吧。这时候啊，这样还有后边来看，还有甚至地图来看也能做出来，就按数据画出来就行，知道吧，这时我说还有这个来看，炒股用的这K线图啊，你只要给他数据，他都给你画过来。

但你得把你的数据按照他需要的格式给他，他才能画出来。你只需要把你的数据给他就了，按照他要求的格式给他都能换了，当然我们让大家K像图，大家都知道他不停的刷新，那你要做一个什么页面，你要不停的刷新就行啊，每刷一次把你的数据最新的数据给他，他给你显示了就不停的刷啊，只要网速足够快，给我你做的这些效果跟他们用的那软件是完全一样的，这都做出来你看吗？这些好，那当然咱们这是雷达图什么之，这些我们不多说了，我们还准备看我们个漏斗图，你看那个肉肚图谁弄弄。这个这漏斗图看看吗？上面宽下边窄漏斗图，这还有多个漏斗图对比关系的，这两个漏图叠加在一起的，还有多个漏斗图做对比的，知道吧，这是多组数据的对比知道。所以这当然这些都是比较复杂的一些漏洞图，能展示一组数据的大小。

这是我们做这当然后边还有这仪表盘，你看看这些，这些都是反映相关的这些数据的，还有这些，你看他还有这些像什么3D图形，它也支持啊。把你的数据给上，他都支持。是吧，这些是吧，还有大看还有那些什么，世界上有哪些国家，这些国家都是多大的是吧，能够世界地图或者中国国内的地图，或某一些重要城市的地图，他都能给你画出来，你只要把数据给他知道吧。所以这是我们说的他支持的阵型，所以呢，我们说将来我们要做报表的时候，你说我们用说用E叉，用E叉，E叉能不能做出来，到这里边找。如果能找到，他能做了，当然找不到，他能不支持，那你说老师万一找不到，但基本上现在流行的这些图形，报表图，这些图形我们是吧，一叉子都支持。啊，不支持的几乎没有知道最流行的知他有团队专门维护这个项目，就说百度一个团队，这是我要跟要说的这种他这个实例来知道吗？那你说他这个图形我看着很炫，很好看，是不是很难做，不是很简单，他给你做好了，你只要调它的代码，把你的数据给他就行，特别简单用它，那那那说到底怎么用他这个东西有个这个挺好教程。

教主，他专门教你怎么使用异常素。你看着很高大上，你点进来这个教状态上。非常简单，五分钟啊吧，五分钟就学会了啊一叉啊，大家现在有这个吗？咱们前面给大家讲前端插件使用步骤的话，你要有这个基础，五分钟都不学啊，记住三分钟就学会了，你看说这种一叉子很简单知道吗？这是这是我啊这样，所以说他那他他怎么做的，你看看见吗？大纲他在上面，他教你怎么用一叉的，他下边有些步骤，他这些东也是通过一个例子教你的什么例子给给你了，大家看你看三步走第一步干什么，你看。

获取他这个插件是吧，这插件下载下来，下载了一点下载就行了，点那个下载到官网上下载页面下载下之后，他那开发包就是一个GS文件，他连CSS都没有，就一个GS下载下来就行了，下载之后干什么，放到你项目里边，然后引入你页面里边。这是第一步吧，引入开发包嘛，第二步干什么？第二步创建容器看吧。它这个容器，你说老师怎么是个div，那当然了，网络容器最常用的两个容器，单行物们号，还有一个div，那它这个插件运行的结果是一个什么？是个报表，报表你再放到单号面框里能放下吗？放下不了，所以只能用这DA名，这是第二步，第三步干什么，你看。当容器加载完，对容器调用公颈函数，当就行，这是他给我们写了一个最简单一个例子，知道就是三步走吗？运行结果就这么一个结果，当然他这个例子是一个以柱状图为例的，那有老师柱状图，我要想做漏斗图，我会把，你只要会柱状图了，漏斗图也好做了。

这时我要这就这什么，就这一个小例子你就知道了，那我们对我们而言呢，最重要的就是研究它这个东西就行，把这个东西什么研究，把它这个什么工具函数研究明白就行了。啊，这时候我们知道，所以下边段我们就以它这个例子为例，然后呢，建一个测试页面来把它这个例子运行出来，先运行出来，然后我再分析它的代码，看到底是怎么做的，然后我们把它变成这个什么漏斗图，看怎么变，所以我们这个地方啊，下面我就要写一个测试页面来演示它这个功能，然后呢，大家看我下面建一个测试页面吧，那测试页面我们这个地方来建一个。既然要测试的话，测试，为了测试方便，我就把这个页面建到外部APP目录下边，这样的话我测试方便，然后在上面创建一个网页，将来一访问这个网页，我就显示一个，就把它那个柱状图显示出来就行了。

知道吧，这时候啊这样，然后呢，这个地方来看看吧，那这个地方我这个地方来演示E啊E。然后呢叫test JSP这个地方我们来给大家演示E叉插件，演示叫E叉，然后呢报表插件知道吧，然后呢，我用报表插件，我一会儿要不可避免的会引入它的开发包，引入开发包，那我嵌到uo，嵌到U匙，我最好加上贝子标签，都从贝标去找，所以呢我就加加进来，我就把这贝子标拷过来，拷一份CTRLC，然后呢把它放到咱们这里边，这样就行了。好，这样的话，这个页面提供提供好了之后，下边我将来一访问它就要显示这个柱状图。把它这个效果放到咱们测试页面上来显示啊，那来看看吧，那我要使用插件了，三步走，第一步引入开发包，第一步我们这个地方引入开发包，引入开发包吧，他这个开发包很简单，就一个JS文件，哪一个JS文件到他官网上下载，下载完了之后就这个。

就这我就不给大家下的一个一个下了啊，接这个叫E叉，好像这个包名，好像这个目录名还还有问题，这个目录名少写了个TD叉啊。然后呢，这个地方来啊，就这个就把它的开发包。它就是一个GS文件，然后呢，这个地方就好，到官网上下载就行了，下载了之后把它放到你这个项目里的，然后得把它引入你GSP页面里边就行，我们已经下载了，放到这了，那把它引入GSP页面里边就行了，那引入吧，这个地方来引入，那引入GS，那就引入吧，这个地方来个script的标签。然后呢，这个地方来个type，这里边是test的javascript的，然后呢，SR，那这个地方引入这个JSJS文件，JS文件从哪找解宽RY下面的谁啊E。

然后呢，下边的E叉啊，把它引进来就行了，这样的话咱们就引入开发包。这时我们这这引入卡包，那这个是引入我们的插件，引入插件，引入插件啊，当然我们以前说了引入一个插件，以前引入的什么日历插件，分页插件，什么自动补全的插件，那些插件都属于不的。呃，说他们那些插件不能独立运行，必须引入不得在的开发包，然后呢，再什么他们才能独立运行，这个地方需要引入不得在吗？对，不需要，它不是依赖于不得所债物的，所以你就不不用引入不得所债务框架了，是吧？它不，它不是依赖于不得所债物的，对，它不用引进了，这时我知，但是我跟我跟你说了，我跟你说它不是引入，它不依赖于步骤所要框架，但是它依赖于谁呢？解query。

我们前面大家说任何现在目前来讲前端的插件或者框架基本上都是基于解query的，现在几乎没有不用query开发的。解query现在已经形成，已经是前端的一个基础技术了，所以他们百度那些程序员做这个插件的时候，他们在里边用了大量的解query。所以它还不能独立运行，你要想让它独立运行，得先引入解块。知道吗？所以那这个地方我们来引入解块，所以这个地方对，在引入它之前先引入解块，引入这个E车件，然后呢，下面引入结块RY，把它引入，然后呢把它引入，那引入我们这个结块RY，那引入结块RY这个地方来一个script的，然后呢，这个地方来个type，然后呢加script，然后呢，XLC这个是来个j query下边的j query这个地方行，所以这样的话呢，我们这个地方引进来了，这样第一步我们就引行就做完了，就是引入开包，它官网上也是让我们这么做是吧。

这是第一步，第二步创建容器，第二步创建容器，那我们这个容器大纲就是一个div了，那我我也不自己创建，我直接把它这个拷过来就行。直接把这个直接把它拷过来。那就放到包队里边，要显示吗？而且你看它这个容器的加了一个ID，你看吗？因为我一会儿要对容器调工角函数拿到它，然后呢，他还对这个容器做了什么宽度高度的限制了，当然做不做无所谓了。这时候我要这样，那我们这个地方就是一个容器，容器就是D位加进来什么，下边第三步，当容器加载完之后，对容器就有共享数，当容器加载完成之后，然后呢，对容器调用，调用工具函数。调用估计函数知道吧。那我怎么知道调哪个公具号，他上面给你了，就这个就调这个功能号知道吧，你看他看他给你写的，他是当容器，为了确保容器加的玩，他在下边写知吗？加GS代码在容器下边写，这样能够确保容解了，但是我们说这样写是我们不推荐的，他这个例子他这么写，但是从开发的角度上，这是我们不推荐的，为什么GS代码和A代码混在一起了。

啊，所以当以后维护不好维护，那怎么办呢？所以我们准备把它写到什么入口函数里边表就行了，所以把它这一个代码拷贝过来，写到入口函数上，这样就行了，那写入口函数这个地方老师写个入口函数，然后呢写个入口函数来，这个地方还有个script的标题，然后呢，它也然后呢这个地方，然后呢这个地方写个入高劳符号，然后呢这个地方来搞三个式，然后呢把我们这个代码写里边，这就当容器加载完成之后，对容器标准功率函数，当容器加载完成之后，然后呢对容器调用之后，对容器调用工具函数，这样就行了，那它怎么调的，咱我们现在先不用管它，把它拷过来，然后呢先把这个效果运行出来。

能出来效果说明没问题，没问题，我们再读它这个代码，看这个函数到底是什么样的一个函数，看到底怎么去调用，知道吗？所以现在我先不读它，先把这个代码写出来，然后把我们的服务启动来访问一下这个页面，看能不能出来报表，能出来报表再研究技术，再研究它这些什么函数，好下边启动服务来测一测，三步做完就可以启动服务了，好，下边大家可以看一看。然后呢，那我这个测试页面，我直接访问测试页面了，知道，因为他也没用到C出了，不用先登录，所以我直接来个E，然后呢叫test.jsp大家看啊，这个呢，报表就出来了。

就这啊，当然这个报表这里边数这画这个报表都是根据数据好的知道吧，你鼠标放去，它给你提示哦，这个柱体表示什么数据。他做这个例子应该是反映了一个什么，应该反映了一个应该是一个购物网站，或者一个一个一个这个商店的一些各个商品的这个销售，就销量情况是吧，销量他应该是卖衣服是吧，各个衣服的销量情况。这是我们这样，那我们接下边呢，我们来看一下它这个代码到底怎么调，我们说最难，最难的是这个什么，这个函数的调用，那我们来看这个函数到底怎么调的，大家一块来看一看，它这个调用呢，跟咱们以前学的那国外的那插件稍微不一样，稍微不一样，但本质上是一样的，他哪个地方不一样，他做他就比人家多了一步。

人家以前那些插件都是直接什么对容器调工具函数，拿到那个容器的解出对象，直接调工具函数传参数就行了，这是以前我们做的。那么他这个1X这个插件呢，他先做了一个初始化，就多了这一步，其他的步骤跟以前的完全一样。这个初始化是干什么的？这个初始化你看看看它使用一个变量，这个变量在哪定义，在它这个什么开发包裹定一个全局变量，这个全局变量里边，这个全局变量是个函，是个对象，这个对象里边有个函数，这个函数是个init，这个函数里边干什么我们也不知道。反正你只不过它让你调，你就调就行了，从字面意义上理解，好像是个初始化一个函数，初始化什么里边这调这个函初始化函数的时候，让你给他传一个什么参数，这个参数是什么，你看到对容器的document对象看到，而且它用到它什么，用document.get element BYD用它调。

把这个容器的盗墓盗墓对象，然后传给他，他做了一个初始化，我们这个地方就可以理解为什么就告诉一叉子我的容器是谁。将来你给我运行出来那个插件，给我显示到运行了那个报表，给我显示到哪个哪个div里边就行了，我们就可以这么理解知道吧，然后呢，大概他做调完之后呢，他给你返回来一个变量，这个变量，这个变量没你随便起，我就我们他这个地方就叫做my char，它就多了这一步做个初始化，初始化到底干啥的不知道，我们也你除非看他的源代码，我我们也看他源代码也没用，知道吗。啊，反正总之他让你这么调，调的时候，把这个容器的倒闭对象传给他，你就这么调就行了。这是这是一步知道吧，然后下一步呢，下一步直接调工具函数了。怎么调工具函数，就是根据初始化得到这个变量，得到这个变量，然后呢，调这个工具函数，哪个工件函数就这个工具函数就这个叫set option。

这个共应函数，这就是共应函数，通过这个插件，通过这个什么初始化那个变量，调这个函数就行，调的时候你们老调的时候要传参数，这里边就是参数，这参数从哪来的。他把这个参数定义了一个变量，这个变量是个什么大括号，大括号是什么？是不是一个对象啊，对象里边有些很多的参数名参数值参数名参数值参数名参数值参数参数值参数名参数值知道吧，这是这一步，其实跟我们以前讲的一样，怎那有点我看着不一样，看着不一样，它只不过把这些参数呢定成一个变量。你我不一定变量可不可以，可以怎么怎么把这个对象拷贝过来，这个地方不要了干什么，写到这里边不一样吗？这不是就跟咱们以前学的那些插件调工具函数的时候，传一个对象作为参数不一样吗？一样是吧，这是一样，只不过他百度的这些程序员呢，他们做这个例子的时候，把这个参数单独拿出来定义了一下，其实本质上跟我以前一样，所以大家你这么看的话，它就多了这一步知道吧。

下边这也都一样，这时我们这样，那你说老师对我们要研研究什么，最主要的研究什么，就研究这个层度。把这参数研究明白了好了，这个插一插二次插件你就会了。那下边我们就来研究一下它这参数到底是什么意思吗？好，下边来看看这个再给它恢复，还要让他恢复它这号，主要是研究这个参数的，主要研究这个参数。好，这时我们说，那它这参数，待会我们一块来研究一下它的参数吧，一个一看，其实这参数都是见名知意命名的，你看到参数名你知道是什么意思，第一个参说表示什么意思，你猜一猜他的是不是标题啊对，这是标题，标题他说你给你显示个报表，这个报表是显示什么内容的。

这个报表是里边是显示什么数据的，有个标题，这个标题显示到哪了？它这个地方你看这是标题里边内容，标题test的时候，标题里边文本信息，他这个地方跟我们说了一个，写了一个事例，你看他这个事例他想到哪了，看这就标题。就按理说你这个地方应该显示什么，应该显示某网站各商品的什么销，销售统计情况，就是销售量等等这些，但是他这个地方就是作为一个日例，他就作为一个示例，他就写示例了，实际要让你开发的话，你应该你这个报表显示什么数据，你一个人应该什么给客户，给用户什么这个声明，我这个报表就得显示什么数据呢？啊你那你那你这个想示什么，那你你想享受在表表写上，写上就行。它就给你显示到这个地方，这是我们刚刚说的，这是标题，还有什么看，还有哪个参数，这个参数to table to table翻译成中文什么意思。就叫提示框，叫提示框，提示框什么提示框大概就这个地方，你看我一鼠标放上去，看到有个黑色的阴影部分，你看吧。

就这个就是提示信息，我放到哪一个柱体上面，它上面有个提示信息，这个提示设置这个提示信息的，如果你要把这个参数去了，这个提示信息就出不来了，知道吧，这时我们这样子，那你说这个提示信息它为什么显示这样，这里边提示内容包括这个，当然这里提示内容能不能控制它。这个地方大家看这个提示引，你看我鼠标放上去之后，你看这个提示音我能不能控，可以控制。它只不过现在是默认的黑色的，里边显示这种，你想控制随意随时控制怎么控制，在这里边其实可以有一系列的参数，在这个图table，我里边有一系列参数，知道吧，你想控制怎么控制怎么控制，那么阴影部分我说黑色的想不好看，我想着绿色的加别的可以知吧，怎么控制，这里边有参数，懂吧，有参数，那你问老师这些参数有哪些，一会儿我给大家看，那些参数在他文档上边都给你告诉你了，而且写的非常详细，知吗？

我就这事，我说在文档上面都有啊，我先看看吧，先看它这文档啊，在哪个地方看看官网上面看吧，它这有个配置项，配置项上吧，就是那些参数点进来你看看啊。这就是那settle option里边所有的参数，参数里边可以套参数看吗？其中有一个大家这个title你看吗？这个title你看吗？Title我们设置标题的标题，这是这个是设置标题的内容的。这个内容现在显示黑色字体，然后呢，它是在左侧部分，我能不能显示红色字体，显示别的字体随时控制。你可以自己，我也可以让他居中，我也可以让他居右，可以放到左边，下边，右边随意放。

这些随意控制在哪控制，大家在这边控制参数里边看到。这是text的，是显示提示内容，而且还提示内容还可以什么换行，还有什么大家看，你看它有这个什么，看吧，提示内容的样式颜色。你想让提示内容显示什么颜色，字体什么写换成颜色就行，这个什么，你想让它这个什么标题显示什么字体换成字体就行了，有的是斜体什么什么字，什么字体随便放，还有字体的粗细程度，然后呢，还有什这些什么主题风格，这些字体序列知吧，是宋体还是其他的题知吧，这些还有字体的大小都可以随时控制，知在这里边加参数就行，在哪加参数，在这里边再加参数，再加参数，再加参数，你想咋控制咋控制。可以控制它的标题的颜色，这个是吧，位置等等样式随时控制，知道当咱们课堂上就不给他演示这些乱七八糟这些东西了，你课下感兴趣方法教给你，你可以自己控。

在这里边去找，去这里边去找那个这些参数就行了，参数里边套参数，每一个参数什么意思，能取什么值，它上面给你写的非常清晰，非常清楚，你道吧，就是我们说的啊，你比如说他，我就简单举个例子啊，简单举一个例子，我想控制它的什么，假如说这个这个字体我想控制他的。我想把它变成斜体字，你比如说那怎么办呢？找这个，那找它的这个参数，这个参数开头里边这个参数表示控制字体的风格，那我可以再找哪一个在这里边，开头里边还有这个参数，这个参数本身又有风格，又有什么，好几好好几种，就从各个角度上来控制风格，它又有个对象，这个对象里边又有一些属性，其中有一个属性是控制什么。这个吧，放到star表示控制文字体的风格的。

它默认是什么？一般的字体，一般字体，那就是我们刚才看的那种是吧，我想让它变成什么，我想它变成斜体，这是斜体，那你可以把它变成斜体啊，加完就行了。啊，当然我们说他还有别的什么别的字体，还有别的，还有别的一些什么这个这个参数，还有什么别的参数，你看这样，假如说大家这些这些标题，假如还有一个还有什么，还有副标题，有的时就叫副标题，副标题什么小一点，哪个地方哪那title头下边还有一个，还有个参数，除了样式还有是sub sub你知道什吧，Test词sub type数是副标题，副标题的内容，那我这个可以什么显示个副标题，怎么显示副标题，再一个呢，Sub叫test。显示副标题，假如这个副标题，假如测试我就简单写了啊测试副标题行了，这样的话呢，我就控制标题知道吗？然后呢，你再看看，当然大家这里边也可以控制提示框，也可以控制提示框怎么控制。

找提示框，提示框是谁呢？To，看到吗？它下边也有一系列的一系列的属性。提示框里边的信息，但他又能控制什么，你看。提示框里边的信息。控制是位置，看看哪一个控制这种格式，对这个是格式，这个什么，这个是位置，这个提示框的悬浮位置，知道吧，还有这个提示框，那我们来看看这先看这个这个字体吧，还字体这个最明显知吧，效果最明显，说提示框的字体我想给他改一改，改成什么颜色，改成别的颜色，改成别的颜色，那我就说给他加上这个提示框，然后呢，这个地方这个参数，它下边也有很多的各种角度上来描述这种西这个这个信息，然后呢，我其中给他来一个颜色吧，这个这个是标题的颜色。

这个什么，这个提示框里边文字的颜色，颜色改成什么颜色，我们现在是什么颜色的，这是。白色是吧，白色给它改成什么颜色，嗯，蓝色的吧，简单简单举例子啊，好，下边我们这个地方来启动，你看一看啊，当然还有别的参数呢，多着呢，这些参数你说老师我背吗？啊，不用背，它上面给你写这么这么详细，你还用背吗？啊，到时你自己查就行，你想要什么效果过来查就行啊，所以这就是我什老师他这也全部都是中文的，你知道他给外国人写的那插件不一样，外人一一满眼全部英文的，是看着不好看，你看它这种比较好看，你看这个吧，刷一下这个地方大家看吧，刷你看这个标题，看它变成什么斜体字了，下边有个副标题知吧，再一个你看鼠标放去好像看看还不如白色的，对，当然你你自己，你自己自己控制了，你想要啥呢，要啥呢？

到时候你自己来这找这些插件，找这些是吗？找这些参数就行了，那你说老师这些参数这么多，我怎么知道是上面跟你描述的很详细，而且你不用有的时候你不用看它描述，你光看这些什么属性名，你就能猜出来差不多了，知道吧。啊，所以说大概我们说这是我们说他这个地方这两个参数，这两个参数，我们借助这两个参数给大家讲一下，就给大家又提示了一下，说你想要什么效果，到那去查文档里边查参数就行，知道吧，这是这两个参数，下边我们来看还有哪个参数，这个参数legend，这个参数，这个参数什么意思，Legend。叫什么翻译成中文叫图例，是图例什么，就这个地方要不要显示这个东西知道吧。这是我们这个图例啊，那你说老师这个图例有意义吗？有意义啊，但是显示销量啊，而且但还有什么，现在我们这个柱状图是一个什么，最简单的柱状图，它只能显示每一个商品的是吗。

销量，万一我还要，还想让你在同一个柱状图上面，既要显示每一个商品的销量，也要显示某一个，每一个商品的进货量，或者每一个商品的点击量，怎么办？那你就可以什么一任何一个什么数据项都给它什么显示多个柱状图，多个柱一个是红色的，一个是蓝色的，一个是黄色的，那每一种颜色表示什么样的，是销量呢？还是点击量还是进货量呢？这样的话，这个图例就有两个，就大家看就有多个了，知道吧，用什么颜色的表示，表示什么数据道吧，当然他这个最简单，那就一个就就一个销量，那就一个这个图例知道吧。所以这时这个地方可以控制啊，这是我们要说到这，那你看看这个销量上面为啥显示这俩字上面写了销量。

这是王说的这样，那牛老师我万一还有还有进货量和点击量怎么这样的，再讲进货量点击量。进货量，然后他再来让他点击量，那你说他这个颜色到底谁用红色，谁用蓝色，你不用管它自动的给你什么，自动的给你设置，你自动给你下是吧，这显示的时候它也是什么给你什么都给你标注好，谁用什么颜色在图例上给你标注好是吧，这是它是插件比较智能的地方，就这好这时候我要说到这样，这是这个大看这个再看下边这参叫XX这个你猜猜什么地方，对XX什么呀，轴知X叫X轴，X轴什么意思，就这个轴，这个上面显示的什么内容。这个上面显示什么内容，大家看它显示的什么，里边数据就显示各个商品，这叫数据项，这叫一个一个的数据项，有几个商品就有几个数据项啊，它为什么上面有五个商品，就是因为在这个地方指定好了。

五个商品就是六个商品对吗？这是我们按照，而且是按照顺序来制定的，知道吧。这是我刚说这个，这是X轴，就X轴上面显示的这些内容，还有大家看这个地方什么Y轴，这个地方Y轴X轴，我们这个地方是表示数据向轴，叫数据像轴啊，数据向轴，这个Y轴大上这是个Y轴，Y轴是什么，Y轴大看是一个叫什么，不是数据向啊，是数据量。是数据量够吗？数据量轴说每一个商品销售到什么，这个销量是多少，他什么，他在Y轴上面给你有一个一个的刻度，知十二十，30 40，知道吗？这是我们这这是Y，这是吧，叫数据量轴，默认是数据量，那你问老师我可不可以这样让X轴作为数据量轴，让它做数据，数据项轴也可以。

随便设置在哪设置对到这里边到里边去设置对到这里边去设置，哪里边设置，你到这里边去找来。那找X轴。谁做数据项轴，谁做数据量轴，随便，这是X轴下边坐标。你可以指定让它做属于量轴也行，怎么指定，这边有参数知道吗？这当然我们这个指定一般来讲我们习惯了都是什么，X轴则属于向轴，Y轴则属于量轴，知吧，你要想设置也可以设置，知道特别的特殊情况也可以设置，怎么设置，大家自己读这参数，我就不给他一个一个读了，这参数太多了，知道吧。好，这是我们要说的这个X轴Y轴这个地方给大家强调一点，有的同学可能有疑问了，说什么，诶老师，这个数据，这个Y轴，你看Y轴上面啥都没写，你看吧。

哎，他很奇怪啊，他为什么有这种刻度，零十二十三十四十。啊，中间每一个刻度隔了十万一我这个地方有几千，他这个刻度是不是有几千。不是它是怎么样吗？大哥，他这个呢，他这他到底有几个刻度，每一个刻度中间隔多少，它是由谁来决定的？对由你这里边的什么，这个每一个数据项里边的这些数据来决定，他会找你这个最大的那个数据，然后呢，找到那个数据接最接近它的一个整数，一个整一个什么整刻度。找到那个整刻度，假如它这个地方，假如我们是35或者37，那它就往上找一个整刻度，叫40，找到40怎么办？自动的从零开始到40之间给你什么平均分成几个刻度。

这样的话你看的时候好看知道吧，所以这也是这种插件比较智能的地方，它能自动的根据你的最大数据，最大的一个数据项，然后呢，给你平均分几个刻度。它自动的做的插件自动做的知道吧，所以这是我们说的，这好，这是它这个Y轴这个地方，我们就给他说到这。好，下边再看这个参数，S表示S表示系列啊系列啊系列什么意思？系列我们说了一个柱状图上面可以显示考几个数据，哪几个，注意一个是假如一个柱状图讲着销量，一个是进货量，一个是点击量。那这个时候假如我在一个柱状图上面显示一个商品，上面显示三个柱体怎么办？这就三个系列，这就三个系列，这就三个系列，那我们这个地方就想着一个销量，那什么我们整个图上面就一个系列。那这个cros就表示系列，系列。

那这个散热里边这个值你看吗？大哥是个什么数独，数独什么意思说将来你要显示一个系列，在这个数组里边就加一个元素就行了，那这一个元素是个什么对象，这个对象有系列的名字，表示销量，然后呢，这是系列的类型，表示柱状图，要折线图，应该表示别的，然后呢，这是这一个系列的数据。这个数据是跟这个数据数据项的数据相相对应的，它的第一个元素对应是它的销量，它的第二个元素是它的销量，第三个元素是它的销量，这是一一对应的，知道吧，这是一个系列，一个系列，那有老师我要再想是另一个系列怎么办？对，再来一个，再来一个大括核。再来一个大哥知道吧，再来大块，当然这个数据是变了了，知道吧，那那那那那这个图例，这个图例上面也再来一个，再来一个徒弟。这是表示第二个系列，这个图例就表示第二个系列，那么再来一个，再加一个，再加知道吗？当然他这个例子是个最简单的，咱们不做这么复杂了，知道他这个例子就一个系列，这是系列知道吧，所以这是我们知再一个大哈，当然我们来看看每一个系列里边的这些参数，这个是系列的名字。

系列的名称对吧，这个系列名称给谁一样呢？这个系列名称一定要给图例里边，他俩保持一致，这样的话，这个图例说明呢，这个这种情况是用这种图形，用这种颜色来表示，你要再加一个系列，这个系列名字要和这个图例名字一样啊，就这样了，这是就是系列的名称，还有这个这个是系列的类型，系列的类型什么意思，系列的类型决定了将来你这个系列这些数据以什么类型的形式展出来。什么类型的人展示他这个地方默认的是个吧霸，什么意思吧，翻译成中文人叫什么叫柱状图，叫柱状图，叫柱状，柱状的柱体的意思知道吧，那有老师，我能不能以别的形式给我显示同样的数据，以别的形式给我显示，我不显示柱状可以，只要这两种图形的数据格式要求一样，你也可以以什么曲线图或者折线图显示，那曲线图折线图怎么显示？这个地方你别写八了，你写什么烂，烂表示什么，对折线图，烂表示折线图。

腕表折现。你只要一把它改成它好了，它会把你这一系列的数据按折线图来显示。好，这时候我说这您比如说我一会给他测一下，我就用折线度像数。知道吧，好，这个大家家这个是什么意思，这个就很理好理解了，是不是这一个系列的数据啊，这系列的数据，系列的数据，就这一列系列的数据，这个数据要和X轴上数据项一一对应的表示在这个系列当中，然后呢，每一个数据项的数据。

一一对应的，那我们这个东西看看你看了看他这个销量，哪一个商品的销量最多，第三个雪纺号雪纺这将来他会按照这个数据的来，每一个数据项的选项，这个注题它是最大的。那谁是最小的衬衫最小，衬衫最小，那肯定它的数据也是最小，它根据数据画啊。好，这是我们说的这个，关于他这参数，我们就简单给大家说到这儿知道吧。啊，当然我们说它不止这些参数，还有很多别的参数，别的参数到时候你想要什么效果，到图形到那个什么文档上去找就行了。好，这是我们这好下边呢，我再启动一下我们这个服务器来访问一下我这个什么改成折线图了，它就按折线图给我显示这些图形，显示这个报表了，你看看啊。

然后呢，这个地方来，我这个地方来刷新一下，你看刷新一下看到吧，它折现都会显示知你想让它显示什么图，你只要把你的数据给到他按照什么图给你显示。那就老师我有还有没有用别的图形显示，我想用饼状图环状图行不行，只要这个数据格式它要求是这样子都可以，这个状随便画。你问老师，我怎么知道哪一个图形，这个地方，这个类型写什么，到哪去找，文档里边去找。看看这个系列的类型能取哪些值，你可以看一看哪个找sro系列，系列谁呢？看S看吧，它下边有哪些系列，你看吧，这些系列看吧，折线图柱状图知吧，这是柱状这个派，这个派是什么我忘了啊，对，这个是这个饼状图知道吗？还有什么。

这个该该的，好像是这个是对散点图是吧，然后呢，这个这个这个也是一个特殊的这种阵容，对这也是一个特殊的一种动画带动画效果的这种散点图，这个我没用过，再一个是雷达图，雷达图。对，这种就你只要把你的数据给到他们，你想这种还有一些别的什么树状图，这不这我们不说还有什么，还有什么地图，Map地图。就是你要显示全国的地图或全世界的地图。他给你什么，这个都给你显示出来，他这个效果好像没给我们列出来，你看能显示地图，他这个地图卖出。他说好像没有，没有这种效果。他没给我们贴出，贴出来这种效果能享受地图。啊，然后呢，大家还有后边这些这个大家这个看到这个啥。

Final叫什么漏斗图啊，一会儿我们就准备用这个漏斗图。这些，所以到时候你想用什么图，你到找就行了。好，这时候我们还说了，关于我们这个一叉子这种插件呢，我们这个它的基本的用法，我们就给它介到这儿了。好。