vue中使用echarts實現疫情地圖


在今年(2020) 開篇之際,就遭遇了一場新冠疫情的侵襲,在疫情的肆虐下,疫情的狀況就急需實時的了解最新的疫情狀況,看了網上的各個疫情地圖,此前自己也嘗試做個vue疫情地圖。 首先我們先創建一個vue項目 vue-echarts:
一、我們安裝完所需的環境后,在命令行窗口, 運行 vue create vue-echarts 進行創建項目。創建成功后,運行項目
二、接下來 下載 安裝 echarts 地圖
npm install echarts --save 或者 cnpm install echarts --save
三、在頁面中創建一個DOM元素來呈現地圖
四、引入 echarts 和 echarts中的中國地圖
五、然后進行一些 echarts 的選項配置
還有其他更多的配置,可以參考 Echarts 官網: https://echarts.apache.org/zh/index.html
六、在 data 中聲明變量保存 實例化的 echarts 並應用 配置項
效果:
七、接下來就是通過請求動態的獲取 疫情 數據,在這里我是使用 jsonp。 安裝並引入 jsonp
npm install jsonp --save
八、在頁面渲染時調用方法發送請求獲取數據,並在請求成功時,將配置項應用:
最終的成果


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM