vue中引入echarts渲染問題

leiyi 發布于2019-08-02 15:19 / 3760人閱讀

摘要：在修改數據之后立即使用這個方法，獲得更新后的如果不使用在切換的時候從無到有，該節點還沒加載，不能獲取，會報錯

1.通過以下命令安裝echarts

npm install echarts --save

2.在main.js文件里全局引入echarts

import echarts from "echarts"
Vue.prototype.$echarts = echarts

3.單頁面引用echarts

import echarts from "echarts"

// html代碼
123

4.總結

1.在methods鉤子函數里自定義一個statistics()去渲染echarts
2.在mounted鉤子函數里執行this.statistics()
3.請求后臺接口時候如果echarts圖表所在的dom存在（this.noData = false）放在this.$nextTick(()=> {this.statistics()})里執行，否則（this.noData = true）直接this.statistics()

Vue.nextTick()作用：在下次dom更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲得更新后的dom
如果不使用this.$nextTick() 在切換tab的時候dom從無到有，該節點還沒加載，不能獲取，會報錯

GPU云服務器云服務器 cdn引入vue vue條件渲染中引入的 php中引入文件.

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/54050.html

記一次Vue項目優化及思路

摘要：記錄一個前端項目優化的路程，效果如上圖。第二步優化結果再次運行查看項目打包情況可以看到項目體積已經優化到，中也看不到的蹤影了。本文主要想提供一些優化思路及手段，即如何定位通過，查看頁面加載時間問題，然后再解決這些問題。 showImg(https://segmentfault.com/img/bVbq282?w=381&h=384); 記錄一個前端項目優化的路程，效果如上圖。接下來我...

keithxiaoy 2019-08-02 16:12 評論0 收藏0
記一次Vue項目優化及思路

摘要：記錄一個前端項目優化的路程，效果如上圖。第二步優化結果再次運行查看項目打包情況可以看到項目體積已經優化到，中也看不到的蹤影了。本文主要想提供一些優化思路及手段，即如何定位通過，查看頁面加載時間問題，然后再解決這些問題。 showImg(https://segmentfault.com/img/bVbq282?w=381&h=384); 記錄一個前端項目優化的路程，效果如上圖。接下來我...

nanchen2251 2019-08-23 16:49 評論0 收藏0
手拉手，用Vue開發動態刷新Echarts組件

摘要：靜態組件開發因為被編程思想這篇文章毒害太深，所以筆者開發組件也習慣從基礎到高級逐步迭代。靜態組件要實現的目的很簡單，就是把圖表，渲染到頁面上。實現動態刷新下一步我想大家都知道了，就是定時從后臺拉取數據，然后更新父組件的就好。從幾年前流行的jQuery插件，到現在React和Vue的組件，在業務需求的開發中抽象通用出通用的模塊，一直都是一個對個人技術提高非常有幫助的事情。本文從一個真實...

justCoding 2019-08-22 15:36 評論0 收藏0
vue文件中使用echarts.js的兩種方式

最近工作中需要用到echarts，由于項目是用的vue-cli開發的。在網上搜到vue中合成了vue-echarts，但是不想使用vue中規定好的數據格式，于是就自己做了一個vue項目引用原生echarts的簡單demo，實現過程如下：用了兩種實現方式準備工作 1、安裝echarts依賴控制臺輸入：npm install echarts --save 2、全局引入 main.js中引入 im...

陳江龍 2019-08-23 12:24 評論0 收藏0
vue 項目總結一組件開發的配置和例子

摘要：入口文件，影響全局，作用是引入全局使用的庫公共的樣式和方法設置路由等。項目里總會有一些復用的組件，例如彈出框發送手機驗證碼圖片上傳等，將它們作為通用組件，避免重復工作結構如下可以根據功能模塊建立文件夾，放置本功能會用到的通用組件。上一篇文章 https://segmentfault.com/a/11... 介紹了項目里文件夾的分類和作用，這次主要說明 src 文件夾里具體的文件分類和...

melody_lql 2019-08-02 16:00 評論0 收藏0