ResizeObserve 在 Echarts 的使用

2023-08-11 16:13| 来源: 网络整理| 查看: 265

前言

前端图表经常要进行 resize 操作，一般我们会想到监听 window resize event，但是这个事件只能监听 window 窗口大小的改变，没有办法监听到某个div大小的改变

目前解决方案

ResizeObserver

下面是使用的例子

const resizeObserver = new ResizeObserver((enties, observer)=> { // 这里可以拿到观察的所有实体 }); const elem = document.querySelect('a'); // 观察 elem 这个元素 resizeObserver.observer(elem);

ResizeObserver 有兼容问题，但是我们可以用 resize-observer-polyfill

npm install resize-observer-polyfill --save yarn add resize-observer-polyfill --save

下面看一个完整的例子 echart.vue

import Vue from 'vue'; import ResizeObserver from 'resize-observer-polyfill'; import throttle from 'lodash/throttle'; const echarts = require('echarts'); Vue.prototype.$echarts = echarts; let resizeObserver = null; export default { name: 'VEchart', props: { theme: String, options: { type: Object, default() { return null; }, isLoading: { type: Boolean, default: false, }, }, }, data() { return { instance: null, }; }, watch: { options(val) { if (val) { this.refresh(val); } }, isLoading(val) { this.initChart(); if (val) { this.instance.showLoading(); } else { this.instance.hideLoading(); } }, }, methods: { // init chart initChart() { this.instance = this.instance || this.$echarts.init(this.$refs.chart); }, // 获取chart 实例 getInstance() { this.initChart(); return this.instance; }, // 获取现有的 options getOption() { return this.getInstance.getOption(); }, // 刷新chart refresh(options, notMerge = false) { this.initChart(); this.instance.setOption(options || this.options, notMerge); }, // bind resize bindResize() { const deboundResize = throttle(() => { this.instance && this.instance.resize(); }, 250); resizeObserver = new ResizeObserver((entries, observer) => { deboundResize(); }); resizeObserver.observe(this.$refs.chart); }, // 解绑 resize unbindResize() { resizeObserver.unobserve(this.$refs.chart); }, }, mounted() { this.bindResize(); }, beforeDestroy() { // 销毁组件时，解绑 reszie this.unbindResize(); }, };

【本文地址】

公司简介

联系我们