害嗨海,我又来了奥!今天有人问了这样一个问题,如果一个页面,有多张图表,每个图表都很高,导致浏览器右边有滚轮。初始化页面的时候,只看得到第一张图表,然后当鼠标往下滚(滚到一定高度),下面的图表才出来,并且是初始化式地动态地出来。嗖的一下,对,就是这个感觉。
这样呢,我们就要使用一个监听window的滚动事件了。上代码
data() {
return {
chart: {},
};
},
methods: {
initChart() {
this.chart = this.$echarts.init(选择到你想要的dom元素);
var option;
option=...(自己粘贴)
this.chart.setOption(option);
},
},
//在mounted里添加监听滚轮滚动事件
mounted() {
//保存this,在下面的函数里,this可不是指Vue Component了
let that = this;
//添加监听事件,监听滚动事件
window.addEventListener("scroll", function () {
//如果滚到高度距离上边大于一个特定值 再初始化这个chart,否则dispose(销毁)这个图表实例(如果不要求上拉销毁实例,可以换成return)
if (document.documentElement.scrollTop > 300) {
that.initChart();
} else {
that.chart.dispose();
}
});
},
这样的话,一开始我们就只能看到上面的,划到下面去再调用初始化(初始化里面发请求获取数据渲染图表)。这样问题就迎刃而解了,还等什么,快去试一试吧!下次见