echart图表页面缩放大小自适应

码住不放松

已于 2023-01-29 10:02:50 修改

阅读量174

点赞数

文章标签：前端 javascript 开发语言

于 2023-01-10 10:05:22 首次发布

本文链接：https://blog.csdn.net/weixin_53898445/article/details/128624926

版权

<div :class="$style.echart" ref="rectifyRef"></div>

const rectifyRef = ref()
const chartValue = ref()
//创建echart
const rectifyHandle = () => {
  chartValue.value = init(rectifyRef.value)
  chartValue.value.setOption(getRectifyOption(correctList.value))
}

//自适应函数
function chartResize(){
  chartValue.value.resize()
}


onMounted(() => {
  rectifyHandle()
  window.addEventListener('resize', chartResize)
})
onUnmounted(() => {
  window.removeEventListener('resize', chartResize)
})