20 zdppy+vue3+antd+g2plot实现前后端分离的折线图示例

上节课是已经能够通过前段去获取所有的折线图数据了，而这节课去把它渲染出来。

·来到前段里面，首先这里之所以报错是因为data报错了，先把这些事件给删了，因为事件用不着，还有辅助线也删了，辅助线也用不着，label也删了，格式化可以留着。

·然后再看看上面辅助点，其实也可以不要折线，颜色也配不容自理。这里deta应该改成deta点玩的，居然这样。

·去const一个newdata，它等于data点版本，这里使用newdata，这里应该是只能这样，data应该等于data点玩点，就不能用缩写了对不对？

·改成这样之后去看看前端还报不报错，刷新，前端这个图就已经出来了对不对？这个就是歪轴的，格式化可以需要，但是这个样式就不需要默认的样式，其实也挺好看的。

·现在就是这个图已经不报错了，但是数据还不是使用的后端的数据对吧？应该怎么玩？其实可以这样，在露的data的时候把它这样，在这里判断一下if，respond点deta，并且它下面还有个deta，并且它下面有个reroutes，如果有这个就让detail点挽留，就等于reroutes，这样其实就可以了。

·可以了之后这里其实就可以不用了，但是有时候没有加载完毕怎么办？之前学过一个翼步的方法，可以这里弄成sunk翼步的，在这里等加载完毕了再去做渲染。

·现在去试一下，刷新一下，发现数据是拿到了对不对？但是这个图没出来，在这儿打印一下，control点log，这个that点value看它对不对？在这个上面也是console，responderdeta已经打印了。

·现在再来刷新一下，打开app12，会发现叉里面是空的对吧？看问题出在哪？response点deta，点deta下面有个results，看一下是不是名字写错了？response点data，点data下面的results，这样打印一下ctrl点log，查查一，看看能不能拿到results，其实是能拿到的对不对？能拿到的。

·这里面也有year和挽留这两个字段，但是发现这里是改了对不对？这里是改了，这样在这加上一个a wate，要等请求结束了再去做，或者也可以这样，也可以直接return。先加上awat之后再看，加上awat之后发现值就出来了，指南就出来了。

刚才这个问题出就出在actions的请求是一步的，没有等它完成，没有等它执行完毕，就执行到这里了，所以导致最后是空的。这里把这些打印关一下，现在再看，这样就实现了一个叫做前后端分离的折线图的试念。

这节课就先讲到这里，谢谢大家。