158_CRM项目-Echarts统计图3原创

嗯，在这里边是不是有个这个实例啊同学们。还有个这个官方的实例，你看啊，左边呢是它的这个菜单啊，左边这个小圆圈呢，是他的这个缩略图，OK吧，好比如说这个折线图啊，折线图是我们经常会出现的一种图，但是折线图它也不仅仅只是给你提供了一种样式。啊，好几种呢，是吧，比如说老师随便点一个啊，你看这个一串做的最好的什么呢？左边是什么。左边是代码，右边是图对吧，我随便改一个数值啊，我把这个我再加个零。怎么样？哎，实时变更呢，说这点是很不错呀，对吧？好，那么除了这个折线图啊，其实我们以后用的最多的啊，这个一个是柱状图，一个叫饼状图，这两个其实我们以后啊，如果做统计图啊，用的其实最多的OK吧，好，我随便点一个啊，比如说这个饼状图，你看它这个动画效果越出色，就相当于它这个源码就越多，看到没啊，但是你看看是不是也离不开这个option啊对吧？好。

但是除此之外啊，散点图这个东西我没做过啊，密密麻麻什么玩意儿，这是这上面是提供的是数据啊，然后下边提供的是什么，下边提供是图吧，啊，你看这个option是不是在这呢，上面提供的数据啊，但是你在实际项目开发中，这些东西是不是肯定都是什么呀。肯定都是什么，是不是都是这个数据库表中提供的数据啊，但是这个数据你看看人家要求的是什么呢？内value什么意思。其实有些的同学已经发现了，我是不是点刚才点好几个图了，是不是都叫内部和白六啊。嗯，包括咱们刚才写的那个啊，我靠刚才写的这个太简单了是吧？啊内部和VALUE6没有，我说行啊，大家注意啊，只要是相对来讲比较复杂的数据，咱们肯定是什么呢？杰森，OK吧，好，Name表示的是我要统计的这一项啊，OK吧，那个value指的是什么呢？我们要统计的数量，哎，这个是不是正好。

贴合于我们刚才写的这个SQL语句啊。阶段数量，这个阶段啊，指的就是我们要统计的这一项，那这个count表示的就是什么呢？数量是这样吗？但是大家想想这一个问题啊，我一会儿在做查询的时候，我仅仅只返回，那仅仅只返回这个count能不能行呢？不行吧，因为你这个名字人家不识别，大家注意看啊，人家只识别什么呢。Name和什么value想象者怎么办啊，我们继续再往下看一看啊，嗯，还有什么呢，我看看啊。

地理坐标。啊，这个图啊，以前我带大家看过吧，这个。看看这个，这个是公交线路图，这个设计挺狠的，这个这个是一种这个相对来讲比较高级的这个图的啊，啊地图这种东西啊，你你这个如果真要学它的话，它不仅仅只是我们当前的这个差件的啊，OK吧啊，当然它也是可以放大的嘛，这个是公交的这个线路对不对啊，我跟你说嘛，这个百度做这些东西是很擅长，因为百度做地图不就是很擅长嘛，对不对。嗯，我看看啊，咱们要做的是哪个啊。我靠，找不着了，咱们要做的是一个漏斗图啊，往下翻一翻，我看看这个竖图啊，其实也挺漂亮的啊，咱们要做的是这个漏斗图对不对。

漏斗图啊，我们是不是要做一个这个倒三角啊，哎，就给你们这个啊，来一个这个倒三角，但是大家注意看咱们这个倒三角啊。看没看到咱们这些统计项，这是一般的咱们这个接身数据啊，只要是接审啊，你统计的都是什么呢？Y流和什么呢，同学们。Name name放前面或者value放前面，这个无所谓。是这样吧，接什么就好比什么呢，你一个人，你的属性是name放前面还是age放前面，还是address地址放前面，这个是不是无所谓啊，但是这个name永远指的是什么呢，同学们。内永远指的是什么？咱们是不是要统计的像啊，那这个value指的是什么呢？是不是这个阶段所对应的这个数量啊，是这样吧，统计项所对应的数量，所以说我们现在要用到的就是这个option啊，我给它粘过来，我要粘的是这个模板啊，好代替我们原有的这个柱状图啊。

其实我们把它统计成柱状图也挺好看是吧？好。来试试啊，这回咱们有没有给他改过来啊？这回又是一个什么了呢？啊，这是不是不是这个漏斗图了，对吧？好，之前咱们这个漏斗图啊，其实咱们这个统计的这些像啊，这些个文字啊，其实都是写在里面的啊，都是写在里面的，都写在这里了，OK吧，但是现在啊，为什么咱们把这个源码传过来之后的默认这个写在外面了啊，是因为大家注意啊，咱们早早晚晚会遇到的是这个漏斗的这个尖儿对不对，这个尖儿你看如果是订单两个字，而且这个字比较小的话，是不是刚好能容纳这两个字。

你再多一个字，咱们是相当于这个信息统计项的，这个信息它的名字会显示的是不全的。能理解老师意思吧，好，所以说啊，咱们这个啊，最新版本的啊，是把咱们这个订单啊给他往这个外面显示的，能理解吧，好往外面显示的啊好，我们来去修复一下这个漏斗图啊，同学们修复完之后咱们再来解析它啊跟我们的。这个阶段和数量有什么关系啊，这个一会儿再解析啊，比如说咱们来一个。交易漏斗图啊，这个我们来一个什么呢？统计交易阶段数量的。漏斗图啊。呃，这个百分比这种东西啊，根据这个客户的需求，你可以传过来咱们这个传，传过来咱们这个数据啊，往里填也可以啊，但对于咱们来讲啊，尽量这个简单一些，我们现在暂时不用，然后这个拖这个工具箱工具盒啊，其实也没啥用啊，这个工具箱就在这儿呢，看到没？

啊，其实也没啥用。数据视图就相当于什么呢？把这些项干嘛？同学们来给它变成这些个数据了，看到没啊？访问有多少项，咨询有多少项？它其实就是我们所看到的这些数据对吧。这是什么？还原这个没啥用啊。保存为图片，这个确实能保存成图片啊，点一下它保存文件，能把它保存成一个图片啊，就是咱咱们保存一下。啊，直接确定。漏斗图。你看啊，这是一张图片啊，OK吧，好，但是这个工具啊，还是挺冗余的，这个东西咱们就先给干掉了啊，哎，我这个东西怎么串到这来了。

土boss咱不要了啊。然后下边这些东西，根据用户的这个需求啊，这个要不要都行，这些都无所谓，要不要都行了啊，来交易漏斗图。啊，也就是说啊，有一些旁支细节的这些个属性啊，如果以后你真的遇到这种需求了，根据用户的这个需求，你再去这个逐步的按照每一个属性的这个修改，再去研究这些东西，能理解吧，我们现在先把这个主干这个漏斗啊，先给他做了OK吧，好，我们现在来看一看啊，给他设置的这个尽量简洁一些，好，那么我们现在来看这些数据啊，现在暂时都是些事啊，比如说什么访问是60条，什么咨询是40条，订单是20条，对吧？好，那我们想要的这个数据它应该是什么样的呢？同学。

嗯。那我改一改啊，比如说零一资质审查是是这么玩的吧，零二需求分析。零三价值建业。啊，然后呢，0004是什么来着。管他呢，咱们来一个零六谈判复审。啊，咱们再来个零七成交。我们要的是不是这些啊，OK了，好，咱们来看一看，最终咱们统计的这个结果是这样的，看到没？你看零七成交数最多啊，往上排。OK吧，这是我们想要的一种结果啊，好，那比如说我随便改改这个数据啊，比如说这个啊，需求分析我改成四条，然后价值建议我改成220条，我就随便改了两个数值，我们来看一看这个漏斗图的变化啊，同学们走一个。

不行了，太丑了，受不了了啊啊是因为什么呢？这个四条啊，这实在是太少了，那老师那以后那数据那那就这么少，那怎么办呢？好这就这才是漏斗啊。对不对，你下班你得你得监呐，没错吧，开玩笑呢啊开玩笑呢，也就是说将来如果有这种这个啊统计图的这种需求，咱们这个数据量啊，这张表的数据量啊，肯定老老多了，能理解吧，咱不能说是海量级别的数据吧啊但是呢，怎么至少至少得几千条，OK吧，所以说啊，我们以后这个图啊是绝对不会太难看的，OK吧，好所以说再怎么比如说咱们来个114条，你看这回就能这个抢不少。

啊，他太胖了是因为什么呢？是因为我们这个宽啊，宽高比的这个问题，OK吧，这些东西你是可以自己手动调的，老师啊，这一张这个裸露的图貌似并不是很好看啊，对吧？好，所以说呢，大家注意啊，我们现在这个背景啊，不像我们之前做的那些东西啊，它现在是需要一个这个背景颜色或者是背景图的，OK吗？再有一个就是什么呢？我们以后做这个图啊，大家注意啊，漏斗图本身来讲啊。数据量多，那它就漂亮能理解吧，而且是什么呢？需要它的是什么呢？这个选项也多，统计项也多，我们现在啊，满打满算是不就九项啊，没错吧，统计项一多，数据量一上来，咱们这个漏斗图才好看，OK吧，所以说呢，我们一般来讲，在公司里边所做的是以什么为主呢？一个是柱状图，一个是什么呢？饼状图，但是这两个图太low了，太简单了，OK吧，所以说啊，我硬给你挑出来一个漏斗图带大家看一看，OK吧，因为咱们这个漏斗图它得走阶层，咱们那个饼图啊和那个柱图啊，太简单了，OK吧，所以说你学会了这个value name，你学会了咱们后台circle这个分组的这个使用。

那将来这个一串就难不倒你，OK吧，好，还有一种形式是什么呢？将来我们这个图啊，可以做成一种什么呢？这个几分图，什么叫几分图呢？也就是说啊，我们可以完全根据这个同一个这个统计项来统计这个数量，但是这个对于这个图的展现其实不一样的，OK们我个人比较喜欢的是一个什么呢？这个啊四分图也是这边啊，以饼状的形式来展现，这边以折线形式来展现，这边是以这个柱状的形式来展现，我比较喜欢的这种形式，OK吧，好，所以说啊，当你这个图变得丰富多彩了，他一定会很好看的，OK吧，好，我们现在啊需要把这些数据干嘛呀，同学们。是不是变活呀？哎，这个才是啊，我们今天上午的这个重点呢，对不对？好，那至于用什么图，你就copy什么option模板就行了，是这样吗？那最重要的是我们如何跟这个后台做一个交互，好，我们现在来看一看啊，你get char，大家注意看啊，我们要发出一个阿贾克斯请求来取数据。

没问题吧？为什么要发阿贾克斯请求呢？老师，你要做这个页面的局部刷新吧，我其实啊，我其实要做的是什么呢？人家要的是什么呀，接数据啊。所以说我只能发一个阿贾克斯请求，然后什么呢？通过后台给我的响应回来的data取健身数据，是这样吧，好，所以说我这张图它肯定是在阿贾克斯的这个回到函数里边来画，因为我们得先走后台才能取数据，拿到数据之后，咱们是不是才能作为这个画图的这个啊数据来呈现呢，对吧，好，我们现在走一个阿贾克斯啊。

来个t1.7SP阿贾克斯。啊，这个是我们这个阶段啊，最后一次用阿贾克斯。有没有觉得特别伤感？项目终于写完了是吧，长舒了一口气啊，但是你们明天还有活呢。来看看啊，咱们比如说给它叫做get。OK吧？咱们就要这个统计图相关的这个数据就行了啊。贝。不用穿吧，这啥也不用啊，Tap取数据，咱们来一个get OK吧啊，Data。好，贝塔要什么？分析一下吧，看大家了，大家注意啊，我现在啊，我很明确告诉你啊，Data塔要什么，以前对于前端来讲的话，Data塔要什么在于什么呢？我一会儿在这张页面上需要展现什么，是这样吗？OK吧，好，那大家注意啊，我一会儿这个插件用什么呢？我需要用到一个MAX100，也就是说啊，我的总条数。

总条数我还得用什么，我还得用这个他貌似很熟悉吧，同学们。啊。我先把它注了啊，同学们啊，看看啊。我管的这个100啊，我给它起一个名字，你们一定能回想起来，叫做贝塔。点。偷头数的总条数，下边的这个呢。对他点对他。

丽，还记得不？是这样吗？所以说咱们这个data要的是什么呢？是不是要一个总条数totl啊是这样吧，再要一个什么。啊，比如说这个就来个100条吧，好，再有一个data list对不对，好。这是一个一个的对象啊，对不对。这里边儿呢，到底是个什么鬼呢？我要的是什么？来来来来，看看模板，我要的是不是这种形式啊？来，我给你粘过来啊。这是我要的形式。看到没？等等等啊，这种形式应该怎么玩呢？以前呢，在这里边儿，咱们是不是玩的是对象。

对象貌似玩不转了，归根结底，我们在做这个circle语句查询的时候，咱们来设置的这个result type。他返回的这个内容，它返回的这个类型，它到底是什么，返回一个对象行吗？返回一个行不行。这还记得不？我返回什么？我要查的是it和count，如果你返回train的话，Train能封装stage对不对？但是train封装不了count呀。还记得吗？