思路
1.将图表包括在一个div中(该div设置了固定的宽高，可为百分比)
<div style="height:80%;width:100%" ref="elBox">
<div id="chart" style="width: 100%;"></div>
</div>
2.由于不能直接设置rem进行适配,需要动态计算出'id = chart'的高度
setChartHeight() {
//根据自己需要调节图形大小,我的图形是放在<div class="main">中
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配置
})
}
}
