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 = () => {

this.setChartHeight()

return (() => {

window.screenWidth = document.body.clientWidth

self.screenWidth = window.screenWidth

})()

}

},

watch: {

screenWidth(val) {

this.screenWidth = val;

this.chart.resize()

},

},

methods: {

drawChart() {

this.chart = echarts.init(document.getElementById('chart-ranking'))

this.chart.setOption({

//options配置

})

}

}