前提:
最近做一个项目,项目中存在左侧树和导航屑的收起和展开功能,发现当左侧树和导航屑收起时,如果页面存在eachrts图表的话,图表不会进行重绘,导致页面展示效果不好。
已经给echarts写了监听事件,但是是针对window的,页面内容的缩放不会进入window的监听
window.addEventListener('resize', () => {
myChart.resize()
})
追根到底,是因为echarts图表的容器大小进行了变化,所以我们需要去监听dom的变化
解决方案:
我们可以使用 element-resize-detector 插件来实现,简单粗暴。具体过程如下:
1. 安装相关插件,npm install element-resize-detector
2. 在main.js中引入依赖,并挂在vue原型链上:
import ElementResizeDetectorMaker from 'element-resize-detector'
Vue.prototype.$erd = ElementResizeDetectorMaker()
3、在界面中使用_this.$erd.listenTo()去做监听,示例代码如下:
// lineChart-自定义echarts方法
const chart = this.$refs.barChart1
if (chart) {
if (data.length > 0) {
const myChart = this.$echarts.init(chart)
myChart.setOption(
lineChart(xData, dataSeries, params)
)
window.addEventListener('resize', () => {
myChart.resize()
})
// 监测dom元素
this.$erd.listenTo(this.$refs.barChart1, element => {
this.$nextTick(() => {
myChart.resize()
})
})
} else {
this.layout.chartNoData(chart)
}
}
监听echarts图表 元素本身的dom元素变化,让echarts图表重新绘制就好了