echarts 图设置高度_Echarts 自适应宽高 vue

思路

1.将图表包括在一个div中(该div设置了固定的宽高，可为百分比)

2.由于不能直接设置rem进行适配,需要动态计算出'id = chart'的高度

setChartHeight() {

//根据自己需要调节图形大小,我的图形是放在

中

let mainHeight = this.$refs.elBox.offsetHeight

$("#chart").css("height", mainHeight + "px");

}

//在mounted中调用

mounted() {

setTimeout(() => {

this.setChartHeight()

this.$nextTick(() => {

//画图

})

})

注意:如果直接调用不加定时器的话，获取的高度与实际不符，需要加一个定时器，才能获取到正确的高度

3.如果屏幕的宽高改变的话，需要重新加载表格

data() {

return {

screenWidth:document.body.clientWidth,

pie_chart:''

}

}

mounted() {

const self = this

window.onresize = () =