157_CRM项目-Echarts统计图2原创

啊，官网啊，咱们刚才进来了是吧？嗯，啊里边是不是有个下载啊。啊，这个下载啊，然后在这个下载页面啊，大家注意看啊，诶有没有看呢。GI har版这个东西咱学过吧啊，其实从这个GIHUB上也可以把这个东西给他搞到OK吧，好啊，咱们可以这个下载什么压缩版呐，什么源代码啊，这些东西啊，咱们就不碰了啊，这也是我们这个啊最常见的一种形式，对于咱们来讲，也是以前对于我们来讲是唯一的手段，对吧，到官网上去想。然后第二步呢，在e trust的这个githarb上下载最新的这个版本啊，刚才我们看到了这个githar对吧？好，咱们可以直接在guitar上下，呃，第三步啊，咱可以通过这个NPM来获取这个ER，这个NPM啊，对于我们以后实际项目开发来讲的话，有可能会遇到。

但是呢，这个东西不归我们来使用，这个NPM是纯前端开发人员来使用的，OK吧啊，这个NPM是这个NOEGS所开发的一个这个命令号工具啊，那么同时呢，这个NPM啊，它也是我们全世界最大的前端生态仓库，你所有的这个前端的资源都可以从这个NPM上获取，OK吧，那么通过他这个命令行啊，你安装了NPM之后啊，你直接敲这个命令就行了，你敲一个这个install就行了，OK了，我给大家举个例子啊。比如说啊，你安了这个NPM之后啊，这个东西安装还挺简单的啊，比如说为你当前的这个项目啊，啊导入一个解扣眼，我们以前是不是从官网上下那个J啊，或者你要按一个boop，咱们以前是不到官网上下boop，然后得手动一导，对吧，人家就是一个命令。Install啊，怎么来个接Qu EY啊，直接敲个回车就进来了，是非常的简单，它会自动下载啊，自动下载啊，前端所玩的这些东西啊，都是相对来讲挺高端的，那但是对于我们来讲涉及不到太多的前端的这个生态仓库，OK吧，所以说我们一般来讲都是什么呢？咱们后端人员一般来讲很少使用这个NPM。

OK吧，我们一般来讲是不是都是下载完之后直接往这边粘呢，对不对，好行，这是一种啊，然后最后啊，咱们可以从这个CDN这个GS啊，或者国内一些个这个知名的这个社区啊，啊，找到咱们这个E的这个最新版本社区这个概念在这个国内。啊，给人感觉不是那么十分的这个火爆啊，这个但是在这个国外啊，这个社区啊，是非常火爆，OK吧，啊，国外的那个社区啊，这个环境是真的，我说句实话啊，这个不是说。

不是说这个国内不好，国外好，这个外来和尚好念好好好念经的问题，这个真不是OK吧，好，这个是是因为什么呢？这个人家这个技术啊，技术肯定是这个国外出的，这个比较早，对不对，因为语言不不也是人家发明的嘛，对不对啊，咱中国好像出了一个什么语言来着，我记得叫。是议员是吧，我记得叫议员是吧，现在没火是吧？啊没火不行，我都多少年了，我从最早那几年前，我都十都十多年前了，我听到这个语言啊，啊一直到现在啊，就默默无闻了，对吧？所以说这个国外的这个啊环境啊，这个尤其是这个社区的环境挺好的，那国内的社区都在争论的是什么吗？是哪个技术好，哪个技术差，国外的环境是啥呢？抛开一个问题来，大家一起去完善它。能理解吧，哎，你想想这种环境那多爽啊，是这样吗？你国内啊啊啊，我用的是MY，白用海的都是傻叉，这是国内款式，你知道吗？啊，成天争论这些个东西，你知道吗？

哎，就是键盘侠无脑喷嘛，对吧？啊都这样啊行了啊，但是国内也有几个好社区啊，这个你们现在暂时参与不当啊以后。啊，开发干个几年啊，这些东西自然而然就知道了啊，啊行，咱们来这个引入这个e trust啊e trust这个引入啊，非常非常的简单啊，大家注意看咱们来个什么呢？是不是跟那个引咱们以前那个解扣也是一模一模一样的，你直接引过来就行了啊行，咱们也引一下啊。嗯。啊。

啊，完了啊，老师再演一个，我这有个那个解扣呀，啊，但是我刚说完，是不是这个E串是不支持解扣呀，啊，这个解扣是我要用啊，不是他要用OK吧。呢，这个在这呢是吧。行了，把它拿回来就行了啊好，页面加载完毕之后啊，咱们来一个。啊，这个咱们没有闭合是吧。啊，在这呢啊，咱们来一个script。Dollar function。好。在页面。

加载完毕后啊，我们来这个绘制这个啊，统计图表，好，咱们来一个gets吧，Get trust。Function啊啊，我随便谈一个123啊，看看咱们导的这些东西啊，啊是正确与否啊。先起一下。啊，咱们重新进一下啊。张三一二三点登录好，我们来统计图表。

交易统计图这123谈了是吧，我看看咱们那个一串进来呗，啊交易统计图表。哎，咱们得看网络是吧，那大家注意看啊，咱们是不是这个E串这个min点这个JS注意看啊，它的这个啊，想要的招牌码是多少。是不是200 200表示什么。200是不是表示响应成功啊？咱们这个状态码都学过哪些，想一想。二百四零四四零四表示什么找不到的资源，对不对？405呢。405，你的请求不被允许，是这样吗？比如说你在so net里边只有一个do get方法，但是我浏览器端非得以POS的形式来请求，是这样吗？啊，405还有什么我们最喜欢的是什么？500啊，是这样吗？500是属于什么服务器端的这个异常确确实实是你代码出现错误了，是这样吧，好，还有一些个，比如说302表示的是重定向，304表示的是读这个页面缓存等等啊，但是这个200和464你是必须得给我知道啊，好，因为我为什么要说一个这个啊，好多同学在做那个分页那一块啊，包括你们这个将来的那个考试啊，哎呀，前面都写完了，后边这个数据也读了啊，这次数据肯定读了啊，这个列表也局部刷新出来，我数据库表中的数据了，我靠分页啊，就是不出，死活就是不出，首先你得先看一看什么呢？你那个分页插件有没有导入成功，能理解吧，到时候你按F12点一下。

网络啊，你点一下你看看它如果是个404的话，是说明没有加载进来，能理解吧，那如果你导的这个分差件它是200的话，是不是还是因为你代码错了，因为资源肯定是导入成功的，能理解吧。

行，接下来啊，我们再来看啊，继续往下看这个教程啊呃，我们接下来来绘制一个这个简单的图表啊，我们马上就能看得到啊，它这个图表是什么样啊，那在绘图前呢，我们需要为e trust准备一个具备啊宽高的倒容器，请注意啊，是倒容器。OK吧啊，他下意识的告诉你是什么呢？啊，杰克瑞没戏，咱们一会玩的肯定是盗对象了，对吧？好，我们现在啊，把这个div啊给它原封不动的粘过来，代替我们原有的这个123，其实这句话表示的是什么呢？你看这个div是不是一个盒子，我这为这个盒子定制一个宽600高四百，我要在这个宽600高四百的这个盒子中，我要画图的。能理解吧，我统计图啊，要画在这里边OK吧，好，接下来继续看啊。

然后可以通过什么呢？E trust.init方法初始化一个ER实例啊，初始化这个一串是实例在这啊。这一句。啊。啊，这个123不谈了啊，在这写啊，基于准备好的到初始化一串实例，这个就是咱们这个一串实例，那这一句话大家注意啊，document.get element BYD是不是很亲切啊。啊面找到这个盗墓对象，这句话其实啊，不仅仅只是把这个实例给他拿到了，更重要的是什么呢？Init说初始化，初始化的咱们是不是咱们这个道墓容器啊，对不对，就相当于什么呢？我要告诉这个div，我要告诉这个道母容器，我要在你这里边画图了，能理解吧？啊，我要在你这里边画图了啊好，接下来啊，我们就来看看什么呢？指定图表的配置项和数据，那大家注意看啊，这个option其实就是个什么呢。

就是我们要画的图OK吗？我们要画的图好。然后这里边儿具体的这些项啊，你可以自己去做实验啊，这个老师不一个一个解析了，你可以继续往下翻，OK吧，啊这里边啊都有这个各种这个属性，这个解释两天解释不完，OK吧，咱们可以慢慢这个做实验，比如说你去掉一个属性，看看咱们这个图有没有什么变化。这么来考量也可以OK吧，好啊，这个option啊，就是我们要画的。图啊，我们要画的图。好。来最后一步啊，使用刚指定的配置项和数据啊，显示图表。

My chart，这个my chart是什么来着？还记得吧？这个卖串的是不是，是不是刚才咱们。初始化的这个一串实例啊，对不对，通过这个实例啊，调一个set option啊，这句这个方法呢，表示画图的意思，画的是哪个图呢？按照哪个图的这个模样来画，这个option能理解吧，Option啊。那现在咱们其实画的就是一个那个柱状图啊，啊，就是这么一个这个简单的柱状图，咱们就诞生了，OK吧，好来试一试啊。保存一下来一个啊。交易统计图好使吧？这个火狐啊，我感觉在这个浏览器上感染了。

看看啊，其实这个图的这个动画啊，是真的，是不是像刚才咱们显示的那么卡啊。有没有看到这回可以吧，哎，如丝般顺滑是吧，秒杀德芙十条街是啊行啊，但是咱们这个开发我我我个人啊，还是这个比较这个老观念啊，我还是比较喜欢用这个。火狐OK吧，当然这个它该有的这个F12这个选项呢，其实咱们这个谷歌和这个其实360浏览器都有啊，都可以使用OK吧都可以啊，但是这个这个东西它一个这个固相思维就很很难去改变了啊，我还是习惯用这个火狐了，OK吧，好，这是一项啊，这是一项，那么大家注意看这个option，就是我们要画的这个图的这个模板对不对，那么我们在这个使用e char的时候都可以画哪些图呢？好一会我们来看一看啊。