在vue中實(shí)現(xiàn)echarts隨窗體變化

<div id="myChart" :style="{width: '100%', height: '345px'}"></div>
<script> export default {
mounted(){
this.drawLine();
},
methods: {
drawLine(){
var myChartContainer = document.getElementById('myChart'); //用于使chart自適應(yīng)寬度,通過(guò)窗體寬計(jì)算容器高寬
var resizeMyChartContainer = function(){
myChartContainer.style.width=(document.body.clientWidth-75)+'px'
} //設(shè)置容器高寬
resizeMyChartContainer()
// 基于準(zhǔn)備好的dom,初始化echarts實(shí)例
var myChart = this.$echarts.init(myChartContainer)
// 繪制圖表
myChart.setOption({
title: { text: '啟動(dòng)次數(shù)' },
tooltip: {},
xAxis: {
type: 'category',
data: ['2019-02-15', '2019-02-16', '2019-02-17', '2019-02-18', '2019-02-19', '2019-02-20', '2019-02-21']
},
yAxis: {
type:'value'
},
series: [{
type: 'line',
data: [0,0, 0, 7, 0, 0,12],
smooth:true,
symbol: 'circle',
symbolSize: 6,
itemStyle:{
normal:{
color:'#fc8a0f',
lineStyle:{
color:'#ff9c35'
}
}
}
}],
});
window.onresize=function(){
resizeMyChartContainer();
myChart.resize();
}
}
}}</script>
補(bǔ)充知識(shí):echarts 圖表大小隨窗口變動(dòng)而自適應(yīng)變動(dòng)(無(wú)需刷新瀏覽器調(diào)整)
問(wèn)題提出:
使用echars做完圖表之后,需要根據(jù)瀏覽器窗口的縮放做自適應(yīng)效果。

原因分析及解決方案:
echars的圖標(biāo)實(shí)例事實(shí)上并沒(méi)有主動(dòng)的去綁定resize()事件,就是說(shuō)顯示區(qū)域的大小改變內(nèi)部并不知道,當(dāng)你需要去做一些自適應(yīng)的效果的時(shí)候,需要主動(dòng)綁定這個(gè)時(shí)間才能達(dá)到自使用的效果,常見(jiàn)的如window.onresize = myChart.resize()
示例:
var map5 = echarts.init(document.getElementById('map5'));
var option5 = {
backgroundColor: '#def1f9',
color: ['#c23531', '#1875ff'],
title: {
left: 10,
top: 10,
text: 'Bill charts for the past year'
},
// color: ['#1875ff', '#1fe6ab', '#eee119', '#ff3074', '#6f99d9'],
legend: {
top: 30,
right: 30
},
tooltip: {},
xAxis: {type: 'category'},
yAxis: {},
series: [
{type: 'bar'},
{type: 'bar'}
]
}
map5.setOption(option5);
window.onresize = function () {
setTimeout(function () {
map1.resize()
map2.resize()
map3.resize()
map4.resize()
map5.resize()
},10)
}
重點(diǎn):
window.onresize = function () {
map1.resize() ; // 如果有多個(gè)圖標(biāo)變動(dòng),可寫(xiě)多個(gè)
}
以上這篇在vue中實(shí)現(xiàn)echarts隨窗體變化就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue使用echarts實(shí)現(xiàn)水平柱形圖實(shí)例
- 在vue中實(shí)現(xiàn)清除echarts上次保留的數(shù)據(jù)(親測(cè)有效)
- vue 項(xiàng)目引入echarts 添加點(diǎn)擊事件操作
- 在項(xiàng)目vue中使用echarts的操作步驟
- vue中echarts引入中國(guó)地圖的案例
- 關(guān)于vue 結(jié)合原生js 解決echarts resize問(wèn)題
- 在Vue 中實(shí)現(xiàn)循環(huán)渲染多個(gè)相同echarts圖表
- 在vue中使用echarts(折線圖的demo,markline用法)
- 解決Vue + Echarts 使用markLine標(biāo)線(precision精度問(wèn)題)
- 解決echarts vue數(shù)據(jù)更新,視圖不更新問(wèn)題(echarts嵌在vue彈框中)
- 在vue中使用Echarts利用watch做動(dòng)態(tài)數(shù)據(jù)渲染操作
- 完美解決vue 中多個(gè)echarts圖表自適應(yīng)的問(wèn)題
- 在vue中使用Echarts畫(huà)曲線圖的示例
相關(guān)文章
詳解vue配置請(qǐng)求多個(gè)服務(wù)端解決方案
這篇文章主要介紹了詳解vue配置請(qǐng)求多個(gè)服務(wù)端解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
ejsExcel模板在Vue.js項(xiàng)目中的實(shí)際運(yùn)用
這篇文章主要介紹了ejsExcel模板在Vue.js項(xiàng)目中的實(shí)際運(yùn)用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
keep-Alive搭配vue-router實(shí)現(xiàn)緩存頁(yè)面效果的示例代碼
這篇文章主要介紹了keep-Alive搭配vue-router實(shí)現(xiàn)緩存頁(yè)面效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
uni-popup手寫(xiě)菜鳥(niǎo)上門(mén)取件時(shí)間選擇器
這篇文章主要為大家介紹了uni-popup手?jǐn)]了一個(gè)菜鳥(niǎo)上門(mén)取件時(shí)間選擇器,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08
Vue無(wú)法對(duì)iframe進(jìn)行緩存的解決方案
項(xiàng)目采用的若依框架,但系統(tǒng)中會(huì)嵌入大屏、報(bào)表頁(yè)面,是使用iframe來(lái)實(shí)現(xiàn)的,若依框架的菜單管理中提供了緩存功能,是使用keep-alive實(shí)現(xiàn)的,但對(duì)于iframe頁(yè)面并不生效,所以本文介紹了關(guān)于Vue無(wú)法對(duì)iframe進(jìn)行緩存的解決方案記錄,需要的朋友可以參考下2024-12-12
vue2從數(shù)據(jù)變化到視圖變化發(fā)布訂閱模式詳解
這篇文章主要為大家介紹了vue2從數(shù)據(jù)變化到視圖變化發(fā)布訂閱模式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09
ElementUI?復(fù)雜頂部和左側(cè)導(dǎo)航欄實(shí)現(xiàn)示例
本文主要介紹了ElementUI?復(fù)雜頂部和左側(cè)導(dǎo)航欄實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04

