vue中引入echarts渲染問題

leiyi 發(fā)布于2019-08-02 15:19 / 3765人閱讀

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

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.總結(jié)

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/54050.html

相關(guān)文章

記一次Vue項目優(yōu)化及思路

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

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

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

nanchen2251 2019-08-23 16:49 評論0 收藏0
手拉手，用Vue開發(fā)動態(tài)刷新Echarts組件

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

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

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

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

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

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