vue中echart寬度自適應

2021-10-21 00:11:20 字數 1253 閱讀 5350

首先根據echart的官網完成圖表的繪製

需要在mounted鉤子函式中加入乙個window.onresize = ()=> {}即可

此為乙個圖表的解決辦法,僅為個人記錄

日期<

/span>

class

="" @click=

"drawline();change1()"

>近一周<

/button>

class

="" @click=

"drawline2();change2()"

>近兩周<

/button>

"chartdiv"

>

id="mychart"

:style=""/

>

<

/div>

<

/div>

<

/template>

import

*as echarts from

'echarts'

export

default},

mounted()

;})}

, methods:

, tooltip:

: $ '},

grid:

, xaxis:

, yaxis:

, series:[}

},markline:]}

}]} mychart.

setoption

(option)},

drawline2()

, tooltip:

: $ '},

grid:

, xaxis:

, yaxis:

, series:[}

},markline:]}

}]} mychart.

setoption

(option)},

change1()

,change2()

}}<

/script>

h2 .chartdiv

#mychart

span

button

.active

#mychart

<

/style>

echart 自適應寬度兩種方法

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

WebView寬度自適應

webview寬度自適應 用webview元件顯示普通網頁時一般會出現橫向滾動條,這樣會導致頁面檢視起來非常不方便。其實通過設定websettings的屬性可以輕易地解決此問題,不過此設定隱藏的比較深,一般很少人會用到。12 websettings webview.getsettings webse...

寬度自適應布局

自適應布局是一種很常見的布局方式,現將常見的幾種實現方式列下 1 利用float 左右兩div分別左右浮動,不再占用文件流,塊元素div.main自動佔據整行,然後給main新增左右margin分別為左右兩塊元素的寬,如下 left right main 2 利用絕對定位 圖如上 左右兩個div分別...