vue中引入echarts渲染問題

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

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

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ù)里自定義一個(gè)statistics()去渲染echarts
2.在mounted鉤子函數(shù)里執(zhí)行this.statistics()
3.請(qǐng)求后臺(tái)接口時(shí)候如果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ù)之后立即使用這個(gè)方法，獲得更新后的dom
如果不使用this.$nextTick() 在切換tab的時(shí)候dom從無到有，該節(jié)點(diǎn)還沒加載，不能獲取，會(huì)報(bào)錯(cuò)

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/54050.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

melody_lql 2019-08-02 16:00 評(píng)論0 收藏0