主要是监听窗口大小调用echarts提供的resize方法。
<template>
<div class="main">
<div id="pie"></div>
</div>
</template>
data() {
return {
option: {
tooltip: {
trigger: 'item'
},
legend: {
left: 'center',
top: '10'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
top: '25',
data: [
{ value: 1048, name: 'A' },
{ value: 735, name: 'B' },
{ value: 580, name: 'C' },
{ value: 484, name: 'D' },
{ value: 300, name: 'E' },
{ value: 245, name: 'F' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
}
},
mounted() {
this.init()
window.addEventListener('resize', this.handleResize);
},
methods: {
init() {
let chartDom = document.getElementById('pie');
let myChart = echarts.init(chartDom);
this.option && myChart.setOption(this.option);
},
handleResize() {
let chartDom = document.getElementById('pie');
let myChart = echarts.init(chartDom);
// 调用Echarts实例的resize方法,重新绘制图表
myChart.resize()
}
},
beforeDestroy() {
// 在组件销毁前解绑resize事件
window.removeEventListener('resize', this.handleResize);
}
#pie{
width: 100vw ;
height: 100vh;
}