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 ...