业务需求:根据屏幕大小,将echart进行适配,同时可以解决首次渲染echart画布大小和刷新时画布大小不统一的问题
1.实现效果如下:
随着屏幕大小,echart画布进行适配
2.主要代码如下:
<div class="echart-card" >
<div class="echart-container">
<div ref="cpuEChart"></div>
</div>
</div>
mounted() {
//一进来需要初始化一下画布大小
this.resizeEcharts()
//屏幕有变化了就需要出发画布适配的方法
window.addEventListener(
'resize',
() => {
this.resizeEcharts()
},
false
)
}
methods:{
//echrt画布宽度初始化及画布适配
resizeEcharts() {
let echartContainer = document.getElementsByClassName('echart-container') //获取echart的dom,这里有四个,每一个都需要做适配
for (let i = 0; i < echartContainer.length; i++) {
echartContainer[i].style.width =
document.querySelector('.echart-card').offsetWidth + 'px'
}
this.cpuEChart.resize() //echart 画布大小更改
},
},
// resize监听销毁,提高性能
beforeDestroy() {
this.cpuEChart.clear()
},