echarts详细教程

欢迎大家来到咱们这次的课程，咱们这一次呢准备跟大家来说说 exx 这个东西，其实 exx 这个东西本身是非常简单的， 不过呢咱们就带领大家一块来动动手，对吧？看看这个东西到底怎么用，有什么样的花活可以玩。首先呢，咱们惯例先对这个一叉子做一个很简单的一个介绍，咱先把它的官网打开啊，然后呢，我们的一叉子你给我过来一 x， 他换官网了，然后原来是在那个百度底下，现在去阿帕奇了，因为这个项目现在被阿帕奇拿走了吗？阿帕奇负责更新，所以现在已经变成了一个一叉子，阿帕奇点二 g 了，对吧？ 当然无所谓啊，你一搜就能搜出来。然后呢，这个一叉子是用来做图表的，然后它里面有大量的这种图表，可以直接去用，什么柱状图，饼图，雷达图，散点图，乱八七糟，你看这左边全都是对吧？基本上来说你日常的这个操作他都能够满足你，什么？这是线图，折线图，对吧？然后包括那个柱状 放图，包括这个丙图，然后并且他这个官方的文档有点纠结，因为他曾经是百度的项目吗？对吧？曾经是一个中国项目，所以你会发现他这里面各种各样的这个案例，有的是中文的，有的是英文的，特别的好玩哈，这个东西挺有意思的。 然后呢，包括这什么散点图啊，什么地图啊，什么这些什么什么之类的，反正很多都可以直接用。那么既然咱们现在已经知道了他是一个专门做图表用的一个库，那么咱们应该如何去使用它呢？很简单，咱们任何一个东西，第一件事都是直接先把它安装上，对吧？ 当然他这有几种方式哈，你可以当漏的，然后他这当漏的里面有好几个版本，你给我过来，人呢，在这呢，现在最新的是这个四点八版，他是从那个四点零的那个大版本开始加了那个三地图，那个特别的。好，等一下，我的咱朋友在这呢，他从那个四点零那个大版本开始加了那个 gl 的， 就这种三 d 的，这个看起来就分外的炫酷的感觉，对吧？你倒是出来呀，哎，想给大家看一下，这么费劲啊，没关系没关系，反正你看这个图也能大概的看出来，对吧？这种感觉很好，这边让他慢慢加载去吧，反正回头咱们能看见。哎，出来了，太好了，你咋没渲染出来呢？能快点不？这东西反正有点慢哈，咱接着说咱的。 然后呢，咱们第一步是安装，你有两种方法，第一种呢，是从这边直接做这个当漏的，但是说实话，当漏的这个很多问题， 所以呢，咱们选择用那个 npm 来装，首先呢，咱们先随便的开一个这个大开窗口，对吧？然后接下来咱换到咱们现在的这个目录一叉瓷，然后在这个里面呢，咱就直接来装，你就装这个一叉瓷就可以。当， 当然，咱们这节课就来说说 exx 他的原声开发，毕竟原声的，你明白了，你接下来跟什么 read， 跟 vivo， 跟安哥了，跟什么乱八七， 容易去配，其实都是好配的。那么现在呢，咱们来装一下，这边我就让他先装着，咱先把咱的项目打开，好吧，咱两不耽误，这边反正装的也不会特别慢。然后呢，现在这时候咱先稍微的给他拿出来这个东西，我就叫他这个好 有了，接下来呢，我把刚才那句话给他拿过来啊，第一个安装，安装很简单，直接 npm 去装，装一叉词就足够了。然后接下来呢，第二步，咱们要引用他，因为在咱们这一课里面准备说说怎么样去做原声开发，所以咱现在就不去配那些什么歪派克之类那些乱八七糟的东西， 咱一切以这个最原声，等一下这边没完，以最原声的为主。所以呢，第二件事你需要做的就是把它掏出来，好吧，这个 exce 他在装完之后，他里面有一个这个带刺的，当时所有的库基本上都有带刺的，然后在它里面呢，你就可以看到他的各种各样的这个版本的一个酷，咱现在就拿这个 exc 就可以，好吧，当然你说，哎，我现在开发阶段，我想用他那个没打包的，可以，没问题，你也可以用这个，我用面就是因为面小一些嘛。然后呢，现在把这个东西拿过来之后，我给他放在这，接下来呢，咱们就可以来建一个咱们的文件，比方说我叫他引带词点 h 贴面， 接下来呢，咱稍微弄一点 a t 面之后，咱就可以来引这个文件了。比方说呢，我这边就来引一下这个 exx 点 min 点 gs， 这个东西已经有了，接下来呢，在我这里面咱就正式的来写跟他相关的东西。当然首先呢，对这个 exce 来说，对于这个图表来说，你需要先给他一个容器，就是说我这个图表要放在哪，对不对？你 这个容器的大小就决定了那个图的大小，他是不会超出你这个容器的，这样的话你布局就会很方便，比方我左边有一块什么显示数据的，然后右上角有一个图，对吧？这个你就安排就很随意。然后现在呢，咱就随便的，比方说这个东西我就叫他微 vo 吧，名字叫什么，其实真的无所谓，对吧？你爱怎么取怎么取。然后接下来呢，咱稍微给来点样子，比方说我这个 vivo 呢，往上他宽是个四百，然后往上高是个三百，好吧，随便一点。 然后呢，我为了让大家看得见他，毕竟一个普通的 diy 就是一个大白框，什么也没有，所以现在我给他来个边框。那么这个时候呢，咱其实就可以看到这个小白框了。 接下来咱们就可以继续了，首先在用咱们的这个一叉刺的时候，有这么几个基本的步骤，第一步呢，你需要先对他进行一个初始化的操作，然后接下来呢，第二步你需要去调整他的各种各样的参数，这个参数其实是一叉次的一个核心。 然后第三步呢，哎，怎么多一杠？然后第三步呢，你需要去设置这个参数，基本上来说就是这三件事，咱一个一个来。首先呢，因为咱们刚才不是有一个容器吗？也就是这个 vivo， 那么咱们现在呢，就先把这个容器给他选择过了， 对吧？咱直接用一个，这玩意快锐死了。然后我要求是这个 vivo 等一下少个点点 vivo， 因为他是个克拉斯吗？然后咬了这个 vivo。 之后呢，接下来你就可以直接一叉词点音内的，因为咱刚就说了吗，这个是一个初始化，然后呢，把这个 vivo 丢给他，意思就是说你就在这里面渲染就行，不要出这个圈。他说好的，然后， 然后呢，有了这个之后咱们就得到了，我管他叫做叉叉一，好吧？就是咱们的一个图表对象吗？然后接下来你对这个图表所做的所有的操作全都通过叉叉一这个对象来完成。 然后再接下来呢，你需要给他准备一个参数，这个参数一般情况下在他这叫做 office， 这个 open 里面可以写很多很多好玩的东西。 然后再接下来呢，你需要给这个 xt 一去做一个赛特奥普森，把这个奥普森给他设置进去，就这么简单。当然现在我什么都没有的情况下，他依然是一大白板，因为你就没东西， 对不对？当然也不会报错哈。然后你就没东西呢？当然是不行，我现在就先从他那个官方的一个 apple 里面咱先瞪一个过来让大家看看，好吧？你比方说我就看上他这个图了，好吧？假设啊，我看上他这个图了，然后一般他这个官方文档里就会告诉你这个 office 应该怎么写，对吧？你可以看到有这一图， 因为实际上来说，对他那边来说，那个因那他跟那个赛他都是没什么用的东西，他重点就是这个奥普甚，所以他在那个官方文档里也只会把这个奥普甚相关的东西给你列出来，别的东西他就不列了，对吧？ 好，那么现在这个东西咬了之后，格式略微的整理一下啊，不然看着实在是太恶心了，对吧？我把这个东西往回缩一缩，好，缩完之后还是不对劲，等一下啊，再给他 缩一缩，这时候呢，就差不多了，等一下，我这好像多了一个。行，那这时候就差不多了，然后呢，现在咱们再回到咱们的那个图那去，我刷这时候你就可以看到，是不是一个这个折线图就已经出来了， 并且跟他官方那个除了大小不一样以外，其实别的都是一样的，这个大小完全取决于你这边的这个容器的大小，当然这 这个包括这个什么边啊？空白留白，包括图例之类的这些东西你愿意的话都是可以定制的，那么顺便看看他那个三 d 图有没有加载出来，嗯，这就对了，对吧？要的就是这种感觉。 所以他这个一叉四这是个什么东西？好像是个城市哈，反正这个一叉子自从那个高版本开始，他有了这个 gl 图，也就是三 d 的这个图，这个还蛮蛮蛮蛮炫的，对吧？至于你说有多大用，这个再说哈，一般用来做那个数据可视化为主。好，那么现在呢，咱们就大致了解了这个一叉子他的一个使用的过程，主要就是在这个，对吧？ 别的东西都靠边站，几乎没用，就靠这个就足够了。然后接下来呢，咱们把他删了，对吧？大家说，老师好好的，咋删了？来，咱们来从头写一个啊？不是，咱们来看看这个， 这里面都包括什么？首先呢，他这个凹陷一般就是画图吗？对吧？对于一个图表来说，你说还有什么？无非就是横轴、纵轴，包括这个图的数据，对吧？也就是这几样东西所 所以呢，咱们这写的时候也是一样的，我这边呢，先加一个 x 的 xx， 这个 xx 咱知道，就是坐标轴，对吧？就是那玩意，然后一个 x 轴，一个歪轴， xxx 写错了哈，然后一个 x 轴，一个歪轴，然后这两个分别对应的是横轴跟纵轴，横轴就这个对吧？纵轴就这个，我 相信图表这东西大家都基本了解，对吧？咱虽然不一定是做这工作，但基本了解。然后呢，在接下来呢，这边还有一个 siris， 这个 siris 是什么东西呢？这个 siris 是你图表的那个数据，当然注意他是一个数组，哎，为什么是一个数组呢？因为在他里面有 有很多图是叠在一起的，什么意思呢？你像这个就是一个很明显的例子，我这不是一个图，我这其实是五个图，五个折线图，对不对？所以如果在这种情况下，假设我做的是他这样的，那我这个 siris 里面就要放五个东西， 明白我意思吧？不过现在呢，咱们就先放一个，因为咱现在就比方做一个类似于这样，咱做个柱上图吧，老做折线图也没意思。然后呢，在这里面咱们就一个一个的来，首先咱们需要先规定他的那个 x 轴到底都有什么东西在这呢？咱们这里面有几个比较重要的，第一， x 轴你需要给他一个态度，需要给他一个类型，你得告诉他我要的这个 x 轴是显示什么东西的，他这有几种常见的，比方说什么歪柳，就直接把直显示在 x 轴上，这种是存在的。不过对于咱们这来说，咱要求他显示的是一些标签，然后包括还有什么时间轴之类的，所以呢， 我这我给他一个 carry， 等一下拼错了， carry， 然后这个 carry 咱们知道翻译过来是不就类别，其实就是让他按照类别来给我显示，对吧？比方说咱现在做一个柱状图，咱们统计各种东西的一个产量吧，好吧，来个产量。那现在呢？我来个 get 这个 带他里面，比方说钢铁，对吧？钢铁钢铁，好，然后比方说再来一个什么煤炭，好吧？我不是搞那个能源行业的，不清楚啊，咱们就随便瞎写，比如电力 说再来一个石油，好吧？石油，好，呃，就这四个吧，好吧，咱也别搞太多。那么这个呢，其实 x 轴就已经定好了，就告诉他我现在要显示的是类目类别，然后 并且呢这里面分别对应了四个类别，对吧？煤炭是多少？什么钢铁是多少？电力石油是多少，对吧？然后再接下来呢，咱们就需要那个歪轴，那个歪轴 对咱们现在来说倒比较简单，我直接让他是显示歪六的就行，好吧？显示直的就行。当然在现在这个时候，你这个图是出不来的，因为没有 数据，对吧？你让我显示啥呀？所以接下来呢，咱们还需要这个斯瑞斯，在这个斯瑞斯的里面呢，我现在要求他的泰普是一个把把，就是柱子吗？对不对？所谓把图就是柱状图，就咱们平常见到这种最俗最常见的图，然后呢，再接下来我会给他一个对他 你最重要的这个思瑞思里面就是数据，对不对？没有别的好。那么咱们先就来编造几个数据，比方说我国今年的钢铁产量，我不知道啊，瞎说的，比， 比方说什么七千五百亿吨，好吧，我不知道说的是多是少哈，比方说七千五行吧，咱也不说单位了。然后呢？煤炭产量，比方说是什么三千五百万行吧？三千五百万吨，比方说电力可能是什么？呃，一亿五 五千三百万，对吧？我就随便瞎写了。然后石油产量，比方说是九百八十万吨啊，怎么怎么着，好，现在这个数据就已经算是有了，对吧？有横轴，有纵轴，有数据，那这个图就算是全了。等一下啊，他现在没出来，我看有没有拼错啊。开 特狗瑞，好吧，我写成卡特狗瑞了，这个好奇怪啊。行，然后现在咱们回来，咱们再看一下，你可以看到钢铁是这么多，对吧？然后什么煤炭，什么电力，什么石油，哎，挺好。然后当然这个东西如果你愿意的话，跟我刚才说的一样，你这个 sorrys 其实是可以写好多的。你 比方说假设我现在是今年，今年用红色来表示，哎，我可不可以显示一个去年啊，对吧？去年同期的产量，怎么怎么着一看哎呀，都在涨，好棒，对吧？比方说咱这来个什么六千九行吗？然后这边来个什么三千二，然后这边来个什么一千三百三，这边来个九 百九百五行吧，那么这时候其实他就能够形成一个对比，你可以看到这是去年的，然后这是今年的，哎，都在长，真棒，对吧？看着很漂亮，有， 尤其是这个石油啊，今年长得特别的疯狂，对吧？你看长了这么多，哎，真棒。所以他这个图其实你愿意的话，你就可以随便来折腾，随便来定制，你比方说我还可以把不同类的图塞到一块，比方说我这边再来个折线图，没有 任何问题都可以的。比方说这个咱来个八千五，当然咱现在不是在设计一个就特别真实怎么样的图表，咱就为了展示一下这个酷的一个能力吗？对吧？比方这个是这么多，然后这个是什么二九八零什么的，咱随便瞎来了几个数， 那么现在这时候你就可以看到啊，就是这样的，对不对？他是可以把很多图给他混在一起来用的，甚至于包括，哎，我的右上角再显示个丙图，没问题，就他这个东西非常的多，里面一大堆 什么派对吧？派就是那个丙图吗？包括什么瑞典，那个瑞典就是雷达图。所以其实来讲，咱们去学习这个一叉刺的时候并不复杂，你就一般情况下，你就可以从他这个三炮里面来找 杭州，我看着差不离的，哎，这个图跟我们公司要的很像。假设啊，哎，这跟我们要的很像，哎，那我就去看看，对吧？然后去把他这个参数给他拿过来，然后改吧改吧，也就差不多。当然这个是最基本的，因为这个一叉子的本身是一个图表吗？所以他里面还涉及到大量的这种交互性的一个东西。比方 说我想给他加个标签啊，哎，我想给他加个图例啊，什么怎么怎么着，就这种东西也是一个值得研究的，所以说这个玩意我再重复一遍，用起来非常的简单，主要的一个问题就是他的这个 office 怎么写？你在学习的过程当中其实学的就是这个 office， 那么现在呢，咱们就算是了解了这个 exs， 当然他有很多别的 分支的问题，像我刚才说的，比方说一些图表的交互啊，包括这个图里面其他的一些元素，像什么图例啊？包括数据怎么处理，我要导出导出，就这些问题以及呢？咱现在是原声的，对吧？如果我想要跟瑞艾特配起来，我应该怎么用？我跟 vivo 配下来又应该怎么用？像这些其实就是对他提高的一个东西了。那么接下来呢，咱们也会进一步的跟大家来分享更多跟咱们一叉子有关系的这些东西，大家也可以说一说，比如说你关心这个一叉子，哎，老师我想做一个什么东西，我想做一个这个，你 可以说，对吧？要不然咱只能漫无目的的盲目的去跟大家分享。如果大家想看到什么，欢迎大家跟我们互动，告诉我们你到底想要听什么，接下来咱们还会为大家带来更多跟易差词相关的各种应用。

哈喽大家好，近两年呢数据可视化非常火，这种比较炫酷的效果 对吧？那么在我们前端开发过程中呢，也会遇到这些数据口罩图表的问题， 那百分之九十左右的数据可视化呢，都是使用我们的一叉二次图表完成的，那么今天呢，我们就小试牛刀，在我们 v v 项目中去使用我们的可视化图表库一叉二词话不多说，我们开始我已经提前搭建好了一个 v v 的项目， 我们有一个 app 点六啊，里面写了一个标题，一个按钮，然后这是我们图表组件引入了在这使用，然后写了一些简单的样式，图标组件呢，暂时还没有，直接写了个空 div， 里面有个图表，我们看一下效果， 这样的一个效果。然后这呢我们用 ex 去实现一个图片。首先我们来到 ex 的官网啊，现在呢已经是五的版本，五点三的版本跟以前四的版本其实差别还是很大的，我们点击快速入门， 然后在项目中使用 exrs， 首先需要安装在你的微域项目中执行这条命令，安装我们的 hrs， 我提前已经安装好了，就不需要安装了。然后引入 exrs， 他这有两种方式，我是用的暗熏引入，因为现在呢暗熏引入的话用的比较多，所以说我们往下看这个暗熏引入，但是他这个暗熏引入其实并没有提示我们在忧郁中如何去用，那么接下来我们就在 没有一种在我们的这个图标组件中去带大家去用。首先引入这些包，我们复制一下啊，因为是按需导入，所以说他会引入很多很多的这个呃，包，包括一些组件，我们直接粘到这个 scree 的标签中，粘到这。 那么引入完了之后呢，他就会去注册这个组件，因为我们只是在这个组件中用，所以说我们注册组件的时候，我们可以选择考虑啊，写到我们的这个 critic 中，我们把这个 export 的 dford 加上啊， 我们再写到 crate 的中，粘贴一下代码，把格式稍微修改一下， 然后下面呢就是去使初始画，我们的图表在这呢，这个 catop 神被省略了，其实我们往上翻，这就是他的 opposy， 那么这个图表其实需要一个 id 为 ming 的一个 dav 标签，我们在这呢把我们这个 div 修改成 min id 等于面，我把图表这个删掉，然后初始画这部，因为需要获取面的真实道美元素，所以说需要我们在 motee 的中去初始画，我们找到我们的身份周期，这写个 mont， 在这粘贴处理化代码，格式化一下这个 option 的话，我们在这可以先创建一个 option， 然后我们这直接写，哦是这个对象，给他复制一下，粘贴到这格式化一下， 然后图表需要有大小，所以说我们给 min 写一个大小，找到下面的 style 请后， min 写个大小， ok， 大小设置完毕。宽六百，高四百，这个随意设置啊，给了一个居中，我们在浏览器看效果， 哎，已经有一个简易的图表效果，这样图表就出现了，生效了。我们简单来看一下，这个是胎头，这是工具提示，然后这个是 x 轴，这是 y 轴，然后这是数据啊，很简单的一些东西。然后我们稍微做一下修改，给他的颜色， 改变一下颜色的话，需要我们先创建一个颜色的数组， 写成字母串就可以快速写一下颜色。数组写好之后，我们需要在啊柱状图这一块这个地方写一个 items style， 他是一个对象，他里面有卡了，然后卡了的值呢，是一个函数会接受一个参数，这个参数里面有柱状图的缩影，我们通过这个缩影把它直接返回就可以了。 然后我们来一个货，防止呢我们的涂的颜色找找不到，这样呢，我们刷新一下， 哎颜色就有了，这样一个简易的图表就制作好了。 但是往往我们在项目中呢，这些数据呢，其实是后台提供给我们的，那么后台的数据我们怎么融会到我们的图表中呢？接下来我们搞， 首先我已经写好了一个后台，用真心思若模拟那个后台，后台的数据呢？我们已经啊摆在这了，然后我们在 app 中去获取这个数据，然后当做 pro 传递给他， 因为以后我们要需要对 exr stem 进行封装，所以说需要什么数据直接传给他人，让他展示注装图图表就可以了。所以在这呢我们对 app 进行处理，写一个 data， 然后在这呢有一个哎呀也是销量的一个数组， 我们打入 axos， 其实以后在项目中 x 封装的，我们在这就不做封装了啊，然后在我们 critic 的时候去获取发请求获取，我就快速写了， ok， 我们写好了，定一个 cx 数组，然后我们使用 axos 向后端发起球 请求回来的数据，因为我们是 excels， 拿到这个点 data 提供给我们的赛亚斯，然后当做 pros 向下传递，叫 data 等于赛亚斯。 我们用利用的是 asvic 和 aiawit 啊， s 型格位的这个一步解决方案啊。然后我们在这个图表组件中接收 pros， 接收 data， 接收之后呢，我们在这个区域，还有这个区域，其实就需要用到我们的这个数据 啊，我们真正拿到的就是一个数组，我们通过慢跑就可以拿到这个啊，慢跑公司内部以慢单本就可以拿到对应的数组，所以在这呢，我们可以把它替换成啊，这是点 data 点慢 i 层简单数 it m 点 g， 那下边的呢？是南北 数量，我们刷新一下看效果， 但是我们会发现图表是不会出现的，什么原因呢？原因是因为我们在 app 获取 图表数据的时候是一步请求，那么向下传递的时候呢？默认传的是空数组，请求回来之后再往下传递，再往下传递的时候 mote 的就不会执行了，所以说第一次传过来的是空数组。 那么此时呢，我们可以在 app 这啊写一个 v 刚衣服，当我们的销量数组 有内容的时候，我们再让这个呆萌出现，没有的时候就不让他出现，我们看效果， 哎，这样的一个图表就有了，这样的图表呢，已经跟我们数据已经联系上了，后端的数据是什么样啊，他就变成什么样的效果。 如果说不写微钢衣服的话，我们怎么办呢？因为在这边 motee 的是首次渲染的时候，那么首次渲染的时候传递来是空数组，你传给他 motee 的不会触发 啊。有人可能会想到 abday t 的， abday t 的其实是组建的 data 发生改变的时候其实也不会触发， 那我们就考虑用什么呢？用这个 vivo 里面有一个 watch， 当 probs 发生改变的时候，我要更新试图， 那我们可以选择考虑使用卧室监听啊。所以说如果你不洗浴缸衣服，可以在组件内部使用卧室去监听，而且接下来我们使用卧室监听也是比较合适的。为什么呢？因为当我要更新销量的时候， 这个数组也会发生改变，发生改变的时候，这个 v e 服他不会变化，因为原来是有内容，我在改还是有内容，所以 v e 服一直是处他一直出现的，但是 money 的也不会是行，所以说我们此时呢还是选择用 watch。 那么咱们去写一个 watch 这个对象监听谁呢？监听我们的 data 写成对象啊，憨到这是一个海人 sir， 然后在这里面监听得他的变化，更新图标。 所以说我们需要把图表在这里进行再次更新。那么再次更新的时候呢？其实一岔子提倡再重新使用赛达博审进行必要的配置 啊，其实还是使用这个图标的赛达不审方法。那么我们在这个函数中要使用买叉，那我们就需要把买叉的定义成什么呢？定义成我们的 data， 所以在这我们写一个 data just my chart 上来等于闹，然后在下面我们定义的时候，这就不是 word， 是 these step my char。 然后下面也是同样道理啊， these step my char side option。 那么在下边我们要更新的话，还是使用这个方式去更新，那么更新的 option 只更新必要就行了，因为数据变，所以说只更新 xldata， 还有这个驻足 data 就可以了，我们把它复制一下， 在这执行 x 周的啊，还有这个 只需要逮他就行了，其他的不需要， 各式画一下，然后我们把这个 v 服先去掉，看效果。 啊，在这里我犯了一个严重的错误啊，东西没出，这是说买菜的阿玛尼 fan 的。呃，原因是因为我这个汉字乐这一块呢，不能写成间断暗数啊，要写成普通暗数，这样里面这次才指向我们的组件刷新， 哎，这样也能出啊，所以说你这边不写 v 杠易服，我们要在这边做监听 watch， 然后我们再测试一下，假如更新了 watch 会不会执行呢？我们也去同样发个请求，把那个事件叫 update， 我们把时间写到下面，同样呢也是一个一步请求 update cells， 时间我们写到 master 的里面，我们就快速写一下。 ok， 我们请求写好了，创建了一个外套，然后呢对我们的 six 进行更新，透视一下，点击更新 cis 就会出发。这边呢，因为我们已经写好了 watch， 所以暂时就不用管我们测试一下效果， 我们点一下更新，哎，这个外套会出现 对吧？这样呢，我们的数据他是能实时更新啊，你随便改变的话，他也会能出执行了，这就是我们比较简单的 叉子图表在微微中如何去使用，当然以后的话图表会进行封装， xos 同样也会进行封装，封装这一块呢，咱们今天就不做介绍了，小伙伴们赶快去试一下吧。

现在的话我们就来说一下如何在我们的项目当中去使用 ex， 如果你的项目就是普通的这个原声的 htl css js 的话，那么啊你就可以直接按照他这个五分钟上手的这个方式去引入他就可以了。那好，那在这里的话我们来尝试一下， 那首先的话，我们在这里的话，我们就先建一个文件夹啊，比如说我们设置一个 demo 一， 好，我们这一画就是创建一个文件夹啊，然后戴某零一，好吧，然后是我们写上零一戴某， 好，那现在话我们啊这句话创建了之后呢，我们设置啊这个 h 跳啊 index 的 h 跳，好，好，那这句话我们啊肯定需要引入他的一 trust 写好了这个 js， 对吧？那好，那这一会我们把这个 js 啊先放进来，那么在 这里的话他会有这个路径给我们啊，那我们可以呃直接使用他的这个 csdn 的这样子的一个路径， 又或者是说我们直接在这里啊，就去官网上去下载就可以了，那么这个时候的话，我们啊点击右键啊去呃链接进来，那好，那在这里的话我们就可以看到，就是啊，这里有编辑好的这个代码，对不对啊？那么啊，这里的话我们也有什么 那么这些电影好代码，那么我们就用什么最新版本的，那么也可以用什么 mpn 进行安装啊，这个也是没有问题的，然后在这里的话他还可以在线定制，就是根据你所需要的图表啊进行 啊，就是直选取啊某一个图表封装好的这个方法来去使用就可以了。那在这里的话，我们啊就直接 什么，现在话先从什么这个镜像网站啊，先去什么下载这个圆码。好，当你也可以在 gehop 里面去下载。 ok， 好，那现在话，我们啊，比如说去下好这个打包好的，对不对？那 ok， 那我们在这里的话，我们比如说我们要用这个压缩版本的，那 ok， 那我们就是买 etruse meaning 点 gs 啊，如果未压缩的，我就是买 etrust 点 gs 就可以了。 ok， 那我们就是，呃，直接比如说我们现在话就先使用未压缩的吧。好，那我们就点击 好，让我们点击下载。好，那在这里的话，因为啊，最近大家都知道中美关系不太好，然后所以的话，我们现在访问很多的这个网站和技术的官网都已经不行了，所以的话我们要换一种方式，就用 第二种方式啊，就 mpn 安装的方式。好吧，那 ok， 那我们就在这里啊，我们随便新建一个啊，就是我们在这里打开我们的中端，然后什么 mpn 啊， e stand。 好，那这一会我们安装什么呢？安装我们的什么 e trust。 好， ok， 那这样的话我们就开始安装了啊，好，那么在我们这里的话，我们应该是可以看到会多一个 note models 的这个目录啊，我们这时候我们可以打开来看一看。 好，那他在哪里呢？他在就是我们是在这个 js 这里面安装的，所以的话在这里面，那在这里的话，我们有个什么 ex， 然后呢？我们直接点这个 dist 啊，那 dst 下面的话就有什么 啊，各种打包好的，对不对？那 ok， 那我们就是把这两个啊迷你点 gs 啊，就是 dist 下面啊，这个 dst 下面就是这个编意。好，打包 好，好的，这个内容。好，我们把他什么啊拷贝出来啊。 好，那 ok， 粘贴好了之后呢，其实啊，就是其他的东西我们都是可以不需要的啊，就是我们比如说把它呃粘贴好出来啊，我们粘贴好了之后呢？啊，像这个不需要，那我就什么可以把它删掉 啊，那这个不需要的话，我们都可以把它删掉。好，那删掉之后呢？我们只需要引入一个就可以了啊，这个就是我们 mini 点 gs， 就是生产环境下的这个 e trust 呢，就是嘛， 我们啊就是现在啊，用来，比如说要读一些原码啊，那么我们就可以用这个一串，然后呢，我们也可以就是说在这里啊，根据需要然后去什么不用这么多啊，就是它里面的话各种图表都有啊，那么就会很大啊，比如说压缩之后还有什么七百多 k 啊，那你可以就是嘛，就是单一的去码某一部分啊， 拿出来，那我们现在的话肯定什么就是学习嘛，学习的话那我们就把什么所有的都拿过来啊， ok 就可以了。好，那现在话我们就引入。好吧，好，那这里的话我们 s 跳舞。 好，那引入我们的什么？这个一串点 mini 减 g s。 ok， 那是 j s 下面的一串 mini 减 g s。 我们啊再接着学习一下。哎，我们创造一个什么最简单的一个图表，我们来尝试一下，那在这里的话，我们啊就是要，呃，就是设置一个 div 啊，那这个 div 呢？就什么用来作为放置我们图表的一个容器。好吧， 好，所以的话，我们啊一般就要什么就准备一个容器啊，要准备一个容器 啊，也就说 div 啊，容器 div， 放置图表啊，就是放置图表，那也就说你将图表就是嘛创建在这个 div 里面。 好， ok， 那这个 div 的话，你就可以设设置什么他的这个宽高和大小就可以了，那就是 id 啊，等你这个宽度啊，那么我们的这个，比如说 id， 我们这句话就是，呃，首先第一个吧， demo 一，好吧， ok， 然后呢，我们这里话设置一下他的宽高 啊，我们的这个一 truss， 他会自动的根据你的这个什么容器的大小来什么显示啊，这个图表的这个大小， 所以的话，大家不用担心啊，我这个绘制出来的这个内容，他会不会什么不适应啊？不会的啊，只要你设置好了这个什么元素的这个大小，那么 他就会什么按照你这个容器的这个大小来进行吗？绘图啊，所以的话他能够自适应。 ok， 那这句话我们再设置一下四百相数啊，那 ok， 那这句话我们就设置了这样一个容器的大小。好，然后呢，我们在这个容器大小里面去什么绘制我们的这个图标啊？ 好，那么啊，使用抓瓦斯溃啊，绘制图表，那么啊，绘制图表呢，其实很简单啊， 前面的话你已经引入了 e trus， 对不对啊？那现在的话你只需要什么？哎，把这个什么绘制图表的啊，这个实力对象我们什么创建出来好第一啊，那就是嘛，初始化 e truss 实力啊，初始化啊，绘制 图表的一叉一叉子，实力好，那么在这里的话我们就什么 va 啊，比如说啊，这里的话就是买叉，是吧？我们的这个第一个实力好，那等于什么呢？啊？一叉子 点啊？ in need， 好，那么也就是说我们引入的这个 j s， 他为什么给我们创建一个什么全局的一个 e trust 对象啊？就是创建这个对象 好，那这个对象呢？我们啊要把拿什么实力画出来啊？实力成我们绘制图表的 e trus 实力，那么我们就需要通过这个 e trust in net 啊来进行出实话，好，那我们这个什么绘制图表实力，你要绘制到什么哪 每个对象上，你要把什么这个对象传进来作为参数啊？传进来，好，那比如说啊，那我们要就是说在这个 div 上啊绘制图表，那么我们就什么把这个 div 啊传进来，那你要什么获取这个 div？ 获取这个 div 的话，那就什么都抠门 点 christ later， 好，然后呢？这一块我们选中的话，那么就是么 id 对不对啊？那是井号 demo 一，好，那这样的话我们就什么啊创建了我们的这个十，就是图表的这个对象啊， 好，那么我们这个图表对象创建出来呢？那么我们啊，就是要在这上面绘制，也就在这个 dip 上绘制什么东西，那么这时候话，我们就什么指定啊， 图表的配置啊， 那也就说我们想要什么样的这个样式的图标，那么我们现在话就是嘛，去用一个对象来进行配置他，好，那这时候啊，我们就是设置一个 otions 啊，对象 好，好，那这个欧审对象的话，那么啊，比如说我们，哎，这个什么就是老陈的这个 e truss， 对吧？这个 demo 啊， ok， 那我们就写个啊，老陈啊，一些是 aits 啊，对吧？啊？ demo 啊 一， ok 啊，那么这句话我们就创建了一个这样子的图表的标题啊，那我们知道啊，这个图表标题是这个。好，那紧接的话，我们啊再设置一下 这个，这个是什么呢啊？常常用来去设置我们的这个提示框啊，那啊提示框， 然后好像我们现在话，哎，搞一个这个，最简单的话，没必要去设置提示框啊，那我们暂时先不设置啊，我们就先设置为空，好吧，好，那紧接着的话，我们，哎设置一下这个 我们的这个数据啊，好，那我们数据的话，他的这个啊，主要的，比如说啊，他的这个就是嘛，就是一个销量啊，比如说我们想要显示啊，各个衣服的销量啊，或者是说，哎，我们各个啊，比如说我们想要显示一个， 呃，展现啊，不同的这个前端啊，就是前端这个框架啊，所使用 用的这个人数啊，那么这样的话，我们比如说显示一个什么这个条形图。好，那这样子一个条形图的话，那么我们啊这个，比如说啊这个标识，那么啊这个数据的这个标识，那么我们就用这个啊，要 eg end 啊来进行一个设置， 在这里的话，我们的这个呢啊，就比如说啊这个框架，那就什么人数啊，那我们这个就是人数。好， ok， 然后呢我们再设置一下，就是我们的这个图啊，那他就是有这个水平的周 s 周，那也有什么数值的周 那水平的轴啊，比如说他有各种各样的框架，对不对啊？那么框架啊，那么我们就要什么设置一下这个什么轴的这个标记啊， ok， 那我们就什么设置一下啊？比如 水平轴。好，那水平轴啊，那他的这个标记有什么呢？啊？就有这个，比如说啊，有前端有六框架，对不对啊？那有这个 read 框架啊，还有这个 angle 拉框架是吧？ 好，然后呢？我们还有这个很古老的这块，是吧？ ok， 啊，那这时候，那么就是什么有四个的这个标记， ok， 好，那我们再设置一下歪轴啊，那歪轴的话，我们就，如果我们不需要什么标记的话，那我们就什么直接给他一个空对象就可以了啊，就是显示数字，好吧，他就会默认的去显示数字。 好，那我们的整个的数据啊，到底是什么样子？那么写在哪里呢？就是写在这个 siris 啊，这里的话，就是啊，设置，哎，我们一个个的数据，对不对？好， ok， 啊，那在这里的话，哎，我们的这个，这个什么 nap 啊，也说我们的这个什么数据是什么？是人数，对不对啊？那是人数啊， ok， 那就是跟这个什么标记，是啊，能够什么 标记在一起，对不对啊？这是属于人数。好，那这个人数呢？啊，我们要把它绘制什么条形图啊，那这个话我们就设置一下类型为条形图。败， 好，那紧接的话我们再设置一下他的这个什么数据带特。好，那这个带特的话，比如说啊，我们这个 view 啊，有这个一百啊，就是两千万人啊，假设啊，是有两千万人。好，然后呢？瑞艾特啊，那么就是啊，大概 一千六百万人啊，当然可能没那么多啊，随便啊，随便写一个。好，然后呢？紧接着的话，我们的 angula 的话，比假设啊，他就只有五百啊，五百万人好，这块的话呢，可能因为虽然啊他现在话已经不是主流，但是可能还是有很多人在用啊，那比如说我们是两千两百万人，好， ok， 那好，那现在话，我们啊，就把他什么把这样子的一个配置啊，这个就是什么配置？我图表的这个信息。好，把这样子的一个对象啊，就是配置的一个信息的这个对象。什么用？放给我的这个什么 这个实力对象啊，就放给我这实力对象啊，就是，好，那也就是说我们的这个实力对象呢？啊， my truck， 好，设置他什么配置，是吧？设置他配置 osh 好括号，然后呢？把这个欧审传进来啊，就是这样子啊，这比如说这个实力对象他有一个什么设置啊？这个图表 的是吗？实力的是吗？配置啊，好啊，好设置啊，对，实力啊，对象啊，实力对象设置配置。 好， ok， 那这样的话，我们设置配置好了之后呢，他就会什么自动的显示，那现在话我们来看一下他能不能显示出来。好吧，我们的这个第一个 demo 在这里的话，我们看不到数据啊，那肯定是有报错啊，那我们看一下哦，这里的话他说老城这里啊，那说明什么？说明我们这里写错了， 那这里为什么写错了呢？是因为我们这个图表啊，他这里是一个对象啊，这里的话他要配置的是什么？就是文字啊，告诉他这是我们的文字的配置啊， ok， 那这样话就没问题了，好吧，好，那也就是说我们在这里的话啊，这个是一个文字啊，就是 这个抬头，这里面不能直接写字母串，而是写一个什么 test， 然后呢再写上你的标题。好，那现在话我们再刷新一下 好了。之后呢，我们现在又发现了这样一个错误啊，那这个错误的话，我们来看一下这个代码，代码的话，这里话，哎，我们发现这个什么 s 轴和 y 轴啊，这个轴这里，然后我们又写错了，是吧？这个啊写成了 sos 啊，那所以的话我们这把它改一下啊，就这改对来，好吧， 好，那现在话，我们啊再刷新一下应该就没有任何问题了。好，那这里可以看到，那这什么就是我们的这个图表的这个什么名字，然后这个什么就是标记啊，就说明我们这个什么就是人数，对不对啊？这就是我们的人数。 好，然后呢这里的话就显示我们整体的这样子的一个数量，那这里的话就显示我们啊就是每一个框架，对不对啊？好， ok， 那这样的话我们就做了一个 我们的最基础的这个 e trust 这个图标。好啊，那我们也可以看到，那我们就是说啊，你可以看到，那也就说我们现在画配置的这个 div 啊，就这么大，那么它在这里面也就是嘛按照这样子的一个方式给我们画绘制了一个什么 六百乘四百的这样子的一个开哇斯的一个图像，对不对啊？你可以看到。好，那么我们在这里话，我们就可以看到这里话就是满六百乘四百的这样子的一个情况。 ok， 那，那我们这样的话，我们就把这样子图表画出来了，那下一节课的话我们再来说一下，就是，哎， view 的框架啊，又怎么去引用啊？那然后我们再接着去说啊，这个详细的这个每一个配置啊，是怎么配置的？那怎么啊？通过这些配置配置出千奇啊 多样的啊，千奇百怪的，对吧？千奇多样的这样子的啊，各种各样的这个图表，好吧？ ok， 那我们这一节啊就先讲到这里。

今天我们讲一下怎么样在网页中啊，显示那个柱状图，圆饼图等等各种各样的图表。 首先呢我们来讲一下我们主要今天用到的是一个 e chats， e chats 的一个图表啊，我们在百度里面搜 e chats， 哎， 那么呢点开啊，现在这个官网已经变了，变到这一个啊，我们也可以直接打开这个 exas 那个域名啊，就是这个这个网址打开 哎， e x s 点 alpha 起点 o r g 这个网址， 这个网站打开之后呢，我们看一下所有视力啊，有哪些，哎，图表的视力， 这里啊我们看可以看到啊，有很多图表，折线图啊，柱状图啊，丙图啊，三点图啊，各种各样的图表都有，都可以，哎，我们 哎都可以把这些图表啊显示在我们自己的网页里面，或者显示在我们那个 winform 的窗体里面都是可以的啊。我们今天呢先讲一下怎么样把这些图表啊显示到网页里面， 那么呢我们回到首页点快速入门，然后呢我们根据这个快速上手的说明，一步一步来啊，首 先呢我们要下载一个这个 e charts 的结实的一个文件，点击 点击这个链接，打开之后呢是可以下载一个 e x s 点 j s 的文件啊，我们这里呢已经下载好了啊，就这个文件， 哎，这个是加了一个点 man 的啊，他是相当于把它压缩了一下的啊，我们到时候就直接使用这个文件，哎，具体下载的过程我就不演示了，哎， 到时候我们视频录制完之后啊，我们会把这个，呃代码啊，我们讲的代码都放到这个页面啊，可以点击这个附件呢，可以下载的啊，那么呢，现在下一步就是要引入这个 e charts 点 g s 啊，我们现在，哎创建一个项目，那么呢我们现在打开我们这个编程的工具， 打开之后呢，我们创建一个新的项目，那么这个时候啊，我们就不是创建的那个 one form 的窗体项目了，我们这个时候呢就要创建一个 点 net 的那个 看一下啊， 应该是一个 web 的项目啊。 好，我们就点选择这一个啊，点击下一步显示显示图表， 点击创建， 下面呢这个项目就创建好了，我们在上面点右键添加一个 web 窗体。哎，我们 e chat 是 past 啊，这个窗体添加之后呢，呃，就出现了这一个网页的这个代码页啊，我们再看一下，这里是怎么说的， 就是要在这里面呢，引用，引用这个 e chats， 我们看一下，我们把这个文件呢考到这个项目里面，然后呢我们把 之前下载的这一个文件考到这个里面啊， 或者是说我们新建一个 g s 的文件夹，然后呢把这个文件呢放到 g s 里面， 我们在这个 head head 里面啊，把它引用， 因为我们是放到一个 gs 文件夹里面的，这个梯头呢，我们，哎设置为图表测试。 好，下面呢我们看一下，在 body 里面啊， 我们就复制这个代码吧，放到这个 body 里面， 我们也可以放到我们这个 form 里面啊，好，然后呢 body 里面啊， 哇，就是我们刚才这个代码已经在里面了，下面呢就是复制这一个代码。好， 好，那么这个代码呢，我们就复制好了，我们把它重新生成，生成一下啊， 生存一下再看看，那么呢这个里面呢，就一个 这个文件和这个显示图表这个 d l 文件，我们把这个文件呢，我们放到我们的福气上面，我们福气啊，我们到时候，哎，网页就是显示的通，通过 i s 已经建好了啊，我们在这个里面 创建一个文件夹 test， 然后把这个网页放到这个里面，还有这个 g s 文件夹放到这个下面， 然后这个并这个 del 啊，这个是要把它放到这个里面的，我们再来看一下这个文件啊，一下是 test 的，点 a s p， 我们看一下啊， 好，我们看到了这个图表没有显示出来，我们查看一下，什么原因， 我们看一下啊，我们这个 g s 里面呢，我们这个是这一个文件啊，点 m i n， 哎，我们把这个文件改一下，我们引用的是这一个文件， 哎，保存，保存之后呢，我们再把这个文件拷过来，拷到这个服务器里面 替换，我们再看一下，好，这个图表呢就出来 来了，但是呢我们这里面呢，所有的代码都是写到这个 h t m 啊，相对这里面的啊，那么我们怎么样？呃，把代码写到我们的这个后台的这个这个里面 load 底里面呢？ 那么我们看一下 实际上最核最核心的代码呢，就是这一段啊，这一段 我们在后台定义一下类似于这个的数据，我们把它复制一下，照着这个重新给他定一下啊，怎么写呢？ 这个是标题 title， 等于这个里面呢，有个 text， 看看，这是等于一下是入门视力， 这个呢是那个提示啊，相当于我们这里还没有，我们就，哎，只是这样盯一下，这，我们这边 写就要改成这个等于啊， 这个 dat， 它是一个数组， 虽然他只有一个销量这一个字符串，但是他是一个数组， 我们现在呢？呃，不对，这个内容呢，具体什么意思进行讲解。大家其实可以去看那个 etats 的帮助文档， 看它的这个帮助文档就知道这个里面的每一个是什么意思。呃，这里面呢就是相当于是它的那个 ex 坐标的那个数据， 我们这个应该用那个查找替换，一次性把它改过来啊，这样一个一个改有点浪费时间。好，这个对口，然后这个是外外坐标，外坐标没有 序数据序列 数据西域呢，它也是一个数组，数组里面呢？数组 里面又是一个这个定义的啊， name tap 和 data name 等于销量， tap 等于 what？ 这个 dat 是等于 这些数据啊， 那么呢我们就参照他的这一个哎定义的，我们把这个代码给他重新写了，在我们这个后台，这样，哎，给他定义了一下，定 一下呢，然后我们看一下这个前面啊，前面就不需要这个东西了啊， 那么我们这整个一个的代码呀，实际上我们，呃有一个这个 h t m 弹路啊，都把它放到那个 h t m 弹路里面，弹路里面呢，我们给它 这个应该有个名称吧， 甚至来说我们这个看一下啊，有个 id， 这个不要了啊， 那么呢我们把整个的这一段代码啊，全部给他写到这个里面，通过后台写，写到这里面来， 那么呢这个说明说明文字我们就不要了啊， 下面呢就是这个 o p t i o n， 呃，它是等于什么呢？我们上面定义了这个节省，那么我们把它序列化一下，这个时候呢，我们可能就要用到一个 vs 里面的这个啊， jason help， 我们把它的命名空间改成一样的， 啊，这个里面呢还涉及到一个 d r 文件，也要把它，哎添加进来， 就这个啊， 添加进来，我们看到这里面，哎就没有报错了，相当于添加了一个这个类，然后一个这个 d r 文件， 这里面呢 把上面定义的这一个 jason 把它序列画一下，好， 我们要测试一下看看啊，呃，这里我们在这里写这个代码啊，就是便于之后啊，我们，哎读取数据库里面的数据之后，哎，把它显示到我们的网页上面， 好，我们可以看到了这个前台的这个代码，就，哎，这一个都不需要了啊，我们放到后面去了， 相当于说我们把所有关于那个 easy 要用的代码都放到这个代码块里面，哎，然后呢就在这个里面呢给他进行一个定义。 好，那么我们再重新生成一下 这个文件给他考过来，然后这个 并文件，那么呢这个 j d i 文件和，嗯，这一个，我们这两个都要把它考过来。 how？ 我们来看一下，好，现在呢这个图表呢，哎，就 显示出来了，显示出来之后啊，比如说我们在后台把这个数据变一下，把这个衬衫的数据啊，这个衬衫对应的是它，比如说我们改成六十五， 我们再刷新看一下， 哎，这个数据就变过来了，那么呢我们今天呢就是简单的就是说啊，把这个视力讲的一个例子呢，在我们 的这个网页上面把它显示出来，下一下一节节呢，我们再看怎么样把我们数据库里面读取的数据啊？ 哎，替换掉这个代码呀，把数据库里面的数据给他显示到这个图表里面，同时呢我们也可以看一下啊，看一下这个视力里面呢，视力里面的这么多图表啊， 哎，他的他的一些代码，比如说我们看一下最简单的这个折线图，打开之后啊他，哎这里面 右边是这个图，左边呢就是这个图里面涉及到的他的这个代码，那么呢我们只要在我们后台哎按照这个视力里面的代码来写，哎 就可以了。同时呢我们对于这个代码的解释呢，可以看的看这个文档的使用手册，哎，通过自己学习，哎，就可以通过修改我们这个代代码啊，把这个图表显示到我们自己的那个网页上面， 这里面，哎，比如说我们修改一下这个数据来看，他这个都是跟着会变的。好。今天呢我们，哎在网页上面显示这个图表，就讲到这里。

今天我们一起来学习一下如何实现图表数据的下沉操作。数据下沉之后，可以通过点击返回上层按钮返回到顶层图表。接下来通过代码看一下该功能是如何实现的。 animation duration update 属性设定更新动画时长 series 对象的 data 数据通过设定 pro 摆地属性与下沉数据进行关联。 universal transition 对象设定全局过渡动画配置信息。 enabled 属性开启全局过度动画。 divide shape 属性设定图形的分裂效果包含 sweet 和 clone 两种方式。当前图表为 分裂效果，修改为 clone 类型。看一下效果， 可以看到图形克隆效果。 graphic 对象设定图表组件，其中 text 属性为空，达到返回文本的隐藏效果。 drink on data 对象初始化下沉数据，其中 data groupie 地属性要与 series 对象的 groupie 地关联。 最后看一下图标绑定的点击事件，先判断点击数据是否为空， 如果不为空，通过反应函数便利下乘数据，未查询到数据直接返回数据 存在，则对图表进行相关设定。 siri 对象内通过 universal transition 对象设定全局动画效果，修改为 clone 看看效果。 graphic 对象设定返回上层的文本组件。 type 设定组件类型。 net 和 top 设定位置。 id 属性设定组件的唯一值。 style 设定文本样式 i'm click 绑定点击事件初始化上层数据。 谢谢您的观看，如果感觉该视频对您有帮助的话，记得点击关注和一键三联，您的支持就是我坚持的最大动力，我们下一个视频再见。

如何做一个 acres 丙状图？