vue3怎么循环echarts

哈喽大家好，近两年呢数据可视化非常火，这种比较炫酷的效果 对吧？那么在我们前端开发过程中呢，也会遇到这些数据口罩图表的问题， 那百分之九十左右的数据可视化呢，都是使用我们的一叉二次图表完成的，那么今天呢，我们就小试牛刀，在我们 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 同样也会进行封装，封装这一块呢，咱们今天就不做介绍了，小伙伴们赶快去试一下吧。

如何在 voe 的项目中优雅的封装咱们的易差事？做过图表开发的同学肯定用过易差事，那么我们在用易差事的时候，他的一些配置我们基本上都会从头到尾写一遍完整的 option， 非常的麻烦。 这个是我在项目中使用的一叉十的一个 dev， 我做的原则就是说我尽量做到我的这个业务数据和我这个样式的配置，要进行数据的分离啊。对于我怎么样使用我这个 一叉子封装的主见呢？我只传入我的业务数据就行了，比如说这个是我封装的这个主见，那么我传入我这个数据累死他。 这个类似类似的就是我要渲染的数据，这个数据可以理解为是从后段获取的，那么它的一个视线效果就是这样的，那么我还可以进行增加，这个我可以无限增加的啊，增加两三个、四个。编译完了之后， 我刷新一下，看到没有，他也是适应的，来看一下我怎么样具体实现的。首先我的地方是引入我的这个 组建，在这个文件夹下，他有一个默认的这个配置，其实就是咱们一叉式的一些基本配置，这个基本配置和后端的业务没有任何的关系，我只要引入这个配置，然后我用到楼带式的这个墨制方法，我需要把我的这个配置 和我的业务数据进行墨迹，墨迹完了之后，这个是我真正的一差十所用的数据结构。那逐渐出手画的时候，首先要更新这个实图，出手画我的图表需要调用这个方法， 这个方法里面其实就是做了一些配置，然后去合并我的基本的配置和我的要数据，然后呢这地方还有一个很重要点，就是说我要监听页面的缩放，页面的缩放我要调用这个方法， 窗口缩放的时候，我的一叉子要动态的调整自身的大小，可以看一下这个是自动缩放的，看到没有？还有一个很重要的一点，我还要引入了一个这个这个第三方的库，那么这个第三的库是干嘛的呢？意思就是监听你这个元素的变化，那么我是怎么使用的呢？ 在我出的话时候我要调用一下这个方法，这个方法也就是说对页面上的尺寸进行监听，当发生变化的时候，我还要去重新更新这个实图。为了应用场景时，有的时候我们监听盗墓尺寸变化，这时候如果他的负极容器大小会改变， 那么我们会对副容器的宽度进行一个监听，当副容器的尺寸发生变化的时候，那么我们这个图表也会调用自身的蕊刹的方法，比如说我们在切换推爆的时候，就副容器从历史普林那到它显示这个过程，大家有没有什么更好的方案？欢迎评论区留言探讨。

今天我们一起来学习一下如何利用时间轴动态展示柱状图信息。接下来通过代码看一下该功能是如何实现的。 option 对象分别通过 base option 和 option 进行设定。 bass option 关联基础配置项 option 使用于 timeline 的 option 数组，数组的每一项是一个 e truss option。 我们先来看一下被 sup 选的设定，第一个是 timeline 及时间轴对象。 exist type 属性设定轴为类目轴 auto play 属性设定轴自动播放 play interval 属性设定轴的播放速度。 揭下属性设定轴关联的数据，也可以通过相关属性 修改样式。新波属性设定时间轴的样式。新波赛属性设定标记样式的大小。 内部对象设定着的文本标签。 风儿名特属性设定刻度标签的内容格式器。 great 位象，设定直角坐标系内的绘图网格。 great 图一项设定直角坐标系内的绘图网格。靠谱的 bottom 属性分别设定离容器的上侧和下侧的距离。 设定 x 轴为雷木轴 x slap 对象的 interval 属性，强制显示所有标签 dat 属性设定关联的数据，其中斜杠按表示换行展示数据。 设定外轴为竖直轴，设定图表对象为柱状图。 我们再来看一下 option 对象， option 速阻内关联 timeland option 信息，其中包含 title 和 series the data 属性设定。 谢谢您的观看，如果感觉该视频对您有帮助的话，记得点击关注和一键三联，您的支持就是我坚持的最大动力，我们下一个视频再见。

刚才在前面给大家讲的过程中呢，对于我们的整个结构啊，应该说已经了解了，是不是啊，有同学说刚刚到啊， 好，如果是有些小伙伴刚刚进入到我们的直播间呢，我跟大家也说一下，因为我现在已经讲到了我们具体的这个布局结构了， 对于我们的项目如何构建，包括刚才给大家提到的这个 datav， 他的引入，还有呢就是我们在里面如何去安装等等等等。 如果这一块啊，还没有获取到文档的小伙伴，可以直接的添加一下 app， 老师赶紧赶紧的把这个文档呢先获取，哎，避免就是那个错过啊，再就是呢，我今天给大家写到的原码哎，包括你们刚看到的素材啊，这些呢都是可以免费给大家分享的，所以有些小 小伙伴如果需要过期不候啊，如果需要的话，你们直接的添加一下 app， 老师一会留言，课后我会在第一时间打包，完了以后直接找那个 apple 老师呢获取一下。所以还没有添加 apple 老师的小伙伴呢，直接的扫描一下我屏幕展示的二维码，赶紧赶紧的加一下，五秒钟，哎，五秒钟的时间啊， 好行啊，哎，刚才说到这块呢，我就继续了啊，特别是刚刚进入到直播间的小伙伴，好，那咱们呢继续给大家往后面去说，嗯， 好，刚才给大家说到这块呀，我们再一次回过头来，你会发现直接这样展示呢，那不太可取对不对？ 我们要我先给大家这样吧，我慢慢的给大家聊一聊，如果我们现在是一行分成两等份，哎，像这种的话，一般我们怎么做？你看我们现在不是要给大家实现相关大屏吗？好，我，我这块 慢点说一下，假设我们现在是这样的啊，你在里面，哎，一行展示那个两个啊，我们要两个，平均有同事这个怎么做？这个的话可能有些小伙伴会觉得直接用到百分比各占百分之五十，这样不就行了吗？ 如果一排展示两个，知道了，那一排展示三个四个，他不一样吗？我来给大家写一写，如果我们通过弹性布局啊，他的处理方式是什么样的？好，刚才给大家写的这块呢，了解了以后我们先放在这，我们先来看一下。一，哎，别说一行呢，展示两等份， 首先在里面跟他写的时候啊，我添加一个样式文件，这个样式文件呢专门针对于我们的弹性布局，那同样进入到我们的 css 里面来。好，我想一下这一方给大家写一个什么样的名字呢啊？比如说 my more box， 好，我这样写啊， 我这方写了一个模块盒子啊，那首先在里面我要添加的是我们的爱 flags 布局，弹性布局。那么在给大家一会布局的过程中，我们里面呢针对于这个对齐的方式啊，有很多，比如说两端对齐，起点对齐，什么终点， 什么居中等等等等。好，行，这一块呢，我跟大家也一样的写进来，我现在给大家写到的这一块呢，相当于就是起点对齐， 我们在里面呢，哎，好，等一下啊，这一块还那个，哎，好，我现在给大家写啊，这个呢，有一个叫什么叫两端对齐啊？我来先把这个呢给大家写进来，两端对齐呢，是他着好，这个我跟他后面也注视一次啊， 这个代表的是什么？两端对齐，其实就跟你平时写文字一样吗？对不对？好，给大家写进来，两端对齐。有同学说两端对齐的特点是什么？ 他的特点就是万一你现在要是没有那么多一个在这，哎，一个比如说在这哎，还有的呢，就是哎，像这种哎，就是假设我们没有满足的话，以什么样的方式去对齐啊？好，我刚给大家写到的是两端对齐，先把这个呢添加进来， 对齐完了以后，如果说我还希望在里面去添加一些什么间距啊之类的啊，咱们这个呢都可以给大家写进来。当然有同学说这个 px 单位要不要变更为 r e m， 其实这个呢也可以根据情况来，只是说 r e m 呢，要计算相对比较麻烦一点点。 好，行，我们把它添加进来以后，那么大屏整个展示的盒子呢，我们就可以写了，我在里面给大家啊，你看，先给大家这样写啊，好，行，我先把这块先给大家，把那个大的盒子我们先追加一个啊，那后面我们就哎按这个来，直接的往里面去嵌套， 先把这个盒子呢添加，添加完了以后，你想一下，一行要分为有两个，是不是我们在这个盒子里面，我一排要展示有两个的话，你看他的这个写法又怎么样？写，首先在里面添加哎，比如第一个 div， 那么第一个 div 里面呢，我们先把刚才给大家写到的这些添加进来，那么具体的宽度和高度宽度呢？我们可以直接的通过百分百的方式，高度你可以定一啊，比如说两百、三百，这个呢看你自己。 那么再就是添加进来以后，好这个地方我就直接跟他把这个样式写进来，我现在没有跟大家在那个克拉斯里面去写，我们要通过什么样的方式呢？ flex 里面有一个这个啊，非常重要，零一爱百分之五十，这个呢我们可以简单的理解为 相当于就是进行这种比例，哎，拆分的，如果你写百分之五十的话，就是二分之一，如果你写百分之二十五，那就占四分之一，明白没？所以以后搭载进行等比例分配的时候，我们用这种方式呢，是非常方便的。 好，行，刚才给大家写到第一个呢，写到我们的第二个上面这几个呢我就先给大家删掉了啊，我们先不要，那保留完 他呢，相当于我们现在实现的就是一行等比例有两个，是不是？你看等比例就写了两个。 再就是呢，给大家写完以后啊，我建议大家也可以通过我们的浏览器，你看我来把这个大小呢给大家变换一次啊。那在我们不断变化的过程中，你看我们现在展示出通过百分比，他绝对不会说出现滚动条或者等等其他的，所以我们要先把 他呢等比例的展示好。好，这个呢是刚给大家说到的啊，一排呢，展示了有两个，那如果有同学说我一排要展示有三个四个呢，你看我们来写一个，你这个时候直接把它变更为百分之多少二十五，是不是？好再来一次啊？你看刚给大家写到这块，哎，二十五出来 完了以后，我在里面要写到的是一呀，比如二啊，哎，三呀，对不对？好，行，把这个也跟大家一样的变换过来啊，那三二一变完了以后，你会发现一二三四出来没出来了，而且刚跟大家写到的这个一二三四啊，我们还会发现 它里面的这个哎，就是会随着我们的大小变化呢去变化，而且呢还有一个最最最核心的点是什么？他是一个完全等比例去那个进行拆分的，哎，我给他放小一点，你看这一二三四 来了吧。好，那给大家写到这块肯定有图还会提啊，我现在是这样的，我第一个百分之二十，我第二个呢，百分之五十，那你就把第三个给那个删了呗，所以这一块他非常的灵活， 你想要怎么样去写都可以的，那他百分之二十五，五十、二十五，当然你要是说三十啊，四十啊，还有那个三十也可以，或者完全不按等比例想怎么分都可行的。 好，我再给大家说到这块呢，我们对于这个结构，你看我们现在展示的是不是一排有几个哎，先把它区分，先把这个大的模子呢，先给大家搭出来，刚才提到的 一行等分成，比如两个或者 n 个处理的方式啊，大家一定要记得好，行，刚才说到的这块这个意思明白没有？同学提到说零 呀，一啊代表的是什么？简单说一下，有些小伙伴这块你们可以自己去查一下，他们代表的是我们项目，比如说放大的比例，还有第二个呢，是缩小的比例，放大的比例呢，默认为零，缩小的比例默认为一， 后面的这个数呢，相当于就是我们具体的这个长度的值三个啊，明白没？好，行，这个呢是刚给大家写到，哎，我们的一个占比， 但是我现在的需求又有一点不同啊，你看我们现在一行这样写还蛮容易的啊。那有同学你要像这样写的话，那就简单了，你看我们再来给大家多写几个啊，好，模块一，哎，模块二，你看我这个时候瞬间会让他变得有很多，哎，是不是？你看这种感觉出来了没？ 完了以后，比如你现在一二三三二一全都用到我们刚看到的不同的这个边框那里面边框这么多，七 一呀，六啊，那五啊，是吧，一大堆，把它全部改变一下就可以，但是我中间这一块我还要合并成一个大的呀，你看我们一般用的比较多的，是不是像这种 可能左边哎三个或者右边两个，或者哎中间有几个，那像这种一行有几个？同时我们中间还有合并的啊，他的这个处理思路又是什么样的呢？好，我们同样来给大家说。刚才写到这块呀，应该思路相对已经比较清晰了，反正在里面的不断追加， 但是我现在呢是希望一排有多个，所以说如果我们是两行，要进行两等分啊，他的处理思路是什么样的呢？来给大家写一写。 现在你看，比如我这个时候写了一个，对不对？好，你看我们来写，我要对他进行多等分，你直接在里面。好， 这个时候添加一个进来，哎，我们直接再往里面写好，中间这个我只写了一个。好，完了以后我再把上面这个呢，哎，在它里面呢再添加一个进来看，好，我现在的这个处理我们可以很清晰的看到。好，你看我同样页面给大家刷新一次啊， 哎，好，你看当前这个地方啊，这个呢？哎，我们就不再是两百了，你看他的这个应该展示的是多少啊？你看当前给大家说到这块他展示的应该是多少？他应该为四百， 是不是他的高是不是应该为四百？来，我们看一下出来效果没有，那左边一个两个，这边一个两个，中间的话就是四百， 下面这一块呢，你看你要怎么样展示？哎，你说你现在不是这样的，我现在是左边的话呢，百分之五十，好，右边的话呢，各占百分之二十五。那像我们刚才写到的基本 就已经可以了，你看大屏展示的这种结构出来没有？所以大家一定要把我们刚才说到的这些结构了解清晰。里面具体写什么这个非常重要， 但是呢，你最开始在进行布局结构的时候一定要把它弄好，你不要等到最后以后啊再往里面去加什么，那这个样式写起来就非常吃力了，那刚给大家说到的这块这个意思能理解不？ 选择好你需要的一些哎，那种好看的一些边框，你看边框这里面特别多啊，哎呀，很多很多，像刚给大家介绍到的这像这样的呀，还有酒啊， 十啊，哎或十一啊，对不对？好像我们刚给大家说到的这一块，你全都可以变跟啊，好，我来给大家里面变一个啊，比如说他呢是九，哎，我把这几个跟大家都写一下啊，好，一二，好，这个八啊，这个比如说我们写一个 十，哎，全部都变更为不一样。好，下面呢，我也跟大家写几个啊，好，那个，哎，八，好，这个呢？我们也来一个啊，好，来一个九， 有八呀，九，对吧？好，这个我就直接跟大家写个十啊，哎，前后要一样的。好吧，这个我也跟大家填充满啊，八九十，是不是？ 哎，其实这个时候你们会发现代码量呢，也没有太多，那整个结构是不是都变了？哎，你看现在你需要一个什么样的样子呢？在里面咱们都可以选择。好，我同样问一下大家，这块这个意思清晰了没有？想怎么改变都行啊，这你看是不是已经出来了， 结构出来咱们就好写了呀。那有同学说我后面万一我这方不是这么多呢，我还要在它里面再加一个呢，哎，你看像刚才给大家说到的，你还要再加，那也可以呀，你就直接的在它里面再给添加 一个，是不是？好？行，我来跟他把这个写啊。比如我们这个时候是十，你直接再往他里面呢加一个，但这个时候他就高度就变了，他应该是多少？他就是六百。你如果说这一块好，我现在只加两个，我每一个呢各占多少？占了一个三百，对不对？好， 同样我们写完以后来给大家瞄一下，你看现在是不是出现了一个更加不一样的效果，左边一二三，中间是合并，右边只有两个，下面呢？是这样的， 你再看一下，和我们要实现的结构是不是挺相同的了，哎，后面的具体高度呢？然后根据哎实际的情况我们可以变化。 那你要是像有别的一些结构产生呢？你左边有几个，右边几个，下面还要放，那你继续往里面放呗，这个也没有影响，是不是好。行啊，刚才说的这块这个意思明白吧？ 有听说高度写死啊，高度写死的目的是什么呢？因为它的宽度是会随着这个变化而变化。好，你看我们刚才把这块写完了以后，我们来拉给大家看一下，它相当于是快高度固定吗？宽度不定， 为什么要定高呢？如果你开发的这个大屏展示中完全没有规律啊，这个高度你也可以不用写，你比如说，哎，根据这个宽度去适应， 但如果我们希望他比较有规律的话，定了高度会更加容易去掌控。好，你看，我现在给大家写了，哎，我们的这个终端在不断变化的时候，你会发现他的这个展示呢， 可不可以？他是可以的，是不是？好，现在啊，这一块你要变更为什么样子？是不是已经比较清晰了啊？那我们把大屏展示的这个大的啊，哎，一个布局呢，给大家写进来，那 接下来我就要在里面干什么？我们在里面就要开始去添加，比如一些装饰，哎，你看中什么样的装饰了啊？把这些装饰能添加进来。好，第二个呢，比较核心的就是我们要在里面加图表， 这个 datav 呢，他的图表啊，虽然说也有，但是并不多元化，它里面包含了我们看到的这种啊，就是比如说 啊，应该说，哎，像种油量表啊，对不对？哎，还有一些环形图啊，还有呢就是胶囊图，也就我们提到的柱状图，还有就是水位图， 还有这种飞线图。好，我大概打开几个，大家看一下啊，还有呢，在里面还有什么啊？这像这种啊，就是，哎，这种锥形柱图啊，还有的话里面有包含什么轮波呀，哎，像这种轮波还有一些什么，哎，排名的，哎，像这样一些图，你要 不要觉得说有需要的啊？直接用，那如果它里面有些没有满足呢？其实它里面的底层原理啊，还是我们的一恰和我们的一恰呢，是息息相关， 哎，很多很多小伙伴呢，也会结合于一下来，我们到时候给大家聊的时候也会结合你，比如现在你看到的像这样的图，哎，还有一些其他的，比如像这种图表 啊，我们都是借助于这个一下来给大家说啊，其中有一些呢，你也可以用到这个 datav 里面的。好，我们来随便给大家倒一个啊，先从第一个 胶囊，哎，我们这个柱状图呢，先给大家导入进来，我们来看他应该怎么做啊？好，刚才给大家说到的模块呢，已经分清晰了，模块分清晰之后，为了避免我们一会再写模块的时候大家分不清啊，我现在在里面呢，给大家注视一下这个呢，我现在还没有给大家添加第一行， 你看我们现在写到的相当于是从第二行开始，第一行我们的标图还没有写，我一会来跟大家写啊，这个标图我们先放一放，那么也就是说我现在跟大家写到的这个呢，是我们的第二行，下面呢是我们的第三行， 注视一定一定要写清晰，要不然到时候内容一旦多，我们分不清了啊，好，这个是我们的第二行。好，下面再给大家写一个啊，这个呢就是我们具体的哎，第三行， 你里面如果说还有很多其他的，是吧？按这个顺序呢，咱们追加进来，那第二行要展示的，第三行展示的， 哎，这个地方我没有跟他把单独的样式踢出来啊，你要踢的话呢，单独踢出去就行。好，行，那接下来我们就要开始把刚给大家看到的容器哎，比如说各种图表容器呢，一一添加了，那这种图表容器 我们在添加的过程中啊，有同学说这一块具体怎么样导入进来，直接的往里面复制粘贴添加进来吗？好，我们先来看一看啊，刚开始跟大家写到的第一个呢，你看我里面的内容固定是这样的，我要把它的内容呢替换成我们刚看到的这个容器，对不对？哎，把它呢 导入进来就行，非常简单，导入进来他的高，他的宽，其实这个宽啊宽度呢，大家记得一般默认情况下，咱们都是百分百不用给他固定的，比如几百几百，一般你都可以用百分百高度呢，你可以固定，那么在它里面我们可以清晰的看到有一个配置像， 只要有这种配置像的，那很明显我们的数据就必须要从我们的 data 里面写好。终于要给大家写到那个咱们的 vivo 了啊，那在我们的这一块具体应该怎么样写呢？好，我们来看一下啊，具体的数 数据信息。好，我们要返回，那么刚才给大家写到的这个数据呢是什么？ comfag 对不对？好，行，我们在里面呢给大家继续添加，哎， comfag 呢是一个典型的对象，那这个对象里面它包含的是什么？ 一定要学会看它里面坑费给的数据，它里面包含的第一个呢是我们的 data 的直，哎，把这个数据要看清晰， 那如果说你现在在里面单纯的只是说有这个数据啊，你看它里面还跟我们提供了很多有单位的， 哎，比如你还可以换颜色的，比如说你在里面还可以加具体的这个数值的，你在里面看中哪一个了，哎，你就把这些呢一个一个给大家添加进来呐，在里面有很多他都提供了不同的数据。好，我们先从第一个开始这个数据的格式，也就是平时我们 在开发的过程中需要后端给你传过来的，一定要记得我们要把他当前的数据格式弄明白，否则后端问，哎，你现在需要的具体数据呢？然后你在里面就可以写了 啊，比如说那个名字啊，哎，具体的值啊，什么样的单位啊，什么样的颜色呀，对不对？我们都可以去定义啊。好，行，刚才给大家说到这块，我们也来瞄一眼啊，你看我们的第一个出来没有？出来了，是不是哦？第一个里面要加载的， 那你第二个，第 n 个要加载，他会发现这个复不复杂，单独的，其实添加进来并不复杂，非常简单， 只要我们把大的结构给大家安排好，这一块呢，你只需要把这个数据呢依次往里面呢追加就行。好，行，刚才给大家说好了，第一个啊，来，我们在里面呢再来给大家添加几个好，比如我这个是要添加的，是 右边，我们一定要分清啊，因为在里面给大家写多了，这这个代表的是我们的啊，应该说左边中间。好，我来跟他把这块的注视也给大家写清晰啊，你看他里面代表的是什么？这个是我们的左，对不对？好，这个呢是哎，中哎，中间部分啊，好， 在下面这一块呢，就是我们的哎，右边部分哎，把它给分，不过我到时候会跟他把这块抽离出去的，因为有些小伙伴发现我们的这个文件越写越庞大， 我在慢慢给大家聊的过程中，我们的代码我也会给大家慢慢的去精简，该哎抽离的，该把它给附用的，我一会都会给大家进行。嗯， 好，行啊，刚才给大家说到这块这个意思听明白没？好，行啊，那听明白了我们就可以继续了。好，再一次强调一下，像刚才有些小伙伴比较纠结高要不要 固定高，如果说你不想固定，可以的，可以不用固定。我现在为什么要给大家固定高呢？是为了让他好看。你比如说我们右边的啊，右边的这块我不想固定高，比如说第一个少，第二个多，你可以不用去固定高，这个不影响。明白没？我们只需要就是宽呢，它是一个百分百， 但是宽啊，那个高固定了以后整体的结构看起来好看，你要没有固定可能就会出现说，哎，超出一点呀，或者怎么怎么样，当然这个的话都可以根据你自己的情况灵活去变更了解。没有好，行啊，那我继续呢，再跟他往后面去说了。嗯， 好，那这个写完了以后，我们把刚才看到的这个数据呢，哎，一样的再给大家添加进来啊。好，这个呢是我们添加的啊，比如说这个数据信息对不对？好，你看我 现在是不是右边又多了一个，你再想一下，每一个都以这样一种方式呢，慢慢的填充进来，哎，我们刚才给大家说到的这块这个膏药发生一下变化啊，因为我每一个都给大家固定了，你看， 虽然是同样一个图表，高不同看起来也是不太一样。那么有同学说，我们当前图表可能还存在数据不一样啊，你比如说你的这个图表的数据呢？哎，我们里面只有单纯的这个值，那我另外一个图表的数据呢？ 有可能里面还有不同的颜色，哎，还有单位对不对？这个时候我们的配置像也 可以不一样，你看我现在在里面添加了一个哎康费个一，那么他呢？针对的是刚才给大家写到的第一个图表，如果你在里面还要写第二个，哎，我们添加一个哎，康费个二，看到没，所以这个配 这只象呢，我们到时候啊是可以对他进行公共和附用的。好，先给大家单独的一个一个写进来啊，附用的话我可能会在明天咱们直播的时候给大家去详细的聊到，哎，像什么组建公共附用啊，哎，传递参数啊，我们今天先把功能给大家实现啊。 好，刚才说到的数据中，我们再来把这个有什么单位呀？哎，有不同颜色呀，哎，我，我现在决定选这个啊。好，我来看一下，选一个啊，选好选哪个？选这个，它里面有具体的数值，我选这个吧，随便你在里面，你想选哪个都行啊。 好，我们把它呢，哎，再一个一个的导入进来，所以要看懂他的这个配置，像其他的我们就好说了啊，这些你都可以根据你自己的情况来去任意调整的。好，你看，我们再来瞄一眼，都是刚 刚才提到的这种柱状图，那右边就是配置了以后的，后面还可以加单位，哎，你要加数值也行。好，这一边呢，是我们没有的。那如果要加数值，刚才给大家看到了吗？里面也写的比较清晰， 你要加数值，他就问到是否显示啊？你说是，那在里面呢，直接把他写入进来。好，我们再来看一眼啊，刚才给大家说到这块，我们再来瞄一眼呢，具体的数值出来没有？两边的数据源不同，是不是这个时候你看到的图表就不太一样了，对不对？好， 这个呢，是我刚跟大家说到，我们在里面呢导入各种各样的一些图表的方法，这些方法呢，希望大家都一定一定要记得啊。好，行，刚才说到这块，我先问一下你们，我们导入的第一个图表是否都已经理解了？嗯，好，这 话我要跟他说一下抉择，同学说比一切好用，哎，也不能说好用，他只是在他的基础上进行了二次封装， 封装完了，哎，就是借助于我们的衣架，但是呢，他也有他不太好用的地方，有同学发现没有，比如说 我们刚才看到的配置像里面没有配置的，那你怎么做呢？你做不了，比如我们刚提到的这个柱状图啊，它的宽呀，对不对？哎，或者说它里面要是有多个呀，哎，包括等等其他的呀， 那像我们的衣架呢，他的配置箱就会更丰富啊，咱们处起那个处理起来更方便，但他就不方便了，他相当于就是固定的模式已经给你写好了，你必须按这个来，哎，要不然的话就咱们就实现不了，如果他有些模块没有去实现的，那你就没有办法去那个完全 的成功运用啊。所以你要是现在看到的这个 ui 啊，和我们以往展示的那个完全不同的话，那这个时候就借助于一恰，有相同的地方，那咱们直接用它就行，对不对？好，行啊，好，对，像刚才有同学提到吗？要改的话，那要命的啊，这个不建议大家去改，嗯， 好，还有就是心想事成，同学说公司一般，其实我再一次强调一下啊，心想事成。同学，这块有一个误区，什么样的误区呢？ 我说我们在给大家实现这个的时候，并不是说你要记得 datav 的作用，他并不是专门的图表，他的作用是干什么？他是大屏，可是画呀， 这个是它的作用，你看它里面包含的这样一些比较炫酷的装饰边框啊，装饰啊，哎，比较闪亮的一些效果呀，这个 才是他的核心。图表能只是说哎附带的去拥有，但是并不是他的这个核心的点，所以我们介入他 目的呢，就是把刚才给大家提到的结构哎，分清了，其他的你看把结构一分清啊，具体的这种那个装饰框给大家添加进来， 其他的图表，你说你要用一恰，可以，你要用嗨恰，你要用，比如说啊记六，哎，都可以的，用什么都行啊。这个呢，包括你要是在里面引入啊各种地图， 他也没有关系，用什么都行，各种三 d 的也一样可以，对不对？直接只要我们的 vivo， 哎，这个框架呢，那个能够兼容都可以的，但是我们借助于他把这个大的一个模块呢，哎，已经构建好了，这样看起来是不是就比较清晰？好，行啊，刚才给大家说到这一块呢，我不知道对于我们导 录的图表，哎，是否理解了。好，如果理解了，我们在里面呢，再来给大家说另外一个啊，图表呢，我就给大家随便的导入几个，到时候你们在里面具体需要什么啊？这个呢，都可以的。嗯， 好，行。那个有同学提到说那个网址是不是好网址的话，我也给大家那个发一次啊，哎，稍微等一下，哎，我看到了我们的李子明同学有发啊。好，如果有些小伙伴没有看明白的话，那可以发一下。嗯， 好。还有同学说到这个边框效果啊，边框效果，我刚才看到的这种全都是它里面默认的。嗯，好，还有一些同学提到说用到多个库可以吗？ 嗯，比如你现在要用到的嗨恰一恰，选一个就行。哎，不要说又嗨恰又一恰，这个有时候可能会存在一些兼容性的问题，这个倒不不太允许，但是 像我们的 datav 呢，他本身那个基于的是一恰，所以这块你导入一恰是最好的选择，明白没？嗯，好，行啊，刚才给大家提到这块呢，我们继续再来写第二个。那写第二个这个是我们的一个水位图， 他的导入方式呢，也一模一样的。好，我简单跟他说一下他这块的一些处理好，我们刚才看到的，哎，我就把它放在我们的中间部分啊，其实， 哎，不过我现在给大家这样说啊，你觉得一个一个导入很简单，但我们在实际开发的过程中你要根据，就是说 导入进来了以后，我们还要根据具体的情况去处理数据啊，不是说你现在在里面随便想写，我想写什么就写什么，想用哪个图表，他要根据我们的这个数据源来决定。有些数据源呢非要通过柱状图，有些呢可能是折线图里面 多的对比，有些呢，比如说要通过这种排行表对不对？还有一些可能要通过地图，哎，要根据情况，但是每一个用我们先要了解好。行，刚才给大家说的过程中 我们的水位图呢，我已经给大家导入进来，那我们继续啊。

今天我们一起来学习一下如何实现动态排序的折线图表功能。可以看到当前图表的折线是一个动态生成的效果，标签信息是动态排序的，没有发生遮挡。 接下来通过代码看一下该功能是如何实现的。当页面初始画之后，在马尔特沟子函数内初始画 e charge 图表对象，设定 e charge 对象的 option 属性为空，也就是创建一个空的图表。 创建完之后，我们通过接口查询图表数据，接口返回的数据通过 operate 的函数进行处理。 函数内部先对分类信息进行初始化，也分别创建了存储过滤后的 数据的对象和折线图对象。利用分类信息进行 phone 一清电力操作，生成对应的数据和折线图。 先出史画数据原 id， 通过 id 关联数据。接下来通过创建过滤配置信息，动态生成图表的折线数据。 id 属性值表示过滤后的数据 id from details 属性关联数据园的 id。 transform 对象进行数据转换配置的设定 type 属性值为 filter， 表示要对数据进行过滤处理。 config 对象，设定过滤条件的配置， 设定营业值大于等于一千九百五十的数据，设定 ctrl 与值等于当前分类信息的条件。 第二步，创建折线图对象，他属性设定为折线图 zgc 与属性关联数据于 id an apple 对象是设定折线端点的标签，从图表中可以看到折线的端点有标签信息展示的标签信息，通过 follow mutter 进行设定。 label layout 对象是标签的统一布局，配置信息，通过该对象可以防止标签信息重叠。 logo relax 属性值为 shift y， 表示发生重叠时在垂直方向依次位移，图表中的标签信息没有发生重叠。 mps 对象设定折线图的高亮状态，当鼠标放到折线图上时，其他折线隐藏 后的对象设定数据编码情况，分别设置，比尔数据映射到 x 轴，应抗数据映射到 y 轴。最后看一下图表的配置，像设定 animation duration 属性，表示图表的初始动画的时长，数值修改为一千时。看一下效果， 可以看到折线的动态效果的时间变短了。 dates 在对象关联折线的数据源，第一个是初始数据源，第二个表示利用过滤数据配置项得到过滤后的数据。 siri 属性关联上面生成的折线图对象。最后把 option 添加到图表中。谢谢您的观看。如果感觉该视频对您有帮助的话，记得点击关注和一键三联，您的支持就是我坚持的最大动力，我们下一个视频再见。

今天我们一起来学习一下如何利用 china 点 gs 实现地图功能。可以看到南沙群岛是通过缩略图的形式进行展示，接下来通过代码看一下该功能是如何实现的。第一步，取消利用 register map 注册地图的形式 引入 china 点 js。 接下来看一下 js 数据文件是如何获取的。找到 hrx 的 guitar 工程， 在 test 文件夹下的卖文件夹内有对印 js 文件，其中 props 文件夹下存储着省市地图，由于地图叫老，不建议使用。最后看一下地图图表的配置信息是如何设定的省市地图还是通过注册地图实现 option 配置信息内通过具有地理坐标组建关联中国地图 map 属性的 china 地图名一定要小写 label 对象设定图形上的文本标签 items style， 对象设定地图区域的多边形样式。 其中地图切换过程还是通过 register map 函数实时注册地图信息， 最终实现地图区域之间动态切换。谢谢您的观看，如果感觉该视频对您有帮助的话，记得点击关注和一键三联，您的支持就是我坚持的最大动力，我们下一个视频再见！

今天我们一起来学习一下如何实现地图展示以及区域下钻和返回操作。点击可以进入省份地图， 在任意空白区域通过点击可以返回上层地图。接下来通过代码看一下该功能是如何实现的。第一步，利用 e charge the register map 函数注册地图信息。 第一个参数是注册地图的名称。第二个参数关联地图数据，数据格式遵循具有智能格式， 地图数据来源于 data v 地理小工具，复制或下载即可获取数据。第二步，进行地图图表的设定，利用猜透对象设定图表的标题 向内 happ 属性设定为 map。 map 属性通过地图名关联之前注册的地图信息。 items style 对象设定区域多边形图形样式。 shadow color 属性设定阴影颜色。 shadow blur 属性设定阴影模糊大小。 shadow of setex 和 y 分别表示水平和垂直方向的天意距离。 第三步，地图区域绑定，点击事件。如果点击区域为山东省，则进行区域下钻操作。 map 属性关联山东地图名，点击山东地图区域可以下钻展示。 第四步，空白区域绑定，点击事件，实现返回上一层地图， 如果点击为非空区域，则直接退出。获取当前空白区域的上层地图信息，通过 ctrl 选函数设定并渲染上层地图，其中上层地图是在下端操作时存储的。 谢谢您的观看，如果感觉该视频对您有帮助的话，记得点击关注和一键三联，您的支持就是我坚持的最大动力，我们下一个视频再见。

今天我们一起来学习一下如何在散点图表中实现十字作标轴效果。第一步，在 xxx 对象内通过 xx line de ons zero 属性设定 x 轴的轴线，在歪轴的零刻度上， y 轴的 yx 对象也通过 xsline 内的 once zero 属性设定 y 轴的轴线，在 x 轴的零刻度上，最终实现十字做标轴效果。第二步， toyota 组建，以 series 对象进行关联，其中利用 position 属性设定提示框浮动展示位置。 series 对象内利用 tag 属性设定图表为散点图。 encode 对象与 toadtip 组建进行关联，而 encode 对象内的 toadtip 属性通过关联数据维度在 toadtape 组建上进行展示。新 boss size 属性设 定标记点的大小， items style 对象内的 border color 属性设定图形的描边颜色，这就是最终的效果了。最后我们修改一下 monster 的手，径直看一下做标轴的变化效果。从图表中我们可以看到做标轴的展示位置发生变化。 谢谢您的观看，如果感觉该视频对您有帮助的话，记得点击关注和一键三联，我们下一个视频再见。

今天我们一起来学习一下如何实现图表数据的下沉操作。数据下沉之后，可以通过点击返回上层按钮返回到顶层图表。接下来通过代码看一下该功能是如何实现的。 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 绑定点击事件初始化上层数据。 谢谢您的观看，如果感觉该视频对您有帮助的话，记得点击关注和一键三联，您的支持就是我坚持的最大动力，我们下一个视频再见。

今天我们一起来学习一下如何实现基础散点图表效果。接下来通过代码看一下散点图效果是如何实现的。 xxs 对象 设定 x 轴的配置信息。 name 属性设定 x 轴的名称。 x labour 设定 x 轴的标签。而 found six 属性设定 x 轴的标签。文本大小。 y 轴的配置 基本与 x 轴的配置信息类似。 series 对向内通过 type 属性设定图表为 character， 为散点图。 simple 属性设定散点图的标记图形样式。当前设定属性值为 rong， rack 为原交举行看一下实际效果。接下来修改图形值为 circle， 看一下样式变化。图表中标记点刷新为圆形效果。而新 boss x 属性设定标记图形的大 小。接看属性关联散点图的图表数据分别对应 x 轴和 y 轴。谢谢您的观看，如果感觉该视频对您有帮助的话，记得点击关注和一键三联，您的支持就是我坚持的最大动力，我们下一个视频再见！

ok， 那么在 v o 里面呢，一个很重要的质量就是微杠 boss 的循环， 我们在学 c 下巴的时候，他的 c 圆的时候有 y o 循环， d y o 循环，错循环， v 型循环是吧？好，那这儿的话呢，直接就是一个微钢锁指令 用来做这个循环，所以说呢，我们大家需要注意啊，哎，用循环就用它，哎，那必然这家伙是非常重要的是吧？他没有说是我来一个微杠外号循环，微杠毒外号循环是不是就一个微杠破子灵 好，格式是什么呢？格式是这样啊，需要以赛子因赛子的形式好吧，赛子因赛子的形式这种语法格式，赛子呢是输 语言数数，然后这个的话呢是数据元素叠代的这个名字啊，叠代的名字。好了，那我们呢还是通过画图我先给你们画出来啊。 ok， 那么大家学编程语言啊，学了这么多了，那你应该知道啊，有外奥循环，哎，你跑哪去了？你看不听话是吧？外奥循环啊，还有一个什么， 哎呀，度外要循环是吧？啥区别啊？有人说没区别啊，没区别，那你就坑自己了是吧？还是有区别的，就是度外要循环是不是最少执行一次啊？还是扩循 好，还有什么？还有这个佛一体啊，就这种循环是吧？那实际上我们在这这种微破循环呢，他对应了这个循环啊，他对应的就是下面这一块，就是这个 就是他啊，啊，这种叫做迭代循环， 携带便利啊，小便利宝们称之为便利啊。好，那有的也叫做破，什么破冒号啊，破印，这种循环啊，每个语言 不太一样，什么意思呢？比如说啊，我们在这，我们在这啊，有一组这个数，这是一个 一个，然后这是一个，哎，这一个竖着是吧，我们画出来好了，整个这一堆呢整个这一堆啊，这个名字，哎，我们给他起一个这个竖着啊，要集合吗？竖着好， 叫艾萨姆兹啊，叫艾萨姆兹，那么我们来取，知道什么是怎么取呢？怎么取啊？逐个取是吧？逐个取哎，取完一个之后再取一个，再取一个，再取一个，再取一个。好，那 每一个指向我们可以称之为一个 iphone。 好吧，就是这种格式。好了，那么你理解了这种格式之后就非常简单了。来，老师呢，开始第一个啊， v 杠破零一，好吹吧他， 哎，这个这样啊， a w 数字呢比较简单， u l i d a p p。 有时候老师，哎， 你发现你这时候跟前两次写的不一样，一样了，前两次不是 dnv 吗？是不是，是不是都是 dna 啊？啊，那你这时候怎么变成了一个这个呢？ u l l y 呢？可以啊，这个也可以使用。 好吧，好，不用着急。那接下来呢写这个处理部分， ok， 仍然呢是赖的 vm 等于六六。好，好， 首先呢我们在这设置一个挂载点，设置完了是吧？设置完之后啊，我把它讲完，好吧，设置完之后我们现在呢要来这里面来显示数据，好吧， 显示数据格式是什么呢？注意啊，大家看到这个 v 杠什么啊？ v 杠，呃，扮演的也好， v 杠杠也好扮演的 啊，然后这个按，然后这个放纸，他不在哪写，是不是都在这个属性里面写啊，是不是好，都在这写，同样这也是啊，微钢错啊啊，微钢错，怎么写呢？ ip 字母啊，印埃特姆兹，按照这个格式来写，但是呢大家看一下，老师这样说，是不是变了一个数字啊？是不是好变为数字是多少呢？变为，比如说变为数值为十，他把变为数值为十，然后呢，那我这个时候我要输出这里面每一个数字，那么 每一个数字是谁啊？是不是就是艾特母啊？哎，就是这个艾特母，然后呢？发光，发光艾特母。 ok， 然后呢我们来运行一下，看看能不能出来这个啊？出来了没有？ 一到十，是不是出来了呀？好，那就是这就是第一个例子啊，我们来变例数字，大家看一下它的格式啊，非常简单。