源碼解讀：當(dāng)Echarts繪制圖表計(jì)算寬度的時(shí)候，由于初始化圖表設(shè)置為display: none，所以無(wú)法獲取到clientWidth，而 parseInt(stl.width, 10)) 將width: 100%;轉(zhuǎn)為100，所以計(jì)算出的圖表寬度為100px，就變成如上圖那樣的顯示；

問(wèn)題2復(fù)現(xiàn)：

問(wèn)題2原因：

由于開(kāi)發(fā)的后臺(tái)管理系統(tǒng)有側(cè)邊欄收縮功能，使用了Echa的折線(xiàn)圖樣式設(shè)置為width: 100%，但是圖表在初始化時(shí)寬度已經(jīng)繼承父元素的寬度，我們?cè)俅胃淖兏冈貙挾葧r(shí)，并不能讓Echarts的寬度隨著父元素自動(dòng)適應(yīng)。如上圖右側(cè)突出的樣式；

++解決思路：

由于元素display: none無(wú)法獲取到相應(yīng)的寬度，當(dāng)元素變化時(shí)我們可以手動(dòng)的記錄父元素的寬度，或者偵聽(tīng)display屬性，然后使用官方文檔中的resize()方法

終極解決方案

其實(shí)解決方案最重要的是偵聽(tīng)元素的變化同時(shí)更多的節(jié)省性能的開(kāi)銷(xiāo)，這里推薦大家一個(gè)用來(lái)偵聽(tīng)元素變化的開(kāi)源插件：element-resize-detector

該插件針對(duì)元素的優(yōu)化的跨瀏覽器調(diào)整大小偵聽(tīng)器。速度是相關(guān)方法的37倍，參閱文檔(插件支持IE8及以上)

插件原理將對(duì)象元素注入到目標(biāo)元素中，設(shè)置特殊樣式列表以將其從視圖中隱藏，并監(jiān)視其大小以進(jìn)行調(diào)整–當(dāng)目標(biāo)元素父級(jí)被調(diào)整大小時(shí)，它會(huì)觸發(fā)警報(bào)。腳本提供的第一種方法是addResizeListener，它管理所有偵聽(tīng)器并使用注入的object元素監(jiān)視元素的大小。另一種方法是removeResizeListener，它可以確保在刪除監(jiān)聽(tīng)器時(shí)將它們正確分離。

API:listenTo(element，listener)

// 用法示例

erd.listenTo(document.getElementById("test"), function(element) {

var width = element.offsetWidth;

var height = element.offsetHeight;

console.log("Size: " + width + "x" + height);

});

插件的更多用途：

調(diào)整大小的Web組件UI開(kāi)發(fā)

基于元素的響應(yīng)式設(shè)計(jì)

基于大小的內(nèi)容加載

你可以想象的任何東西！

Vue中使用方法：

首先通過(guò)npm安裝該插件 ：

npm install element-resize-detector

在Vue中引入插件使用：

// 此方法博主親身測(cè)試，可以完美解決，并已經(jīng)投入項(xiàng)目實(shí)際使用

import elementResize from ‘element-resize-detector‘ // 尺寸監(jiān)聽(tīng)組件

export default {

mounted() {

var mainChart = document.getElementById(‘main‘)

this.charts = echarts.init(mainChart) // 圖標(biāo)ID初始化

// 初始化element-resize-detector組件

var elementResize = elementResize({

strategy: ‘scroll‘, //

callOnAdd: true // 添加偵聽(tīng)器時(shí)是否應(yīng)調(diào)用,默認(rèn)true

})

elementResize.listenTo(mainChart, function(element) {

echarts.init(mainChart).resize() // 當(dāng)元素尺寸發(fā)生改變是會(huì)觸發(fā)此事件，刷新圖表

});

}

}

通過(guò)以上簡(jiǎn)單的兩步，你就可以看到成果，Vue會(huì)實(shí)時(shí)監(jiān)聽(tīng)元素寬度的變化，Echarts會(huì)通過(guò)resize()的方法自動(dòng)刷新,頭疼的問(wèn)題就迎刃而解了！

如果大家有任何疑問(wèn)即可留言反饋，會(huì)在第一時(shí)間回復(fù)反饋，謝謝大家！

本人使用GSAP框架搭建的個(gè)人網(wǎng)站也上線(xiàn)啦！有興趣可以訪(fǎng)問(wèn)?zhaohongcheng.com?查看，感謝~

本人uni-app影視項(xiàng)目已經(jīng)重磅開(kāi)源，一套代碼套發(fā)布到H5、APP、小程序等多個(gè)平臺(tái)！有興趣可以訪(fǎng)問(wèn)Dcloud官方插件市場(chǎng)https://ext.dcloud.net.cn/plugin?id=1839?查看，感謝~

總結(jié)

以上是生活随笔為你收集整理的vue图片宽高自适应_Echarts图标宽度变成100px，让图表宽度随着父元素自动适应，Vue实时监听宽度的变化，这可能是史上最好的解决方案！...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。