
使用方法:
1、创建 IntersectionObserver 实例:
var observer = new IntersectionObserver(callback, options);
callback 是一个回调函数,用于处理交叉状态的变化。
options 是一个配置对象,可以设置 root(祖先元素)、rootMargin(边界)、thresholds(阈值)等参数。
2、观察目标元素:observer.observe(target);
3、处理交叉状态变化:
var callback = function(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 处理目标元素进入可视区域的逻辑
} else {
// 处理目标元素离开可视区域的逻辑
}
});
};
4、停止观察:observer.unobserve(target);
mounted () {
await this.getInitDataFun() // 数据
this.$nextTick(() => {
this.getEchartData() // 绘制图表
})
},
methods: {
// 获取数据 处理图表需要的data
getInitDataFun () {
return new Promise(async (resolve, reject) => {
........
})
},
getEchartData () {
const salesTrendDom = this.$refs.salesTrendRef //销售额
const orderCustomerDom = this.$refs.orderCustomerRef //下单客户数趋势
// 销售额
if (salesTrendDom) {
this.loadAnimationFun(salesTrendDom, 'salesTrendOption')
}
//下单客户数趋势
if (orderCustomerDom) {
this.loadAnimationFun(orderCustomerDom, 'orderCustomerOption')
}
},
// 加载动画
loadAnimationFun (dom, option) {
let myChart = this.$echarts.init(dom)
var observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// 加载动画
myChart.setOption(this[option])
this.addLoadEvent(myChart.resize) //添加 监听屏幕缩放
setTimeout(function () {
// 使用了resize之后,动画失效,这是echarts5的bug,echarts4不会 动画在这里加就好了
myChart.resize({
animation: {
duration: 1800,
easing: 'ease-in-out'
}
})
}, 1)
// 停止观察图表
observer.unobserve(entry.target)
}
})
})
// 观察图表元素
observer.observe(myChart.getDom())
},
addLoadEvent (fn) {
var old = window.onresize
if (typeof window.onresize != 'function') {
//防止多个window.onresize 冲突 解决
window.onresize = fn
} else {
window.onresize = function () {
old()
setTimeout(function () {
//个别时候无法刷新echarts 延迟1MS 解决
fn()
}, 1)
}
}
}
}