c#如何使用echarts

哈喽，大家好，我是老陈。那么大家都知道我们的数据可视化已经成为我们前端工程师必备的一个标准技术， 那么他不仅应用在我们的互联网行业，他已经深深的进入到各行各业，如我们的电信啊， 我们的零售行业啊，我们的医院，以及我们的治各种智慧工厂，还有我们的旅游，还有我们的大基建，那么这些传统行业呢，都需要我们传前端来去帮助他们将数据可视化 好， ok， 那么数据可视化我们就离不开一个非常重要的一个库，就是我的一串啊，有同学就跟老陈说唠，称这个一串我整整搞了一个月，然后我 他整个文档我都还没看完，他的这个文档实在太多太乱了，我都不知道怎么去下手啊自己，哎，虽然 有案例，对吧，但是呢，我不知道怎么去改这个案例，我如何去自定义这个样式，我没有办法操作啊。那在这里老陈啊，就用十分钟把帮助大家把整个的 这个一串死文档给他消化掉，以及我们掌握如何清晰的去，是吧？自定义我们的各种样式的图标清吧。 老陈争议和打在公屏上，好，那我们现在的话就来看一下啊，整个的 e trus 到底是如何进行开发的，那么我们的 e trus 图表呢？他的这个核心的这个组建呢？有这么几种啊，大家一定要知道。 好，那么在咱们这里的话就是说他有首先我们图表嘛，对吧？图表，图表，那肯定是 要有我们的这个坐标轴，那所以的话 s 轴和 y 轴的这个坐标啊，这两个我们肯定是知道的，对吧？那 s 轴和 y 轴这两个坐标足迹，那么我们如何去自己定义，对吧？如何定义数据？如何定义样式啊？好， 还有呢就是我们的这个提示主见，提示交互主见，那这个提示交互主见的话也说，比如说我把鼠标放在这些条形图上，或者是放在对应的这个折线图上，那么他 又会以什么样的一个方式，对吧？跟我们进行一个交互，对吧？我发现这个点上他会显示什么啊？什么样的一个样式，什么样的一个内容，我们如何去定义？ 还有我们这个对应的图例啊，就是这个主见，那对应图令主见的话，那么我们就会去操作，哎，我点击这个，对吧？然后呢？或者点击这个，那么让对应的这个图例，对吧？或者 这条线段啊，单独的显示出来啊？那其他的话那条形图暂时先不显示，然后呢？在这边的话我们还有一个工具主见啊，就在这一边，那工具主见的话，他这里面的话，就比如说可以帮助我们去实现一些下载呀、刷新啊等等的操作。还有这个 数据啊，我们的这个样式的一个颜色的一个调节啊，可视化的一个啊，操作啊，在这里的话我们还有这样子一个 vs map 组建，还有呢还可以就是什么，比如说我们数据区域的一个组建啊，比如说我们在这里啊，二零一二年到， 或者是呃，到两千年，对吧？或者二零一二年九月啊，这里面的话他有一个时间的限范围，那在这个时间范围呢？我可以什么随时拖动最下面这一条啊，来进行显示啊？哪一块的区域，也就是说上面的这个内容，我可以什么根据这一块啊进行一个拖动， 然后呢？比如说只显示三月到五月，又或者是说我只显示二月到三月啊等等，就是把这一块区域，我可以根据自己的需要来进行对应的显示。好，那所以的话我们要显示这些内容，对吧？那我就先要搞清楚知道我们的一个 图啊，一个表要用哪些的组建来进行对应的一个显示，那我要改什么，那我就什么，我就去找对应的文档去针对性的什么进行一个对应的一个实线。 好，那在这里面的话，我们就以这样子的一个案例啊，比如说我们要做一个啊，手术室的一个防疫管理的，那这样一个图表，对吧？那这样一个图表的话，哎，我们觉得好酷炫，好好看，对吧？那这样一个好酷炫，好好看的一个样式，我应该如何进行一个设定啊？那 ok， 我们这一节课我们就来看一看。好，那通过这个的话，我们就能够充分的掌握我们的这个啊实线，好吧啊，就是图表的一个样式的修改和使用， 那在我们这里呢啊，首先的话就最基本的一个，对吧？就是大家肯定要把我们的这个 e trust 这个模块，我们给他啊， js 啊，对吧？给他放入进来啊，那当然的话你也可以就是引入这个时间， 那在咱们这里的话，我们就先创建一个什么麦啊这个 div， 然后呢我们就在这个 div 上进行对应的一个渲染啊，那我们设置 说实话的一个宽高六百相锁啊，那这个的话大家一定要写啊，就是说，呃，首先的话就说我们要绘制在什么样一个区域，那所以的话你一定要就是说把这个 div 你给我搞出来，对吧？然后呢你这个要他的这个绘 绘制的一个宽高大小，就说这一个区域我要绘制多大的一个图，那我们一定要去设置他对应的宽高啊，这里这个是不能少的。 好，那接下来的话，我们就是通过这个 s 六模块的这个导入啊，来进行一个写法，好吧，那这里的话我们就使用这个 ecm， 对吧？ ysm 啊，这样子的一个模块化的一个 js 来进行一个导入。 好，导入之后呢，大家都平时在用的话，比如说我们的这些数据啊，那一般情况下都是什么？从我们的这个服务器进行一个获取的，对不对啊？那就是我们会做一个阿加特请求，对吧？啊？去通过我们这个接口啊，然后就把这个数据我们给他获取回来啊？ ok， 那在这里的话，我们根据这个接口地址，然后呢进行一个请求啊请求，那这个的话其实还是蛮简单的，那当然话啊，大家可能就是没有这个，呃，如果没有权限的话，那大家 可以就是啊直接在这里我把这个数据啊给大家进行的一个再次的一个初始化，那所以的话在这里啊，就是说没有拿不到数据也没关系，那这里的话我 给大家进行的一个把数据先拿过来的一个操作，就是就这么一个简单的数据，好吧？好，那在这里的话我们对他进行一个这个渲染，对吧？就是进行一个渲染，那在咱们这里 导入了这个，对吧？那我先画就可以使用咱们一 trance， 对不对？好，那我们在这里的话，我们首先先找到我们的这个要炫的这个动对象，在这里找到他，然后呢我们对这个 图表，对吧？我们锁实力化，是吧？我们这个要在这里创建图表的实力对象，好，那在这里的话我们就把初始化英丽塔，然后插度母，然后呢在这里我就可以什么设 设置，我们对应就是说啊，把这个对应的这个欧审啊，就配置我们的这个配置项啊，就说，哎，我们到底要汇成什么样的一个图？好，那么 就要把这个什么配置像我们要给他啊进行一个配置，那配置像我们配置好了之后呢，他肯定就是根据我们的需要，对吧？把这个去设置吗？这个配置，然后呢就把我们的这个样式给他进行了对应的一个显示 啊，那么在这里的话，那核心就是什么？就是这个配置像啊，是到底怎么去使用，对吧？那在这里的话，呃，我们比如说啊，经常需要需要什么去进行，就是说我们主色调啊的一个设置， 那主色调的话我们可以看到，就是说在咱们这里，哎，他怎么这么好看呢？对不对啊？你看我们的这个图标啊，怎么这么好看，是吧？啊？这种颜色，哇， 好酷炫，对不对？好酷炫。那在这里面的话，那我就可以设定他的这个主色调，是吧？颜调色盘，是吧？ ok， 那这一块我们就把这个对应的这个颜色盘进行一个调整，那当然的话，如果这个颜色盘啊，你不喜欢，对吧？那在咱们这里的话，我们也可以什么？呃，在咱们这里 进行一个这个对应的一个设置啊，那在这里的话是有一个就是说可以自己去选择这样子的一个主主题的，好吧，那在咱们这里的话，我们有一个，我们的使用手册就在这里。 好，那在这个使用手册里面呢？我们有这个对应的这个什么自定义样式啊？就是在咱们这里样式主题，对吧？好，那在这里的话，呃，除了就是说默认他提供了就是说核心的两大一个就是黑色，一个就是默认的烂之外，就是说在我们这个大笔这里啊，就是说我们在 这个大可。 ok， 就是在咱们这，对吧？我们可以设置一下他的这个就是什么大不是黑色，是吧？啊？就是他可以设置默认的两个主题， ok， 那在咱们这里的话，我们如果设置了黑色他是什么？他就是以这样子的一个显示的一个效果呈现给我们。那当然在这里面的话，除了这种黑色之外呢，我们还可以什么？还可以使用他这个主题编辑器啊，就是说 这个黑色和白色，对吧？就是烂，就是默认的我都不喜欢，那我就什么可以点击一下主题编辑器， 那在这里的话，我们就可以说根据我们去什么太上面的这个选择对应的方案，比如说啊，我觉得这个色彩还不错，对吧？我就可以点击一下，哎来，然后就可以看到它整体的 一个颜色的一个变化。啊，是不是你喜欢的，对吧？啊？那这个还不喜欢，那什么再换一个，对吧？啊？这个也不喜欢，再换一个，对吧？那这样的话，哎，感觉这个小清新一点，那我们就可以选择这个，当然 这个的操作啊，最好是有你们的 ui， 就教给你们 ui 设计师去做这个事情啊，自己不要去做，对吧？因为如果你们有 ui 的话，那就 免得他说，哎，你这个不好看吧，又得自己搞啊，那你这什么，他既然是审美的负责人，对吧？他要做这个啊 ui， 那你就什么让他去进行对应的这个选择，对吧？啊，那当然的话，你觉得这里面的这个配色还是不满足，对吧？这下面的话还有什么 还可以做一些基本的一些配置啊？就是你可以自己去设置啊，他的这样子的一个啊，各种各样的主题色，对吧？标题色啊，好啊，那是不是就啊 有意思了，对吧？有意思了，然后呢？设置好了之后呢，他可以什么去设置啊？就是怎么去导入这个配置，对吧？把你这个设置好的这个啊，进行这个导出，对吧？那 ok， 我们这里的话就把它给它生成出来，对吧？生成这个这省啊这样子一个文件啊，进行一个导出，好，那当然你在这里的话，你如果对这些啊不是 很很会操作的话，那我们还可以就是在这里面我们再啊看一下这边的这个帮助，是吧？来帮助大家去更好的一个去使用。 好，那现在的话，那，哦，我们就是要知道怎么去什么配置这样子的一个色调，对吧？好，那还有就是我们对应的这个主题，对吧？那在咱们这里， 那在我们这里的话，我们的这个主题，对吧？那这个主题的话，那么我们就比如说啊，这个文字， 对吧？那文字的话他怎么去进行一个显示？那这个就是什么由我们的这个开头啊，这个配置啊，就开头模块来进行配置， 那他的模块的话他可以什么设置？我们对应的这个就是在咱们这里啊，这里的话看这个配置项，对吧？因为我们是现在是什么配置项，那配置项的话他第一个就是什么抬头，那这里的话我们就可以设置对应的这个文字啊， 那除了设置对应的文字之外呢？我们在这里的话啊，你可以什么让他是否显示，对吧？处还是 boss， 以及对应的这些字体的样式，字体的位置啊，字体的位置， 还有字体的这个啊，阴影等等啊，模糊度这些我们都可以进行对应的一个设置啊，那所以的话我们这里的话，哎，我们就，我们就为什么，哎，根据什么你的对应的这个什么主题，对吧？主见啊，然后去选择对应的一个标题， 然后呢在咱们这里我们继续往下看，在这里的话我们还有什么提示框组建，对吧？提示框组建，那提示框组建的话就是说我们在咱们这里啊，我们 手鼠标放上来，对吧？为，为什么我能够显示个星期二，然后呢？啊？这里面呢？是，呃，各种数据的一个情况，对吧？那他就是由我们的这个啊来进行对应的一个设置啊，那好，那他这里话我们就可以什么 可以看这边，对吧？哎，我们的这个提示框我应该怎么去写？那 ok， 那在咱们这一块我们就可以选择，哎，我们这个提示框组件的一个对应的设置。 好，那提示框在这里面的话，就是嘛？就是可以对应的一个受捞，对吧？啊？然后呢在这里的话我们还可以设置他的触发类型啊，那所谓触发类型就是我鼠标，对吧？我放上去啊，我放上去，他为什么就这么就 显示出来，对吧？那在咱们这里的话，我们就可以根据他是他的什么坐标轴还是什么， 还是根据他的这个艾特，比如说啊，比如说这个三点图，对吧？啊？丙图啊，就每一项啊来进行出发，还是根据坐标轴来进行出发，那在这里面的话，我们这个什么根据坐标轴来出发就可以了，对吧？ 好，那像这些，对吧？我们的这个提示啊，他也是有非常多的一个设置，那我们在这里的话，我们就根据，哎，我们像这里，对吧？啊？我们想要去设置他的这个， 那对应的这个效果，那么我们就可以在这个案例就是说这个文档的这些属性里面去进行对应的一个设置。啊，那在这里面的话我们可以看到，因为我们想要，比如说啊 这个对应的位置啊，我要设置在什么位置啊？对吧？啊？提示框浮动的位置，那我就可以，我就可以通过这个跑 season 来进行对他的一个设置，那如果我想要对他里面的文字内容，对吧？啊？进行一个调整啊？我要显示，为什么我可以显示像咱们这里，对吧？像咱们这里 啊，这么一个效果的话，那么我们也可以说，就比如说我不喜欢他这这里的这些文字，对吧？这些文字我不喜欢，我想自己去显示，可以吗？当然可以，对吧？当然可以，那我就可以吧设置这个风迈腾啊，那所以的话就是内容格式， 然后呢？背景颜色啊等等各种边框的效果，对吧？边框出戏啊，文字的样式内容，那么在咱们这里都是可以找得到，所以的话你想要笑显示什么，那么你就可以什么找到对应的这个组件，进行对应的一个设置，是不是？ 那在这里面的话，我们还可以什么设置？像这些坐标指示器的一个配置项，对吧？啊？以及他的这些啊，我们是按照什么样的一个样样式和颜色来进行显示，对吧？ 那这就是我们这个坐标指示器，对吧？哎，你看我把鼠标放上来，那这里的话，那我就不是有横坐标跟纵坐标的一个显示吗？对不对？ ok 啊，就这里面。好，那这个横纵坐标，对吧？那个十字交叉，那这个啊，他的这个样式和效果，以及 我们的这边的这个文字，他应该是什么样一个效果？我们是不是也可以自己定义呢？那当然没问题，对不对？所以的话我们找到这里，对吧？找到对应的一个设置，然后进行设置就可以了。 好，那在咱们这里的话，我们还有什么这个图例，对吧？图例的话就是说我们在咱们这里啊，你看像这个二针疫苗，一针疫苗，绿码、黄码、 红马的吧？那这里面的话，这个圆点我可以改到，比如说把这个圆点改成我们的这个，呃，矩形啊，或者是改成其他的一个效果，那么在这里的话都是可以进行一个修改的，包括他这里面的一个颜色，对吧？形状颜色，那么我们都是可以进行修改的。 好，那图例的话呢？在什么？在这里，对吧？莉哥，在这里的话，我们可以找到啊，他对应的这些样式的一个设置啊， 还有你看，哎，我想要改文字，对吧？那么这个文字，那我想要改他的位置，对吧？哦，那其实你要改一个内容，一个主见，你看这是一个主见，对吧？那这个主见的话，其实就是说你看他里面所，他这个主见里面，对吧？他的每一项他所包含的有什么内容，比如说有包含这个图形，对吧？ 图标啊，有包含这文字，那我们啊就会什么就可以改这些图形和文字，对吧？那我肯定还可以什么 啊？改这一整块他的什么所在的位置啊？就位置啊，还有他里面的这个内容，对吧？我们都是可以针对性的一个修改的， ok， 然后字体的样式，是吧？啊，那像这些我们所能够看到的，那么啊，他所针对性的，那我就可以找到他对应的这个组建的这个文档来进行对应的一个修改。 好，那在这里的话，那，呃，这个里格的话，他只能对应的入数据，对吧？那我给他丢进来，对吧？那这句话就是把这个我们的这个， 比如说啊，我们在这里，对吧？二针疫苗，一针疫苗立马黄马，黄马，对吧？那像这些，对吧？就是他的这个啊，图例他的这个文字，那图例的文字这个数据的话，我们就可以直接按照这样子一个方式把它获 下来，进行一个对应的显示。那还有就是我们的这个工具栏啊，那在咱们这里，对吧？啊？哎，像这个，那这个的话，比如说我这个防疫管理，对吧？上一周的一整周的一个情况，哎，我想要把它什么作为一个存档保存下来，那我可以点击下保存 好，那这个保存啊，这个按钮，对吧？这个功能是谁在做的？就是有我们的这个工具来在做，对吧？那这一块他这个工具来啊，他就有什么我们这个保存图片，当然除了保存图片之外呢，他有什么有动态切换类型啊、刷新啊、重置啊等等这些功能在这里面都是可以看到的。 好，那在咱们这里的话，我们就可以看到这有个什么我们的这个工具盒啊，抓出 box， ok， 就在这里。好， ok， 那这里面的话他有对应的这样子的一个区域啊，比如说 我这个区域的缩放，对吧？哎，我想看这部分，那我就就可以看这一部分，那我还想看这一部分，对吧？那我就再点一下，那我就说，然后把这一部分我们进行一个选中啊，我就看这一部分， 好， ok， 那就是这部分，你看这样的话就可以看得清楚，对吧？打开的话，呃，当很多的情况下，那么就可以通过这样一个方式，对吧？来进行控制。你这个工具盒的一个 功能啊，有哪些，对吧？那在这里面的话我就什么，我就设置一个，对吧？就 feech 啊，这里面就是设置一个，对吧？那他就什么就显示了一个， 那在咱们这里的话，我们也可以根据什么在这里面的这个设置，对吧？来进行对应的一个使用，那这里面的话有这么几种，对吧？那我们就可以看到有个什么再把一妹子啊恢复啊重置，对吧？还有我们试图啊， ok， 那这些的话我们都是可以看到的， 再接着我们再往下看，对吧？哎，我们啊，像这些图表啊，就是我们的这个图表 在咱们这里，那我们像这个区域，对吧？我比如说我这整张图，或是我有多个图，我有多个图的话，那我可能就会这样子去，呃，实现，对吧？那我比如说我像在咱们这里， 那我们可能就什么创建多个这个坐标，对吧？比如说我在这部分画一个图啊，或者是这里画一个图， 对吧？那我也就我画的图，他的这个位置在什么位置，我就可以通过这个网格来进行对应的一个设置啊，那当然画，我们比如说，哎，这张图，对吧？我想要这么小的显示在这中间，那么也是没有问题的，好吧？好，那在这里的话我就可以通过这个，呃 网格呐，那进行对应的一个设置。好，那在咱们这里话，比如说，哎，我这里话我就什么设置？百分之二十五，是吧？百分之二十五， ok， 那右边的话也是百分之二十五啊，上边的话也是百分之二十五， ok， 好，那我们先画啊，来看一下，对吧？他距离他啊这样一个效果，对吧？那我们现在画还可以。什么？还可以，就是说，呃，上边也是什么？百分之二十五，对吧？那就是啊，百分之二十五， 好，那 ok， 那现在话我们就可以什么就可以对他啊？看到，对吧？你看，哎，我这样就把这样子一块内容把什么放置在中间，那你说这个网格其实就是这一块图，对吧？他的一个显示的一个位置 啊，那这里有 话呢，也就是说通过这个，对吧来进就可以什么进行对应的一个设置。好，然后呢？我们刚刚说的这个 s 轴，对吧？还有我们这个 y 轴啊，那 s 轴我们怎么进行配置，对吧？他这个数据是什么啊？然后呢？他的类型是什么？那我就可以进行对应的一个设置 啊，外周也是一样的，当然这里话 s 轴和外周肯定他也会有什么对应的这个样样式，对吧？比如说文字的颜色啊，文字的这些，呃，大小啊，那么在这里面的话我们都可以看到啊，那这就是好，比如说外周，对吧？ 歪着的话，我们在这里就可以看到什么我们对应的这个啊， test 啊，对吧？那等等啊，一系列的这些设置，那么在这边就可以去针对性的去找啊，然后去进行对应的修改啊，包括他的位置，对吧？也是可以的。 好，那接下来的话就是什么？就是绘制图片， 就说我们一个一个内容，是吧？或者是一个这个里面，对吧？我们有多个，对吧？你看有多个这个曲线啊， 那有多个的话，那我就可以什么设置？多个图表，对吧？那这句话我们就通过在这个 siris 里面进行对应的一个设置好，那在这个设置里面的话，我们就可以，比如说，呃，这个图表的这个什么对应的这个名称，对吧？比如说这个是 黄马的，对吧？这个是红马的，那等等啊，他的这样子的一个效果啊，是什么样子？那我就可以针对性的去进行一个设置啊，那就是他的名称，对吧？ 那接下来的话，就什么他的这个，比如说是不是光滑的，然后呢？线条的这个样式，对吧？因为我们这个是一个折线图，是吧？折线图，然后呢？他这里面的话我们采用了这个堆叠，对吧？那我们就可以把设置 stark， 那也就说我们的这个折线图啊，是什么图，对吧？啊？以及我们多个图表，就是在这个 siris 进行什么对应的一个设置。好，那在这里面的话我就什么找到 siris， 然后呢？去找到这个对应的这个烂，哎，我要什么画图，对吧？画线段，那我就什么在这里烂去找，然后呢？如果是要画这个善行图，我就去嘛去拜这里去找， 那还有我们这个什么，呃，三点图，是吧？是在这个三点图 sky 的，去找啊就可以了。好，那这样的话我们就可以看到，哎，我们在咱们这里，对吧？这个啊，线段的样式啊，然后呢？啊？是不是要显示我们的这个就是说啊，我们的这个收先口就是我们这个提示，对吧？啊？ 好，那 ok， 那在这里的话我还可以吗？设置对应的这个填充的一个区域的一个颜色，对吧？那比如说我们在这里的话，我们填充区域的一个渐变色， ok 进行对应的一个设置。啊，那在这里面的话我们就可以看到啊，这个颜色呢？他不是， 是吗？不是。呃，单纯的，对吧？就是哦，单纯的就是一个色，对吧？它不是一个色，而是什么？它是有一个渐变的，对吧？那这个渐变的话，我们就可以通过这个啊设置我们这个咖了，对吧？你有 exos graphic， 就是我们这里进行来设置一个线性的渐变。 ok， 那在这里的话我还可以怎么设置我们这个直线图，一些高亮的一些状态啊？对吧？那当然这些的话我们在这里啊，都有看得到，就是我们这个烂里面， 好，那比如说我们现在，比如说划上来的话，那其他什么，其他几个就不显示，对吧？啊？就是划到哪个哪个就什么巨料啊，就 聚焦，对吧？高亮，那其他的话就不是说不显示，就是让他淡出，对吧？那这个的话我们是，呃可以什么进行对应的设置，是不是啊？聚焦的时候就什么单独单独的这一个 cu 啊，进行一个显示，是不是？ ok？ 好，然后呢？这是什么对应的数据啊？那这里面的话，那这几条啊，这几条数据的话都是类似的，那所以的话什么基本上就什么统一的进行同样的一个配置。 好，那这样的话我们就完成了我们的这样子的一个啊图形的一个设置，对吧？啊，那好，那这样的话，那我们就是很清楚的掌握了，哎，我们的一个图形，对吧？我们一个图形啊，我们 需要什么？需要使用这些组件来进行对应的一个设置，然后呢？这些组件的话，你所能够看到的，比如说文字啊啊样式的这个圆形啊，或者说我们的一些效果，对吧？那么我们都可以说对他进行针对性的一个修改， ok， 那这些修改的话，我们就直直接去找找他对应的这个文档，进行对应的一个设置就 ok 了，好， ok， 那么 我们这节课就讲到这里，对吧？那如果大家想要更详细的去啊，学习我们的这个数据可视化，以及更详细的前学习前端的啊， 各项的这个技术啊，比如说像我们的 vivo 啊，艾特啊，对吧？然后更好的去就业的话，大家可以来找老陈。好， ok， 那我们这一节课就讲到这里，拜拜。

欢迎大家来到咱们这次的课程，咱们这一次呢准备跟大家来说说 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 配下来又应该怎么用？像这些其实就是对他提高的一个东西了。那么接下来呢，咱们也会进一步的跟大家来分享更多跟咱们一叉子有关系的这些东西，大家也可以说一说，比如说你关心这个一叉子，哎，老师我想做一个什么东西，我想做一个这个，你 可以说，对吧？要不然咱只能漫无目的的盲目的去跟大家分享。如果大家想看到什么，欢迎大家跟我们互动，告诉我们你到底想要听什么，接下来咱们还会为大家带来更多跟易差词相关的各种应用。

今天我们讲一下怎么样在网页中啊，显示那个柱状图，圆饼图等等各种各样的图表。 首先呢我们来讲一下我们主要今天用到的是一个 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？ 我们来看一下，好，现在呢这个图表呢，哎，就 显示出来了，显示出来之后啊，比如说我们在后台把这个数据变一下，把这个衬衫的数据啊，这个衬衫对应的是它，比如说我们改成六十五， 我们再刷新看一下， 哎，这个数据就变过来了，那么呢我们今天呢就是简单的就是说啊，把这个视力讲的一个例子呢，在我们 的这个网页上面把它显示出来，下一下一节节呢，我们再看怎么样把我们数据库里面读取的数据啊？ 哎，替换掉这个代码呀，把数据库里面的数据给他显示到这个图表里面，同时呢我们也可以看一下啊，看一下这个视力里面呢，视力里面的这么多图表啊， 哎，他的他的一些代码，比如说我们看一下最简单的这个折线图，打开之后啊他，哎这里面 右边是这个图，左边呢就是这个图里面涉及到的他的这个代码，那么呢我们只要在我们后台哎按照这个视力里面的代码来写，哎 就可以了。同时呢我们对于这个代码的解释呢，可以看的看这个文档的使用手册，哎，通过自己学习，哎，就可以通过修改我们这个代代码啊，把这个图表显示到我们自己的那个网页上面， 这里面，哎，比如说我们修改一下这个数据来看，他这个都是跟着会变的。好。今天呢我们，哎在网页上面显示这个图表，就讲到这里。

如何快速开发一个大屏可视化项目？如果实现这样的一个效果，大家觉得需要花多长时间呢？两天？三天？还是一个星期？ 其实都不用，一两个小时你也能搞定了，前提就是你得知道一个网站，现在我把这个网站分享给大家。 这个网站是一个一超一次的 demo 大合集，里面包含了很多自定义图表，并且是持续更新的。这里可以看到目前这个网站的图表数量，这些图表几乎包含了我们日常开发中的所有场景， 例如折线图、注重图、地图、三 d 地图等等。我们打开一个看看效果，左边展示的是实线代码，右边是一个实时的效果，我们可以改下左边的代码，点击这个按钮就能进行实时预览了。还有一个很实用的功能，就是他提供了一个地图文件功能，里面可以生成我们需要的 任意地方的地图文件，然后可以把文件考到项目里去使用，非常方便。分享到这里就结束了，希望对你有所帮助，我们下期再见，关注我，了解更多互联网资讯！

哈喽，大家好，我是老陈，那最近很多小伙伴都在用这个 e trust 做数据的可视化，那这一期的话，我们就希望能够给大家带一期非常详细的 e trust 的一个教程。 好，那我们就一起来学习一下 e truss， 那 e trus 的话，他是用来就是专门去写这个图表啊，数据可视化的这样子的一个库，那直接看案例啊，大家就能够明白了啊，比如说我们这里点击一下他的这个实力啊，那么这一画，这是他的 e truss 官网。好， 那在这里的话，你可以看到他这里画有非常多的案例，也就各种各样的，这个什么就是你想要把这个数据用图表的形式来展现，对不对？不是这些冷冰冰的数字，那么这个时候的话，你就可以， 哎，想着就是吗用 epass 来做这样子的一个页面的数据可视化啊，啊，那这里的话，他有这个什么折线图啊，对不对啊？柱状图啊 啊，然后呢各种各样的饼图啊，非常的漂亮，还有各种散点图啊，当然的话，你们做这个简历的时候，比如说自己的个人，个人的什么技能的时候，那么你也可以把这个一串子给他什么用上，然后啊这个展现自己的各种各样的技能，好啊，散点图，然后地理坐标，对吧？啊？ 好，然后呢还有这种 k 线图啊，这个显示股票的涨跌啊，那么在这个什么这个 k 线图啊，都可以做。然后呢还有这个雷达图啊，就是比如说你们玩这个王者荣耀都，对啊，不只是这个，呃，什么啊？这个什么样的一个 呃角色啊，你是比较这个有能力的，那么啊他就会出现一个什么这样子的一个，呃，雷达图啊，让你去什么去显示你的个人的一个技能的一个情况 好，然后呢还有这种啊，就是热力图啊，然后呢关系图啊，他们之间的一个关系啊，连接的关系等等，那么啊通过这个热啊，这个关系图啊，你就可以清楚，然后呢还有这个路径图啊，以及这个竖状图啊，对吧？啊，比如说我们要画， 要画这个思维导图，那么这个时候我们就可以用这个竖状图来去画啊，还有这种举证图啊，举举证图好，还有呢就是这种旭日图啊好，还有这种平行的坐标，还有这个商机图啊，非常多啊，非常多，只要你能想 想得到的这个数据，那么都有啊，而且呢他还有这种仪表盘啊，还有这种啊，像柱形图啊，这种，就是啊跟什么图片这样子搭配在一起的好，还有呢这种主题河流图啊，这样子的形式也可以有，有， 好，然后呢还有这种日历坐标啊，然后或者是说你自定义的一些系列，那么这样啊都可以做，甚至呢你还可以做这个三 d 的绘图啊，比如说像这个啊，非常的酷炫， 而且呢这里的话他有就是已经写好了这个相关的案例，你就可以什么直接啊，按照这样子的一个案例，然后你就可以什么把这个页面初始画出来，并且显示出来啊，当然的话，因为三 d 的这个什么需要的这个渲染的啊，他需要的这个性能是比较大的，所以的话我们 可以看到他这个加载的速度也是比较慢的，就是说除非我们啊，就是啊，第一啊，我们知道用户的这个电脑的性能比较好，第二呢他的这个网速贷款比较好，那么这个时候的话，我们就可以采用啊，这个三 d 的这个 图片来进行一个绘制啊，那么啊，这样的话，我们可以看到这就是他的一个这样子的一个效果。好 啊，看起来还是蛮高科技，蛮酷炫的，对不对？ ok 啊，然后呢还有这种啊，就是啊，像绘制啊这样子的啊，图片啊，再加上什么这个数据的一个展现啊，咱们这样子的这个内容也可以做到啊，你别看他是一张脸啊，其实他是一张什么三 d 啊，做成的一个什么 啊，像这样子的一个树状图，对不对啊？然后不同的这个颜色，他所形成的这个高度是不一样的啊，所以的话我们啊就可以看得到他这样 一个人练的一个三维的一个效果好啊，那所以的话我们可以用它来做非常非常多有意义的事情，而且呢它不仅只有这些啊，它还有这么多，对吧？啊，所以的话我们啊可以用它来做非常多啊，非常酷炫的这样子的页面。好， 那么也就说我们啊，如果我们想要在外部端啊，去跟这个大数据可视化啊，或者数据可视化的内容，那么我们就需要跟这个 etrust 打交道了，因为它这个是什么高度的封装，而且呢啊非常的好用，所以的话我们必须得学习它啊，使用它， ok 啊，那我们接下来的话就来说一说他的使用啊，那么这里的话，我们就给大家进行了一个什么这个 e trust 的一个简单的介绍。

大家好，我是刘嘉译啊，这个视频我给大家推荐一个用英年 app 开发小程序时可以使用的图表插件 啊，我们知道在开发网页中我们可以使用一个非常有名的图表插件叫一叉子，但是一叉子只能用在这个网页中，如果我们开发小程序的话，我们有没有对应的图表的啊插件呢？答案是 肯定是有的，我们打开这个啊尤宁艾特的插件市场，然后我们看一下这个热门总榜，其中这个啊第三个他就是一个嗯图表的插件， 我们可以打开啊看一下这个插件啊，使用的话非常简单，我们可以直接使用 用这个 hbod 导入这个插件啊，在这里边我就给大家演示一下如何使用这个图表插件。我们先啊用这个 hbod 创建一个 unif 的项目， 嗯，这里边我就选择这个默认的模板，然后啊项目名称叫 叉的 demo， 然后唯有一版本，我们选择三，然后点创建，创建成功以后啊，我们把这个叉子的嗯 插件导入到项目中，点那点击那个按钮以后，我们选择这个，我们想要导入到哪个项目啊？我们我们就选那个我们刚刚创建的这个叉叉呆萌这个项目点确认啊，他就会导入，导入完成以后我们可以 在这个啊油泥猫丢子里边看到，看到这个插件，他是作为一个这个组件的形式，我们可以啊想使用这个呃组件的方式去使用他就可以，然后我们就啊演示一下如何使用这个啊插件， 我们可以啊，在这里边他有这个官方网站，我们可以打开他， 打开它以后啊点到这个指南，然后这有那个快速上手，我们选择这个使用主见的方式去使用啊，这个插件有两种使用方式，第一种是原声的方式 啊，第二种就是主见的方式，主见的方式就是他啊基于这个原声的方式给你啊 封装成了一个组件，让你使用起来更加的方便。我们就啊做一个他这个啊呆某，嗯，首先我们打开这个 这个 index 叶，然后我们，嗯这些不需要的代码都删掉， 我们创建一个 view， 然后啊我们创建一，然后我们创建一个，嗯， 我们啊这样吧，创建一个啊，唯有用来把包裹这个 作为这个组件的容器，然后我们啊使用这个组件 qiunditas， 然后啊可以穿这个 tip， 就是啊这个啊图表的类型， 嗯，我们先，嗯，他这个靠六亩，就是一个最基本的柱形图，就是这样的一个柱形图，然后，嗯， 这个啊差的 data， 就是这个啊柱形图的啊数据， 然后我们在这里边，嗯， 给这个啊数据复制啊，我先啊定义这个变量啊，让他是一个啊响应式的 r e f 值， 然后我们，嗯引入这个 r e f， 然后我们模拟这个从后端获取这个数据啊，他有一个啊，他有个延时， 我们创建一个这个盖的 data data 的函数， 嗯，我们使用这个 set time out， 让他这个啊五百毫秒以后给这个差的 data 复职， 他的值啊，我们就从这个，嗯，从他这个例子里边直接复制进来 他这个啊数据啊和我们这个如果啊，如果使用过这个 ex 的啊同学就应该能看懂他的数据啊，写够基本上都是差不多的，开的格瑞斯 好，就是他这个横坐表，然后这个 siris 啊， siris 就是他这个数据，这个数据，然后啊他里边有两个对象，就说明，嗯，有两组这个数据，我们啊直接把这个 嗯数据复制过来，然后我们在这个啊啊网体的这个 生命周期里边，然后调用这个 getta 的这个获取数据的方法 啊，芒体的好，现在我们，嗯运行到这个，呃，微信开发者工具看一下效果。 现在这个，嗯，这个柱形图就已经，嗯展示出来了，我们还，嗯，还需要，我们还可以给这个，嗯， 我们可以给这个啊，嗯，这个主驾的容器，这个啊图表 设置一个宽度和高度，宽度你就让他是百分之百，然后高度是三百像素。 现在这个图表啊就已经显示出来了，我们可以在这个啊演示里边看到他有这个好多种嗯图，然后我们啊点这个查看代码，可以看到这个啊实力的代码， 嗯，常用的，比如说柱形图，还有这个，嗯，折线图，折线图，嗯， 折线图的啊，太婆就是赖，然后他的这个啊数据结构跟柱形图是一样的，我们直接改这个太婆，然后看一下， 我们看到啊现在就 这是折线图， 嗯，然后啊还有一个常用的就是饼图，饼图的话他没有这个啊，没有那个开了格瑞那个纸短 啊，他就是直接就是 siris， 我们可以啊，就在这里边看他这个视力的代码，可以从这看到他的这个数据结构，我在这重直接把它复制进来， 然后这个肽法改成派。 看到这饼图显示出来了 啊，这个这个图表和这个一叉是一样的，就是我如果我改变数据的话，他这个啊，他这个啊，图表会自动的更新，根据这个数据啊发生变化，比如说我可以在这 改变数据， 嗯，很多穿着雷塔， 我在这定义一个改变数据的函数，然后我让这个差的 data 啊，点 y 六，点 serious， 就根据他这个数据结构啊，去去找啊， serious 零点给他，然后我们改变第一个值，他的歪六，我们把他从五十改为啊，改为五。 现在这个啊，一般这个数据他是五十，然后我点击改变数据，他就会变成五， 嗯，他就会啊重新渲染这个图表，他现在就变成了五，嗯，这个就是，嗯，可以用在小程序的一个图表库，这个视频就到这里。

我们来画一下这个游戏的类图，首先我们是一个游戏，所以我们定义一个类叫做 gam 来进行一个游戏的模拟。 这里接下来我们有玩家，有怪物，所以我们有两个类，一个是玩家 al， 另外一个是我们的艾力米， 然后我们看第二台需求，通过输入控制玩家移动，所以我们要有一个输入的类来进行一个模拟，我们的输入 我们叫做音库，怎么办呢？卷来获取我们的输入啊。呃，另外一个是玩家和怪物足够靠近的时候，这个足够靠近呢，也说我们有个位置，对吧？那我们是个二的游戏，所以我们有个 x y， 同时呢我们呃会进行攻击，也就说我们有相应的带脉菌伤害，然后我们同样用硬尺， 然后我们还有一个血量，因为我们会受到伤害，我们有血量来进行标记，同时呢我们的攻击有一定的频率，那么频率我们可以认为是一个攻击的 cd， 这边我们用 cd， 我们用伏点，行啊，多少次？ cd 是哭荡，是冷却的意思啊，就是我们游戏里面常用的一个东西， cd 要有个计时，对吧？然后什么时候告诉我们现在的 cd 有没有冷却？ 如果我们的 cd 摊码大于我们的一个 cd 的话，那么对应的我们其实 cd 就好了，这是我们的一个 cd， 那么玩家和怪物其实都有这样的属性，那么我们可以用继承来去避免。呃，我们角色和怪物都定义同样的一个类型啊，那么这里我们叫他为一个啊，艾克他， 然后我们新建一个类叫做配料，然后配料， 然后 a 内面就继承这个类用继承，我们用这个，然后我们 再点另外一个完成两个基层，这边是对应的一个相应的一个中文，这边是英文，你也可以进行对比参考。那么我们有了玩家，有了相应的 app， 然后我们来看下一个玩家 和敌人被攻击的时候会闪红，比如说我们这边还要扔继，继续增加我们那个属性啊， 散红，那么我们要有个变量来标志我们当前是否在散红一只特色，同时呢，我们在 他闪红不是一直是一直都是红的，他需要在一定的时间之后他会恢复，那么我们要有个时间，同样的有个胎目来进行一个 盒子开门去标志他。呃，当前的计时已经闪红了多久了，同时呢我们还要需要告知闪红多久后，这个就不算是不再算受伤， 我们攻击的时候要判定他这个距离，我们用 xy 来进行计算，然后我们逃跑的时候也用用了 xy， 然后我们朝着对方移动的时候，我还用 方向，这里的方向概念也用的 x y， 我们可以把这两个东西抽离出来，抽成一个单独的一个类型 来方便我们统一的进行管理啊，我们可以删除他，然后去增加一个呃属性，我们叫做呃掰扯二啊，里面是两个， 你就增加一个新的一个类型， 这是外层， 然后里面有相应的有两个属性，一个是硬扯 x 硬折弯。 那这个时候呢，我们艾克特拥有了一个相应的一个艾特，那这时候我们要用一个组合的概念啊， 我们艾特有有一个这样的 wifi， 然后是个 pose， 这里讲一个另外一个点啊，就是软件开发里面会有几个原则， 一个是开辟原则，一个是依赖倒转。然后你可以搜一下这个其他原则啊，那么其中有一条就是单一执着原则，就是我们一个类里面不应该塞了很多这个功能，比如说我们这边啊，攻击， 你可以认为是一个技能，然后这边受伤的时候你可以认为是个受伤效果，以及相应的我们后面 这边血量低一定的时候要逃跑，以及我们什么时候攻击，那这个我们可以认为是 a i， 他里面同一个类里面做了很多很多的一个行为，我们把应该把这些职责给拆出来啊，不应该把他们丢在一起，我们可以把它拆出来，拆制成几个不同的类啊。那么 同样的我们定一个，呃， a i， 表示我们的门手进行一个攻击 以及另外一个 cgo， 这里呢是我们的一个 flos， 呃 top cd， 那么我们可以直接叫他为一个 cd， 那么这两个我们就不再需要了。同样呢， a i 这边呢是判定我们足够靠近啊，除了技能之外呢，我们还有一个受伤，对吧？我们同样呢可以定一个类型，来去做一个 喝着 efice 来去处理我们的一个受伤的一个效果，然后这个我们就不再需要了。 好，我们现在角色呢就只拥有几个变量了，一个是伤害，一个是血量，还有一个是位置，以及他拥有这些属于他的一个能力或者说行为。哈，好了，那现在我们拥有了 ai， 然后我们来看下一题， 然后敌人血量低于一定的时候会逃跑，那么我们这边敌人和玩家都会进行一个攻击，他有相应的一个啊，他和 disco 同时他有一个相应的一个呃攻击频率，这边是技能啊，那 ai 里面是他什么时候攻击，或者说我们增加一个新的一个变量， 那么现在我们增加一个呃血量低一定的时候逃跑，这个是只仅限于敌人，我们玩家和陪练都有这样的一个艾克特，都是属于艾克特，他里面都有 ai， 但是 ai 里面他们 ai 不太一样，那么我们可以对 ai 进行一个继承，比如说我们现在增加两个类型，然后我们用相应那个继承来进行的表示。在一开始艾特里面进行配置，那么配置的时候我们增加一个方法，我们增加一个 rvx， 在他初始化的时候一一一创建的时候就进行配置，玩家就配置相应这个排位 ai， 敌人就配置 amm a i。 那同样呢，我这边要进行一个重写， 那么敌人 ai 里面就是血量低于一定的时候会逃跑，那么我们就要增加一个属性危险的一个血量的百分比，开始 逃跑的速度，以及相应的一个逃跑。什么时候停下来，是不是一直逃跑，那么我们就绕着 stop ds， 因为我们距离一定超过一定的时候我就停下来，我不想一直逃跑，因为玩家不再靠近，我没必要那么害怕啊。然后接下来我们世界是有边界的，你可以把这个边界放在我们的店里面，也可以单独抽成一个类出来里面去处理相应的个世界。就像这边那个单音原则一样， 我们抽心抽出一个内涵去管理我们的一个事件，嗯， word， 原来我们的店是引用我们的一个配料，我们爱丽美，然后现在是交由 word 去进行的掌管，他负责其他的一些事情，比如说胜负的一个判定， 那么 word 去锁引这两个东西，那么我们可以用我不是很习惯他的那个这种的一个反向那个操作啊，应该是我累包含他，而不是他 属于这样一个反反下的一个操作。我拥有多个艾克特，那么艾克特里面可能是配料，也可能是艾力米， 同时呢我有一个边界，对吧？那么我们这边定义一个，呃，边界啊，我们同样可以用一个 v 乘二来进行表示，他的一个 x 的一个边界 y 润，我们分别是 x y 两个方向，他的一个范围分别是最小和最大，最小最大，那么我可以定义我们那个边界， 同时我们给他一个方法获取我们的合法的一个 ylepos， 然后里面会存入一个 vivox， 可能会返回一个 vivox 啊，返回一个 vivox 啊，你存入一个 vivx 啊，它里面进行一个限制，这是我们的时间， 然后我们需要以控制台的风格绘制出来，那么这里就会涉及到一个点了，就是进行绘制，那么绘制我们可以说是用一个这边加一个方法进行绘制， 我们也可以说把这个渲染交给一个独立的一个类渲染引擎啊，由他加油，他进行处理。那么这边我们可以说是一个 这个世界拥有一个渲染器，然后 wifi 的时候会调用他的渲染器里面的一个函数进行一个处理，那么这里我们就要做 ren 的， 当前我们是用命令行来进行渲染，如果我们呃后面接入其他的游戏引擎，比如说油腻球很锐来进行渲染的时候，我就用引擎来进行渲染，那么这个时候呢，我就不再是以命令行的形式来进行渲染。 我们那么我们可以有多个不同的类，比如说我们的这个 cmd clun 的 rend 全英俊， 我继承制这个类，那同样的我们还可以定一个，比如说我们用的是运力体啊这个优信引擎啊，有恩德平安军， 那么我就需要根据虚假我卧的在初始创建的时候，我就需要根据我当年什么环境来进行配置，我当前是在 vivo 环境，或者说我就在命令行环境，那么我用可以用红来去进行判定。如果是当前是属于 啊优立体环境，那么我就创建一个优立体的一个 nga 进行渲染，那么这里同样的，我们 word 也需要进行 拥有一个函数，叫做二位，他出示画的时候进行配置。同样的，我们整个 玩家在我进行的驱动的时候，整个游戏开始驱动的时候，一针一针驱动，我玩家也需要进行一针针，每一针里面都去进行判定我当前玩家离我的距离，所以他需要一个啊不对的这样的函数，同样的我这边也需要一个啊不对的函数， 世界是归我们游戏馆的，同样呢，我们游戏还有个状态，一个是敌人当前信息，由这个 word 来进行统一管理，另外一个是我游戏当前的状态电视，对此 看电视类的类型呢？你可以有一个类去定义啊，他的状态是什么？你可能是一个 m， 也可能是其他的那么一个 excex 来去标志往前一 的一个游戏，玩家会拿到音 pose 里面有些信息，那么这边加了一个函数，我们叫做盖子音 pose， 那么返回的一个券啊，玩家需要根据这个券来进行一个处理。 好的，那这边还另外一个点，就是我们进行的渲染的时候，要把相应的一个渲染的参数给他，比如说玩家的位置在哪里啊？怪物的位置在哪里啊？是是什么怪物啊？怪物有是什么制服啊，这些信息都需要处理一下，那么我需要把一个参数传给他，那么这里我们可以叫做人的应付 音放，那么需要定一个其他的类型，那么这个类型叫做人的音放， 然后渲染信息的话，你可以进行这个扩充，包括他里面有玩家的位置啊，哪些东西，然后他可能进行的组合，然后进行另外一个 x 应付， 它里面可能会有多个，那我们这边是用，我们先用反了，这个才是， 这个是组合，这个才是组合，这个是一个聚合，这边应该这边应该改成是我们的一个组合啊，我们把它删一下， 然后这边可能是有相信哪个位置信息， 然后以及什么颜色，那么这边定一个， 那我们把相应的组织一下，不要让他那么乱，第一个颜色边是错了，我们删掉，我们换成另外一个 come on pose， 还有点就是我们这边 ai 这边其实也有相应的个 flowchtime， 他不能用利是他，那么我们又换成另外一个 宿主，宿主可以，但其实他是个历史堂，那么我们这边叫一个阴佛历史 英 boss， 同样的这边我们把他名字改一下，改成个英 boss， 然后这个我们就改成一个 rend e f。 同样这边有三个地方都有胎毛，他都需要一个更新啊，所以他们这边都有一个啊，不对此。嗯 plus 第一梯带着太阳，同样这边也有，但是这三个都有的话，那我们提取成一个公共的一个基地，那我们叫做空炮呢？然后用继承的方式来进行处理。 好，我暂时就先这样，我们后面携带门手，发现有不对的地方我们再回过来头来改这个内图啊。

各位同学大家好，我是公控关老师啊，这节课呢？嗯，回答同学们在群里面啊，问了一个问题，就是我们在上位机做这个 ui 设计的时候啊，有一个经常实用的一个方法，就是说我们如果说有多个啊，在主界面上面有多个功能，对吧？ 然后呢这里面有一个 panel， 那么在这个 panel 里面呢，要显示我不同的这个画面，对吧？有的显示主画面，有的显示我们这个 报警画面，有的显示我们的这个啊，用户配方啊，有的显示我们设备的这个设备参数，对吧？设备配置参数等等等等，那么我们不同的按钮呢，要切换不同的功能， 那么在这里呢啊，我们以前呢是通过这个我们自定义控件，对吧？然后呢在这里面来做，那那么 我们同学呢，为了说有一种更方便的一个方法啊，就是说平时也是比较常用的，就说假如说我们这里面有多个窗体，对吧？那么怎么把这个窗体不同的窗体通过这一个拍呢？我给它显示出来呢啊？假如说我们这边有个 formcall 的 form child 一，对吧，然后这个 form child 一下面呢，有非常多的一个按钮，对吧？ 那么我们还有一个 formtell 的二， 这个 formcall 的二上呢？我们假如说我们这边有很多，呃，假如说 list the books at least box， ok， 然后呢我们这个主窗体呢，这个 panel 呢？它有一个背景颜色，假如说我们给它一个背景颜色， ok， 然后同学我们看一下啊，我们在这个主窗体的这个拍弄下面，对吧？通过单击这两个按钮，那么这个呢是我们这个子窗体，子窗体一啊，这个是我们子窗体二， 我们呢通过自定义空间啊，可以在这个 panel 里面添加不同的这个自定义空间，那么我当我们添加窗体的时候，对吧？因为我们有很多，为什么要这么来做呢？因为我们这个窗体当中啊，我们要把多个窗体就是多个功能界面啊，显示在主画面的这一个 panel 里面，通过切 换来显示多个多个这个子窗体。那么如果说事后呢，我们把这个功能和代码，每个窗体，每个子窗体里面呢，就啊体现一个这个子窗体的功能，对吧？都给他封装好，然后显示我们这个工艺配方或显示我们设备配置参数，对吧？通过 我们这个只创底里面有个写入，对吧？直接来保存我们的数据，对吧？通过读取和写入来保存我们的数据，假如说这个是写入 啊，这样的话呢，我们能把这个功能呢给封装起来，对吧？把功能呢给封装在一个子窗体里面，我们直接在这个子窗体里面，日后如果有修改的话， 然后呢？呃主窗底的代码不用修改，直接修改子窗底的代码就可以了，这样的话呢便于我们这个，呃也是对于解偶的一个需要，对吧？因为我们 之后呢经常会在这个指窗体的这个部分功能上进行一个修改显示啊，对啊，包括增加一些功能啊，删除一些功能啊，对吧？进行一些调整。那么主窗体呢，我们不用进行任何的修改，直接这个，呃，直接，我们就是直接就能调我们这个 显示我们这个痔疮体，对吧？那么看怎么来做？当我们单击痔疮体一的时候呢？同样我们还是什么呢？ form？ 假如说我们这个 form 翘的一， 你又一个 form 敲了一，然后呢？假如说我们正常的话是怎么呢？我们正常的话是直接点儿，假如说我们点儿， 嗯，假设说我们正常的话是这样来写啊， pedo e， 点 controls， 对吧？点 ad， 把这个空间给贴 添加进来，先看一下，呃，这样有有有没有效果图片看一下，他会抛错，对吧？无法将顶级空间添加的空间，对吧？为什么呢？因为我们这个缝膜他这个默认他是顶级窗体， 那么怎么样给它改成不是顶级创体呢？对吧？我们就要把我们这个 form 加入一点 top level 啊，这个是顶级创体，等于 false， 对吧？那么加上这句话呢，我们就把他的这个这个顶级窗体这个属性呢，给他改成不是顶级窗体，这样就能添加进来了，这时候我们再看一下，那么同学们看他还是没有显示出来，对吧？还是没有显示出来，为什么呢？因为我们这边还得加上一个我们这个 show， 这边看一下，现在呢？他就显示出来了，对吧？现在就显示出来，但是显示出来以后，同学们看一下，这不太不太美观，对吧？不太美观， 有两点不太美观。第一点，同学注意老师的思想，思想哈，第一点，我这个窗体显示进来以后，我要只显示他的内容，对吧？你看这样还可以拖动，这样就不太好了，我们要不允许的拖动，就上面这个东西啊，上面这个，我们这个标题栏让他给他取消掉，对吧？那么我们必须得什么？ for 恰到这一点儿啊？我们叫 boulder style， 等于 not， 这样的话，同学们看一下窗底就完整的显示在这里面，但是同学们看一下他显示的不完整，对吧？我们这个 翘的一下面，这边还有按钮没有显示出来，对吧？因为我们这个指创体比较大，对吧？而我们这个拍弄的比较小，那么老师一会带图没看，怎么来做，对吧？我们现在呢，先把这个功能给他实现，对吧？先实现了这部分功能，显示指创体二呢， 我们也是一样，对吧？显示只创第二呢？我们也是一样，我们这边呢，显示只创第二。 通过一个例子，让同学们更重要的是掌握我们编程这个整个思想过程，对吧？ ok， 然后呢，我们再启动一下， 同学们看一下，现在只显示只创体一，对吧？只创体二并没有显示出来，为什么呢？因为我们这个只创体二啊，当只创体一已经有了以后，只创体二在只创体一的后面，对吧？ 它没有显示出来，那么我们必须得把这个什么呢？把子窗底二呢？给它 bring to front， 对吧？拿到前面来， 单击哪个按钮的时候呢，就把哪个窗底给显示在前面，同学们看一下，这样就 ok 了，对吧？但是这样写呢，我们看此窗底二也没有显示完整，一会我们再来看， 那这样做行不行呢？这样做是不可以的，为什么呢？因为同学注意看，我每单击一次按钮，我是不是都心拗了一个这个缝，那么你单击了很多次以后，那你这个缝不停的心拗，心拗，心拗就不是我们之前那个创体了，对吧？我们要如果说已经有了这个， 已经有了这个窗体了，以后，我们就不会再新创建了，直接给他显示出来就行，如果没有这个窗体，我们再给他新 创建，对吧？然后这个时候我们该怎么来写呢？我们这时候一定要加上这个，要不然你创建了很多个对象。我们在这个创题里面，这个指创题里面修改了文本框的内容啊，或者是对这个某些空间里面编辑了一些内容以后，重新再点单击这个按钮，他又新创建了一个缝，那就不对了，对吧？ 我们叫 eve， eve panel， 什么 eve panel？ 点 controls， 点 content， 对吧？包不包括这个？ 那么这个地方我们所有话，这个地方我们应该怎么来写呢？我们必须得把这 formcall 的一对吧给它放在全局，放在外面，然后呢？ 给它都放在外面，如果说我们包括这个， 如果说我们这个不包括，如果说不包括这个， 我们就把这些给添加进来。 airs 呢？如果包括了呢？包括了我们直接就什么呀？直接我们就 给它显示在最前端，对吧？显示在最前端， 那这样写是不是对的呢？这样写是不是对的？这样的话呢？就是如果说我们这个创立已经创建了，那么直接就把之前创建的创立给他显示在这前端，那么下面是一样的，下面是一样的， ok， 这样就没有问题了，对吧？如果说我这个创体，对这个里面，假如说我这里面创体里面有一个，有一个文本框， 然后这有个文本框，然后这个呢？也有一个文本框，我们测试一下，假如说我们在这里支窗底，我对这里修改了一下，对吧？还是刚才那个窗底，对吧？ 对，这个也修改，对吧？他不会不会新创建创题，那么同学们看啊，我现在这个功能实现了以后呢，我们再看一下， 但是他没有显示完整，对吧？没有显示完整，那么同学们就会想到我们用我们之前的啊，老同学们注意认真听老师这节课啊。后面还有些内容没有给同学们讲完， 都是我们在做项目的时候呢，比较实用的一些功能，对吧？那么，呃，怎么样把这个窗体给它显示完整呢？对吧？那么同学们就会想到用到我们之前讲过的一个什么方法，对吧？ 我们之前给同学们讲过一个什么方法？就是我们这个，呃，同学们还记不记得有个窗体的一个至适应，对吧？有个窗体的至适应，那么我们就啊让我们所有的这个啊，指窗体一和二，对吧？ 是适应我们这个拍弄，对吧？这个拍弄多大？我们这个就把我们这个指窗体所有的空间全给他缩小或放大，对吧？指窗体二也是一样的道理，那么你这个大，你这个缝大，对吧？我就现在要把你这个缝里所有的空间放到我这个拍弄里面，这个拍弄小， 那所有的空间呢？会自动会缩小，对吧？我们写这样的一个方法，写这样的一个方法，那么就是 word， 什么 word set control set， control said controls， 对吧？我们要给它放到哪个？放到哪个容器里面，对吧？我要放到哪个容器里面，呃，然后在这里呢，我们 float 定义两个系数，对吧？同学们还记不记得 new x 等于 this 点 panel？ 因为我们要放到 panel 一里面点 vs， 那 panel 一的宽度是多少？除以 convert 点 two single， 出于什么呀？出于我们这个传递进来，我们得传递进来一个参数，对吧？ 这个 form f 传递进来这个参数是什么意思呢？就是说我们要把哪个子窗体，哪个子窗体，它原来这个 form 的宽度是多少？ 我现在这个 panel 的宽度是多少？把它俩进行一个除，就证明我现在这个是一个倍数的关系，对吧？是一个倍数的关系，就现在的 panel 是原来你本身 form 的，呃，零点几倍，对吧？这个是 y， 那么这个是我的高度，所以同学们这个思路得清晰，对吧？然后这个 f， 然后呢？这两个系数有了以后呢？我们要对我们的 set ctrl， 我们要再写一个方法， sad that control， 对吧？对所有的空间呢进行一个系数的一个呃更新，那么这里面呢？ float f， float x， float y， 然后呢？我们这里边 controls ctrl c 文 s， 然后呢？我们在这里要 set ctrl， 对吧？ set thank you， 这个系数呢？就是 new x， new y， 然后针对于哪个？针对于哪个容器呢？ this 点 panel 这个在我们以前老师单独录了一节课，就是我们这个窗体的自适应，对吧？那这个课给同学们简单的再写一下，然后在这里呢，对吧？我已经要把你的这个， 这是我当前这个容器，对吧？我我我指窗体要显示在当前这个容器里，那么传递进来这个系数是多少？那么我们现在这个派头比较小，那这个系数换算回来的一定是一个小于一的一个数，对吧？把这个系数呢分别便利在这里面进行一个便利，便利以后呢？ 把每个空间，对吧？都乘以我们这个系数，都乘以我们这个空系数，那么我们这个看一下啊，传递进来的这个是 this panel， this 点 panel， 对吧？然后呢我们传递进来 点 voice， 用这个 ctrl， 这个用 seven 吧。 c u n 点 y s， 应该等于我们的 c u n two inch 啊，转换一下，把我们的这个 c u n 点 y s， 就把我们当前的宽度乘以我们 x， 然后呢我们这个高度等于我们这个高度，所以这个 y， 然后呢，我们这个去去左端点的这个距离 left 乘以这个 x top， 等于这个 top 乘以我们这个 y， 那么同学们注意看一下啊，我当前这个 c o n 它是什么呢？对吧？我传递进来的 c o n s 是 pano 一，那么我这个 pyno 一里面所有空间进行便利，那么便利过来的是什么， 对吧？便利过来的是我们这两个痔疮体，对吧？这两个痔疮体并不是痔疮体里的空间，对吧？那么这个 c o n 传递进来的痔疮痔疮体，那么我们如果说这个痔疮体，我们要把这两个 死疮题里面的空间啊进行放大缩小，那我们这思路一定要很清晰啊，那么我们 c o n 点 controls， 对吧？如果说它大于一点， count 大于一，那这个时候呢，我们再去进行一个地规，对吧？进行一个地规，一个调用 set control， 我们再重新反复执行我们这个方法，然后呢？ x y， 然后呢？这个空间填入我们什么？填入我们这个 c o n， 对吧？ 把我们当前这空调，然后重新再给啊循环一遍，这样的话呢，我们再调用这个 said ctrl， 然后在这里呢，我们在这个最上面给他显示，对吧？ said ctrls， 这是 said ctrls 传递进来一个什么呢？一个 for， 那这个呢？是针对我们这个痔疮体 form 一的，然后下面呢？ side controls form 二。这时候同学我们再来看一下最终的效果。痔疮体一， 痔疮底二，同学们看一下现在这两个呢？这两个痔疮底是不是完全在我这个拍道里完整的显示出来了，对吧？完整的显示出来，然后修改一下，修改一下里面的内容，对吧？没有问题，对吧？没有问题。 如果说同学们就是我们在做项目的时候呢，就可以这样来做，那么老师这里用到的是 panel， 对吧？那么如果 panel 呢？同学们觉得不好看，那么我们用这个 type control， 对吧？ 也是一样的道理，对吧？这个 type control 呢？也是一样的道理。 那么同学们下句以后呢，可以试一下，当我单击指窗体的时候，对吧？我这里面是 panel， 如果我是这个不是 panel 了，我们是 tab ctrl 一点， tab page 零，对吧？第一个页面点 controls， 这样来写也是可以的，对吧？因为 type page 是零，也是一个容器，对吧？也是一个容器，然后把这个呢 control 这样添加进来，然后呢我们把这个， 这个是第二个 g 页面，这是第二个页面， 看同学们，同学们看一下这两个页面是不是都有数据了？是不是都有数据了？ 因为我现在单机只是光显示这两个窗体，对吧？那么还没有，就是这个页面切换，那么同学们呢，可以下去以后可以试一下，对吧？可以下去以后试一下。当然了你这两个可以直接不给他放在窗体里也是可以的， 你不给他放在单机按钮里，也可以直接放在窗体的初始化里，也是可以，对吧？那么，呃，就是这样，然后我们如果说日后呢，我们假如说对这个窗体进行了一个修改，对吧？假如说这个窗体里没有这么多按钮了，对吧？ 没有什么按钮，创体二类呢，创体二类呢？就剩上面这么多按钮了，然后我们启动一下看，这样的话呢，我们这个相应的显示出来，这个指创给页面呢也发生了 一个变化。所以同学们，呃，做项目的时候呢，我们这种窗体啊，嵌入容器得会做。然后呢我们自定义空间啊，也得会做啊， user ctrl 啊，包括我们自己封装好的这种空间 啊，点 cs 文件的这种啊，自己绘制的这种空间显示上来啊，也得会用动态的创建这些空间，动态的显示这些窗体。 然后呢我们单独的对每个创题里的内容啊，呃，前端或者是后端的功能逻辑进行修改，都不影响我们主创体上的一个呃功能的一个修改，是吧？这样的话呢，就是也是相对于一种结偶， 所以同学们这种方法一定要会用。然后呢另外一些同学们看一下老师的这个一个小功能，就是单击这个按钮，对吧？然后窗体呢实现一个震动的一个效果，然后同学们下去以后呢， 可以尝试的去做一下这种震动效果呢，就是说假如说我们做的这个上位机的这个画面当中有些按钮，对吧？如果说在某些运行状态的时候是不允许单机的，你可以直接给他 in level， 可以，那你如果说想给他设置成一个对操作人员 提示的一个更明显的一个效果呢？你也可以用这种震动的，对，假如我现在运行状态过程中不允许啊，不允许在这里面，呃，修改工艺配方，或者是不允许结束啊，或者是不允许插入些数据，我单机的时候就可以提示这种震动的一个效果 啊，这实现起来也比较简单啊，也比较简单。那这里面老师分完好一个这个呃震动的一个方法，对吧？通过我们这个随机数啊，位置的改变，创意位置的改变来给他实现，那么同学没有任何问题呢。 呃呃，这个，这个，这节课内容啊，同学们就是这种方法，同学们要知道啊，多个床底嵌入容器， 然后同学们下去以后呢，练习一下，有任何问题呢啊，加关老师微信啊，进我们学员群，然后系统的来从零开始学习咱们的课程，因为老师的课程啊，就是讲的比较通俗易懂，就是结合的具体的案例啊，前面前面先讲这种基础的语法，然后呢，哦， 结合的具体的案例，具体的这些小例子，还有具体完整的项目，带同学们把这些所有的上位机的技技巧给同学们掌握啊，怎么来应用 啊？有一些什么样的一些灵活的一些功能，带同学们来一起来做，所以希望同学们呢能真正掌握我们 csf 公共技术，然后呢，呃，让我们越来越好啊，谢谢大家。

大家好，我们接着上回讲到的，我们上回讲到就是用西夏补习的程序已经连上了 pvc， 然后我们这回要讲的是读取， 读取滴滴快里面的值，读取滴滴快里面值，当然他这个程序里面我们可以可以读取好多，比方说读取不止滴滴快，比方说我们可以读那个音铺的就是输入，输入的计算器啊，输出的计算器哪有 m 点 m 点计减器呢？这个是滴滴快的，这个是时间计算器的啊，是技术期的。我们这边就讲读滴滴快，来做个示范。那我们看程序，他其实这边读滴滴快，其实就一条语句，就 q 字典 mitit， 我我这边是读 就那个呃 beat 一个字节，然后他这边后面就是紧跟着后面阔，后面就是滴滴啊，带着 top 就是数据类型，我们特别是 dp pluck dp 快，当然也可以是印铺的，就是输入的计算器，或者说二的不得输出的计算器，就是根据这个来，比方说你可以写 marry， 就是嗯， m 点的计算器，然后后面这个是一，就是代表其实地址哎，不代表那个计算器的名称。比如说我这边是 db blok 点一就是说逗号，点一，逗号，这个是逗号啊，那一就是 db 一点 db db b 零， 后面这个就读的长度，我一就是说就一个字节，就是 db 一点 dbb， 你如果是二的话就说的读 db d b b 零到 d b b 一，所以这边是长度，我这边只写了一个，然后这个前面这里是一个局部变量拜的局边量，后面我这边是定了一个数组，数组就是一个败类的一个数组， 然后下面因为我们这边这边就显示他的直的话，就这个一个，呃，开始 boss 这个包子显示他的只要一个转换成俊，就这个，因为我这边是读的是 d b b 零吗？所以他这个是第零个宿主，拜的是第零个宿主，我这边是个宿主， 你第一个数字就是第 bb 零，我第一个，我这边是二，比方说我这边是二，这边是一，就第一个数出来就是 爱的史的第一个数字呢？就是 dbb， db 一点 dbb， 是吧？现在我们改回来还是用零吧。那转换成是俊，然后复制给这个 这个这个这个这个是 boss， 显示这个程序就是这样。然后我们这个 pvc 现在已经模拟了，这边就开始运行了，然后我们启动一下，我们来看一下，启动一下，我们这个时候来测试一下，我们现在连接 ppt， 好，现在在连接上点确定， 我们看到这边现在是显示零，对吧？那我们看这个 qc 里面的值，我们这个是 db 的，就这个 db 点 dbb 零，是这个 dbb 零，当然这个这个如果你这边这个一定要把这个优化房关下去一个问题， 这个我们就读不到的，一定要把它取消掉啊，下进去，对吧？我们现在看到，我们现在现在读到的是零，对不对？那个这个是零，他的只是零，我们这边 pvc 这边也是零，对吧？那假如说我改一下，我改一个， 改个啊，现在是二了，对吧？我们再读一下，再读一下，我们再读一下，然后连接啊变成二了，对不对？这样就把 pvc 的直线给低比快的低比比零的，低比一点低比比零的直接给读到了，这个读的话就 就就就讲到这里，就这个语句也其实挺简单的，只是我们只是说我们根据他这个来用破的去读，可以读这么多题程去根据他这个来就可以了啊？所以我们这个 读比较简单，我们读的话就讲到这里，那我们下回再讲写，下回再讲写，那今天先讲到这里，谢谢大家的。

一个专注于点呢才高级调试的技术博主。大家好，今天呢和大家来聊一个话题，就是 span。 首先的话呢，我们要知道什么是 span。 span 的话呢，他提供了对一段连续的地址空间的一个地址及访问。 那么他呢是如何才能做到这种低质级访问？我们可以看一下四片的。呃，一个类的啊，这个 structure 的一个定义。我们可以看到呢，为了能够达到这个 连续空间的一个地址及访问呢，他用到了两个呃，两个字段吧。第一个是破音，特，破音的话呢，呃，一般来说呢，他就是指向了这个连续空间的一个其实地址，然后后面是一个练词。练词的话呢，是这样的，如果说你对指针进行加加减减， 他会跳到下一个内存单元。对，就有一点像数组这种模式。对，那么他在内存中呢？我们可以看一下这张图，呃，破音的指向了这个起始，然后练词指向了这个边界。 nice。 第二个我们就来聊一聊为什么要用 span。 其实呢，在 c shop 中有很多地址连续的内向，比如说 style， 比如说数组。 那尤其是思俊，思俊的话呢，我们都知道他是指读的，只要你对他进行了一些操作提取，那么他都会生成新的走串。 那生成新的做不赚的话呢，第一个涉及到了分配的一个压力，第二个涉及到回收的一个压力。对，那如果说你从指针级对他进行访问，因为本质上来说，你思君最终呢 都是一些掐字符存放在这个内存地址上，那我直接从内内存地址上直接把你提出来，那这样的话呢，就不会生成很多的思君对不对？ 那接下来的话呢，我们就可以看一下这张图，可以看到 s 呢是九十三，九十七三。然后呢，我们就可以对他进行了一个求和的一个操作。我们可以看到原来我们用呃 斯普利的话呢，我们发现呃要把它按照呃空字符给他截取，截取之后，然后用两个 come on 的图印到三十二，然后把它 截取一下，然后加一下，最终取出来的结果是一百。那接下来我们看一下用 span 怎么去取 span 的话呢，我们首先要找到啊，这个是业务逻辑，我们可以把它找到呃控制不串的一个链子 position。 然后找到 position 之后呢，我们通过 slics 这个方法就是呃它的内存地址是零啊，内存就是零号的就是 point， 指向的是开始。 然后他的练词是多少，比如说练词是二，那就相当于呢在这个破音的上面加一，加一，那就相当于跳到了第三个内存单元，那相当于把那么一提取出来了。那下面也是同样的道理啊，斯莱斯也就是切片，切片之后呢，把三提出出来的， 然后做了一个九十七加三，最终结果是一百。那这种代码中呢，你可以看到他本质上是没有时间操作的， 他无非就是从内存地址上直接把值提出来，就这么简单。可能有些朋友呢，对思片看的不是很舒服，呃，他更可能更喜欢看指针，那我把它转成了一个 c 原版。 我们可以看到呢，我如果我如何模拟，首先我第一个 span， 一个结构体，然后第一呢两个，第一个是 one 一侧的啊指针，第二个是硬字，那么 one 的这个指针呢，就类似于我们这个力，是差不多的一个模板。对， 然后的话呢，我们就可以呃九十三三，我们把它转成这个掐的一个指针类型， 然后付给他，然后我们调用那个丧，对吧？那么丧方法中的话呢，也是类似一样的，先取这个破碎成，取完破碎成之后呢，我们就取。 当然这地方的话呢，写法肯定要 c， 稍微复杂一点，其实也就是一些业务逻辑吧。然后 spa， 你跟 spa 二相加，最终的结果呢，也是一百。总的来说的话呢，如果你想 在 c 刹不中实现高性能，那么 spa 呢，是必须要会的，他不仅速度快，他还提供了一些运行时检查，比如说那个链子。那当然的话呢，有这个运行时检查，那他性能肯定就不如 c 了，因为 c 本身就没有 啊，这个性能检查，他完全相信程序员。好，那这个就是今天给大家做的一个分享。那下期视频再见，拜拜。