最近比较跳跃，mybatis 想看但是实在没有实际案例看着看着就睡着了。 做了点前端的东西，在已经写好一个项目中新增一个展示界面。我去做的是前段，负责将数据给显示出来。
首先介绍一下这个前端是一年内的某个老哥写的，已跑路，所以才需要我去写一下。不过还好是在原来已经有的基础上进行的模仿书写，而且相对而言还少些了一些功能，不需要点进去给他展示具体信息，看表就完事了。
接下来介绍一下写的过程。首先是需要学习一下vue的使用，以前没有写vue，直接html找个模板用ajax 传值就完事了。这次需要自己利用vue进行书写，首先是去学习了一波vue，学习的结果是似懂非懂，感觉和以前写的区别不是很大，就是先设计然后再填充值，不过这个设计的template的代码量的感觉是减少的很明显，少了很多层次的代码。其次在最后还会有一个style，定义了一些风格类型。这部分由于我是直接粘贴别人的然后稍加改动，所以写法方法没有太多了了解。于是vue的基础学习差不多就到这儿了。
学完这些，这次页面就是需要去书写script部分了，这部分是灵魂，因为图没有数据等于白做，数据要在这里处理，这里自己犯了第一个的错误，困扰了自己一整天。这个问题是因为自己一段段代码粘贴，其中有一个层级粘贴错了。粘贴错的函数是 vue的mount和其下一个函数，都放在了init函数下面，导致在mount中调用init始终无法成功，最终是自己一行行对照代码解决的（当时自己还不知道vscode 缩放的功能 由于实在有点小，也是用的不多导致了这个事情的发生） 解决了这个问题后界面终于有点东西了。
写到这里好像忘记了说如何成功访问到页面的，因为vue的路由方式发生了改变，以往的静态文件写了就可以访问到，但是在vue中不行，必须要添加路由才可以访问。路由添加也分两部分，先自己手写，然后写道函数里面，不过这样也挺好，可以很好的调整页面，并且路由是分级的，公共级别的组件，路由的等级高一些就可以一直悬浮，这点可针不戳。
接下来就是要画图了，这里我们借用了echarts来画这个二维图，由于上一位老铁已经打包了echarts所以俺也不需要引入echarts了，直接去echarts 去查看样式然后画图，echarts的使用有点很重要，不要拘泥于他给的格式，我也是在使用中并且百度搜索才发现的，可以在一个图画多个元素，只需要在上面利用{}去新增即可，本次画图的基本是一个坐标系，如果是饼图还没怎么看，柱状图上想要的元素都可以考虑添加，如果元素同名，则使用{}往下加，如果是新的，那就直接放上去就可以渲染出来！好用哦。
图就按照上面的道理进行组合绘制完成，接下来就是传入数据，利用axios传值，这个应该比较简单吧，利用post/get方法请求端口即可。这个需要注意的是将值传入表中需要注意的地方，首先是数组的初始化，向每个表中传入数据都属需要重新初始化的，如果有公用的元素，例如月份这个值，每一个向表中传数据需要您单独传一次。注意到这基本就完成了整个图表的一系列操作。这里需要最后一步，就是将该页面添加到目录中。
这里遇到了很难受的事儿，因为上一位老哥是用的svg绘图，已经弄了很多的图标了，在网上查找，使用svg需要导入多个文件，其中有几个是浏览器才可以解析的字节码文件，无法查看自然无法生产后贴入，因为害怕影响到以前的东西。没办法，自己只能去弄了两个vue自带的图标，如果谁知道怎么在已经有了svg中加可以在下方评论哦。
到这里全过程完成。