页面白板
当插入echarts图表时,不优化打包后可能会出现页面白板
可以在页面销毁之前进行销毁实例
// 页面被销毁之前 - 优化
onBeforeUnmount(()=>{
// 图表被销毁后,调用销毁实例
if(myChart) echarts.init(chartDom)
})
图表设置响应
echarts图表插入后,本身并没有响应功能,可以通过 resize 来设置大小
// 监听一个容器,如果缩小,就用此方法
import { useResizeObserver } from '@vueuse/core'; //图标没有响应化
const el = ref(null)
useResizeObserver(el, (entries) => {
myChart.resize() //设置图表跟着响应化
})
// html部分
<!-- 柱状图部分 --> ref绑定
<div ref="el" id="chart" style="width: 100%;height: 300px;"></div>