主要是监听窗口大小调用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;
}原文地址:https://blog.csdn.net/aiying_sitan/article/details/130213154
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_40120.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
