關於Echart自適應的問題

2021-10-03 19:22:40 字數 867 閱讀 1340

echart官方提供了一套**查詢功能,可以在不同裝置上設定不同的樣式,自適應圖表,但是第一次使用卻發現無論怎麼放大縮小圖表都沒有任何變化,結果重新整理網頁之後才會生效,但是這很顯然是不符合要求的,後來查詢資源發現是使用window,resize可以監聽視窗大小,確實可以用,但是僅限於單個圖表,如果**中使用了多個圖表容器只有最後乙個生效。

後來發現這種可以完美解決多圖表自適應的問題

// 多圖表

this

.echarts.piechart1 = echarts.

init

(document.

getelementbyid

('piechart1'))

;this

.echarts.piechart2 = echarts.

init

(document.

getelementbyid

('piechart2'))

;this

.echarts.piechart1.

setoption

(this

.echarts.pie1option)

;this

.echarts.piechart2.

setoption

(this

.echarts.pie2option)

;let that =

this

window.

addeventlistener

("resize",(

)=>);

window.

addeventlistener

("resize",(

)=>

);

vue中echart寬度自適應

首先根據echart的官網完成圖表的繪製 需要在mounted鉤子函式中加入乙個window.onresize 即可 此為乙個圖表的解決辦法,僅為個人記錄 日期 span class click drawline change1 近一周 button class click drawline2 ch...

關於頁面自適應的問題

關於頁面自適應的問題 1.static 靜態布局就是傳統的 形式 對於pc設計乙個居中布局,視窗縮小時,內容被遮擋,呈現橫豎向滾動條。對於移動裝置,單獨建立乙個m.網域名稱及相應的移動 2.adaptive 自適應布局 adaptive 的特點是分別為不同的螢幕解析度定義布局。布局切換時頁面元素發生...

echart 自適應寬度兩種方法

1.乙個頁面多個圖表的自適應寬度可以用 注意 應寫在多個圖表的後面,不能乙個乙個寫,會發生錯誤 根據視窗的大小變 表 window.onresize function 2.若是乙個頁面的多個圖表需要分別監聽改變寬度的話用 可以乙個乙個寫 window.addeventlistener resize ...