? ? ?最近比較跳躍，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中加可以在下方評論哦。

? 到這里全過程完成。

?

總結

以上是生活随笔為你收集整理的VUE+ECHARTS结合使用制作一个图标页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。